initial commit

20 files changed, 1129 insertions, 0 deletions

diff --git a/files/zh-cn/tools/page_inspector/3d_view/index.html b/files/zh-cn/tools/page_inspector/3d_view/index.html
new file mode 100644
index 0000000000..60ea480269
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/3d_view/index.html
@@ -0,0 +1,102 @@
+---
+title: 三维视图
+slug: Tools/Page_Inspector/3D_view
+translation_of: Tools/3D_View
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="warning">
+<p>三维视图在 Firefox 47 被移除。</p>
+</div>
+
+<p>{{ fx_minversion_header("11") }}</p>
+
+<p>当你点击"三维视图"按钮之后,当前页面会进入三维视图模式,在该模式中, 页面中的HTML嵌套结构,会以图形化的方式,由外到内,从页面底部一级一级凸显出来. 这种视图可以让你很容易的看清楚页面的嵌套结构.</p>
+
+<p><img alt="3dview.png" class="default internal" src="/@api/deki/files/6123/=3dview.png"></p>
+
+<p>按住左键拖拽视图, 你可以旋转整个页面,从不同的角度查看页面的DOM层次,理清页面的结构. 页面显示区域以外的元素也变为可见状态,你能看到这些游离元素相对于页面可见区域所处的位置. 你可以点击区块选择对应的元素,该元素对应的HTML和CSS会在 <a href="/zh-cn/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML面板</a>和<a href="/zh-cn/Tools/Page_Inspector/Style_panel" title="Style panel">Style面板</a>显示出来.反回来, 你也可以在HTML面板中点击所要查看的元素,该元素也会在三维视图中成为被选择状态.</p>
+
+<p>如果你的页面查看器里没有三维视图按钮,则最有可能的原因是你的显卡驱动需要更新了. 查看<a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a>了解更多信息.</p>
+
+<h2 id="控制三维视图">控制三维视图</h2>
+
+<p>通过键盘快捷键和鼠标操作可以控制三维视图的显示模式.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">功能</td>
+   <td class="header">键盘快捷键 </td>
+   <td class="header">鼠标操作</td>
+  </tr>
+  <tr>
+   <td>放大/缩小</td>
+   <td>+/-             </td>
+   <td>滚轮向上/向下滚动</td>
+  </tr>
+  <tr>
+   <td>向左/向右旋转</td>
+   <td>a / d</td>
+   <td>按住左键向左/向右拖动</td>
+  </tr>
+  <tr>
+   <td>向上/向下旋转</td>
+   <td>w / s</td>
+   <td>按住左键向上/向下拖动</td>
+  </tr>
+  <tr>
+   <td>向左/向右平移</td>
+   <td>← / →</td>
+   <td>按住右键向左/向右拖动</td>
+  </tr>
+  <tr>
+   <td>向上/向下平移</td>
+   <td>↑ / ↓</td>
+   <td>按住右键向上/向下拖动</td>
+  </tr>
+  <tr>
+   <td>重置放大级别到默认状态</td>
+   <td>0</td>
+   <td>无</td>
+  </tr>
+  <tr>
+   <td>将焦点转移到当前选择的节点,确保当前选择的节点是可见的{{ fx_minversion_inline("13.0") }}</td>
+   <td>f</td>
+   <td>无</td>
+  </tr>
+  <tr>
+   <td>重置整个视图到默认状态(放大级别,旋转角度,移动位置等){{ fx_minversion_inline("12.0") }}</td>
+   <td>r</td>
+   <td>无</td>
+  </tr>
+  <tr>
+   <td>隐藏当前选择的节点,确保当前选择的节点是不可见的, 这样可以看到下层被遮挡的节点{{ fx_minversion_inline("12.0") }}</td>
+   <td>x</td>
+   <td>无</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="三维视图的用途">三维视图的用途</h2>
+
+<p>三维视图在很多种情形下都会派上用场:</p>
+
+<ul>
+ <li>如果一些结构不良好的HTML引起了页面的布局问题, 三维视图可能能够帮你找到问题所在. 通常情况下,布局问题是由页面内容的嵌套错误引起的.在三维视图下,嵌套错误的那些元素可以比较明显的被显示出来.</li>
+ <li>如果一个元素没有显示在页面上,你会希望能够快速的找到问题所在.三维视图提供了缩小页面显示的功能,可以显示出那些正常情况下页面可见区域之外的元素, 所以你可以通过这种方法找到那些游离的无法显示的元素.</li>
+ <li>可以查看你的页面结构,找到如何优化页面布局的方法.</li>
+ <li>当然,还有一点,就是它看起来很炫.</li>
+</ul>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/zh-cn/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
+ <li><a href="/zh-cn/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
+ <li><a href="/zh-cn/Tools/Page_Inspector/Style_panel" title="zh-cn/Tools/Page_Inspector/Style panel">Style panel</a></li>
+ <li><a href="/zh-cn/Tools" title="Tools">Tools</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "en": "en/Tools/Page_Inspector/3D_view"} ) }}</p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/edit_css_filters/index.html b/files/zh-cn/tools/page_inspector/how_to/edit_css_filters/index.html
new file mode 100644
index 0000000000..5a7922d0bd
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/edit_css_filters/index.html
@@ -0,0 +1,18 @@
+---
+title: Edit CSS filters
+slug: Tools/Page_Inspector/How_to/Edit_CSS_filters
+translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>The filter editor is new in Firefox 40.</p>
+</div>
+
+<p>Starting in Firefox 40, <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> properties in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> get a circular gray and white swatch next to them:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10873/filter-editor-swatch.png" style="display: block; height: 70px; margin-left: auto; margin-right: auto; width: 768px;"></p>
+
+<p>Clicking the swatch opens a filter editor:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10871/filter-editor.png" style="display: block; height: 228px; margin-left: auto; margin-right: auto; width: 580px;">You can add, remove, and edit filters, and drag them to change the order in which they are applied:</p>
+
+<p>{{EmbedYouTube("mAY7ZJMMve8")}}</p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/zh-cn/tools/page_inspector/how_to/examine_and_edit_css/index.html
new file mode 100644
index 0000000000..e124f984a3
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/examine_and_edit_css/index.html
@@ -0,0 +1,161 @@
+---
+title: 查看和编辑CSS
+slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+tags:
+  - CSS
+  - 工具
+  - 查看器
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+---
+<div>{{ToolsSidebar}}</div><p>在查看器的<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#CSS_面板">CSS面板</a>，你可以查看和编辑CSS。</p>
+
+<h2 id="查看_CSS_规则">查看 CSS 规则</h2>
+
+<p><a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#Rules_view">“规则” 视图</a> 列出了适用于所选元素的所有规则，排序<font><font>从</font></font> most-specific 到 least-specific：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 550px;"></p>
+
+<p>如果在<a href="/zh-CN/docs/Tools/Tools_Toolbox#Settings_2">开发者工具箱选项</a>中选中“显示浏览器样式”选项，“规则”视图同时就会列出<a href="/zh-CN/docs/Web/CSS/Cascade">用户代理样式</a>（浏览器样式）。<br>
+ 注：此设置独立于在<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">“计算后”视图</a>中的“浏览器样式” 复选框设置。</p>
+
+<h3 id="规则显示">规则显示</h3>
+
+<p>显示在一个样式表中的每条规则，列表中每条跟随<code>一个</code>列表<code>，内容为 属性:值、</code> 声明 。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11205/css-rule-anatomy.png" style="display: block; height: 288px; margin-left: auto; margin-right: auto; width: 550px;"></p>
+
+<ul>
+ <li>选择器旁边的图标是一个指向目标的按钮：单击按钮在页面上突出显示匹配这个选择器的所有节点。</li>
+ <li>被划掉的声明是被后面的规则所覆盖的。</li>
+ <li>如果鼠标悬停在一个声明上，,旁边会出现一个复选框，你可以用它来切换或关闭声明。</li>
+ <li>右侧链接到一个规则。</li>
+</ul>
+
+<p>用户代理样式将显示在一个不同的背景上，并显示链接到的文件名和行号，且包含前缀<code>（用户代理）</code>：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10045/css-ua-rule.png" style="display: block; margin-left: auto; margin-right: auto; width: 387px;">If you hover the mouse pointer over a selector in the Rules view, all elements matching that selector are highlighted in the page:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10047/highlight-matched-selectors.png" style="display: block; margin-left: auto; margin-right: auto; width: 831px;"></p>
+
+<h3 id="过滤规则">过滤规则</h3>
+
+<p>该功能始于Firefox 40，在“规则”视图的顶部增加了一个“过滤样式”检索框：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 253px; margin-left: auto; margin-right: auto; width: 600px;">当您键入：</p>
+
+<ul>
+ <li>不包含键入字符串的所有规则都被隐藏</li>
+ <li>其中包含了键入字符串的任何声明都被强调</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 390px; margin-left: auto; margin-right: auto; width: 600px;">点击检索框末尾的“X”来移除此次过滤。</p>
+
+<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p>
+
+<h3 id="显示伪元素">显示伪元素</h3>
+
+<p>从Firefox 41开始，如果下列伪元素被应用到所选择的元素中，规则视图会显示出来：</p>
+
+<p><code>:after<br>
+ :before<br>
+ :first-letter<br>
+ :first-line<br>
+ :selection<br>
+ :-moz-color-swatch<br>
+ :-moz-number-spin-box<br>
+ :-moz-number-spin-down<br>
+ :-moz-number-spin-up<br>
+ :-moz-number-text<br>
+ :-moz-number-wrapper<br>
+ :-moz-placeholder<br>
+ :-moz-progress-bar<br>
+ :-moz-range-progress<br>
+ :-moz-range-thumb<br>
+ :-moz-range-track<br>
+ :-moz-selection</code></p>
+
+<p>如果所选元素应用了伪元素，在这些伪元素选中之前是被隐藏的， 以一个三角作为显示：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p>
+
+<p>单击三角显示它们：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<h3 id="Setting_hover_active_focus">Setting :hover, :active, :focus</h3>
+
+<p>从Firefox 41开始，在过滤框右侧新增一个按钮：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">单击该按钮可看到三个复选框，你可以用它来对所选元素切换伪类 {{cssxref(":hover")}}, {{cssxref(":active")}} 和 {{cssxref(":focus")}} ：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">虽然这个按钮是在Firefox 41中新加入的，但该功能已存在于早期版本的Firefox。<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">在HTML视图中右键元素弹出菜单中</a> 可以对所选元素进行伪类切换。</p>
+
+<h3 id="链接到CSS文件">链接到CSS文件</h3>
+
+<p>在每一个规则的右上方会有显示：源文件名 ​​和 行号，并附有链接，点击后在<a href="/zh-CN/docs/Tools/Style_Editor">样式编辑器</a>中打开该文件。</p>
+
+<p>从Firefox 41开始，您可以复制源文件的位置。右击该链接并选择“复制位置”。</p>
+
+<p>查看器能理解CSS source maps。这意味着，如果你正在使用的一个对source maps具有支持能力的CSS预处理器，并在<a href="/zh-CN/docs/Tools_Toolbox#Style_Editor">样式编辑器设置</a>中启用对source maps的支持，则该链接将带您到原始来源，而不是生成CSS:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10049/css-sourcemap.png" style="display: block; margin-left: auto; margin-right: auto; width: 388px;"></p>
+
+<p>到<a href="/zh-CN/docs/Tools/Style_Editor#Source_map_support">样式编辑器文档</a>了解更多关于对CSS source map的支持。</p>
+
+<h3 id="获取CSS属性帮助">获取CSS属性帮助</h3>
+
+<p>Starting in Firefox 40, if you context-click on a CSS property name in the Rules view, you can open a popup displaying help for that property from MDN:始于Firefox 40，如果你在规则视图中右键CSS属性名称，选择菜单中”显示MDN文档“项，可以打开一个弹窗显示从MDN获取的该属性的帮助信息：</p>
+
+<p>{{EmbedYouTube("qZRLqpJiUsI")}}</p>
+
+<p>请注意，就目前而言，帮助信息直接从MDN获取，非缓存，因此该功能需要网络连接。</p>
+
+<h2 id="查看计算后CSS">查看计算后CSS</h2>
+
+<p>要查看所选元素的完整计算后CSS，请切换到<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#Computed_view">”计算后“视图</a>。这里显示选定元素的每个CSS属性计算后值 ：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 265px; margin-left: auto; margin-right: auto; width: 550px;"></p>
+
+<p>单击属性名旁边的箭头显示规则和设定值，以及一个源文件名和行号的链接：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 227px; margin-left: auto; margin-right: auto; width: 550px;"></p>
+
+<p>默认情况下，该视图只显示已明确的由页面设置的值，要看到所有值，请点击“浏览器样式”复选框。</p>
+
+<p>在检索框中键入关键字可以进行列表的实时过滤。因此，举例来说，如果你只是想看看字体相关的设置，你可以在检索框键入“font”，会只有属性名称中带有“font”的被列出。你也可以检索属性的值，在检索框中键入"Lucida Grande"，找到被设置成该值的字体规则。</p>
+
+<h2 id="编辑规则">编辑规则</h2>
+
+<p>如果你点击一个声明或规则，你可以对其进行编辑和查看，并立即看到结果。要添加一个新的声明到规则中，则点击规则的最后一行（右括号占据行）。如果你编辑时，输入了一个无效属性值，或未知属性名称，声明下会出现一个黄色的警告图标。</p>
+
+<p>你所做的任何更改都是临时的，重新加载页面会恢复原来的样式。</p>
+
+<p>在编辑模式下您可以使用箭头键来增大/减小规则数字。按一下向上箭头会由“1px”变成”2px“，Shift +向上/向下将以10为最小单位改变，Alt +向上/向下变化值为0.1，shift+Page up/down 变化值为100。</p>
+
+<h2 id="添加规则">添加规则</h2>
+
+<p>你可以在规则视图中添加新的规则。只需在右键单击后显示的上下文菜单中，选择“添加规则”。将对当前选择匹配的节点添加一个新的CSS规则。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 550px;"></p>
+
+<p>始于Firefox 41，新增一个按钮，使你能够做同样的事情。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 550px;"></p>
+
+<h2 id="复制规则">复制规则</h2>
+
+<p>Starting in Firefox 41, there are extra context menu items in the Rules view to copy rules, and pieces of rules, to the clipboard:从Firefox 41开始，在规则查看视图上下文菜单新增了 复制规则和规则匹配项目到剪贴板：</p>
+
+<ul>
+ <li>复制规则</li>
+ <li>复制选择器</li>
+ <li>复制属性声明</li>
+ <li>复制属性名称</li>
+ <li>复制属性值</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p>
+
+<h2 id="也可以看看">也可以看看</h2>
+
+<p>查看器还包括一些辅助CSS的特别工具，如颜色，字体和动画。要了解这些详见<a href="/zh-CN/docs/Tools/Page_Inspector">导览列表</a>。</p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/zh-cn/tools/page_inspector/how_to/examine_and_edit_html/index.html
new file mode 100644
index 0000000000..8b5f7fecbc
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/examine_and_edit_html/index.html
@@ -0,0 +1,179 @@
+---
+title: 查看和编辑HTML
+slug: Tools/Page_Inspector/How_to/Examine_and_edit_HTML
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML
+---
+<div>{{ToolsSidebar}}</div><p>您可以在<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML面板</a>查看和编辑页面的HTML。</p>
+
+<h2 id="HTML导航">HTML导航</h2>
+
+<div class="twocolumns">
+<h3 id="At_the_top_of_the_HTML_pane_there's_a_toolbar_split_into_two_sections_a_trail_of_breadcrumbs_and_a_search_box.HTML面板的顶部有一个工具栏分为两个部分：一个面包屑导航和一个搜索框。">At the top of the HTML pane there's a toolbar split into two sections: a trail of <a href="http://en.wikipedia.org/wiki/Breadcrumb_%28navigation%29">breadcrumbs</a> and a search box.HTML面板的顶部有一个工具栏分为两个部分：一个面包屑导航和一个搜索框。</h3>
+</div>
+
+<p>这里显示了通过文档包含所选元素的分支的完整层次结构：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10813/inspector-breadcrumbs.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 739px;">如果你点击并按住导航条上的一个元素，会出现一个弹出菜单，让你选择一个元素的同级。如果想要更宽的可用空间，点击导航栏左右两边的小箭头图标可以滚动面包屑。</p>
+
+<p>从Firefox 34起，将您的鼠标停留在一个面包屑上会高亮页面元素。</p>
+
+<h2 id="搜索">搜索</h2>
+
+<p>点击搜索框可以扩大它，然后输入你想寻找的类型。你会看到一个弹出匹配提示框。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10811/inspector-search-annotated.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 736px;">按“Enter”，页面中的第一个元素类型将被选中，再按“Enter”查找下一个。</p>
+
+<p>你可以以<a href="/zh-CN/docs/Glossary/CSS_Selector">CSS选择器</a>搜索搜索一个标签, 所以你可以通过输入字符串 <code>#myId</code>  来检索拥有 myId 的元素。</p>
+
+<p>从Firefox 40起，您不使用CSS选择器可以搜索类或id属性，可以直接输入 <code>myId</code> 查找元素。</p>
+
+<h3 id="HTML_树">HTML 树</h3>
+
+<p>剩下的窗口显示你页面的HTML树（这个UI也被称为标签视图）。左边的每个箭头表示一个节点：单击箭头来展开节点。如果你按住Alt键单击箭头，会一次性展开下面的所有节点。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8541/inspector-html-tree.png" style="display: block; margin-left: auto; margin-right: auto;">移动鼠标经过HTML树的一个节点就会高亮页面上的对应元素。</p>
+
+<p>使用 <a href="/en-US/docs/Web/CSS/display">display:none</a>  隐藏的节点显示为浅色（比如像 <a href="/en-US/docs/Web/HTML/Element/head">&lt;head&gt;</a> 这样不被显示的节点一样）。</p>
+
+<h3 id="before_和_after">::before 和 ::after</h3>
+
+<p>从Firefox 35起，你可以查看添加的 <a href="/en-US/docs/Web/CSS/::before"><code>::before</code></a> 和 <a href="/en-US/docs/Web/CSS/::after"><code>::after</code></a> 伪对象：</p>
+
+<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p>
+
+<h2 id="元素弹出菜单">元素弹出菜单</h2>
+
+<p>右键元素激活这个菜单，您可以在一个特定节点使用弹出菜单执行某些常见的任务。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10883/markup-view-context-menu.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 238px;">菜单给了你以下选项：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%;">作为HTML编辑</td>
+   <td><a href="#Editing_HTML">编辑元素的 HTML</a></td>
+  </tr>
+  <tr>
+   <td>复制内部 HTML</td>
+   <td>Copy the inner HTML for the element</td>
+  </tr>
+  <tr>
+   <td>复制外部 HTML</td>
+   <td>Copy the outer HTML for the element</td>
+  </tr>
+  <tr>
+   <td>复制唯一选择器</td>
+   <td>Copy a CSS selector that uniquely selects the element</td>
+  </tr>
+  <tr>
+   <td>复制图像数据URL</td>
+   <td>如果选择的元素是图像的话，以 data:// URL的形式复制图像</td>
+  </tr>
+  <tr>
+   <td>显示 DOM 属性</td>
+   <td>Open the <a href="/en-US/docs/Tools/Web_Console#The_split_console">split console</a> and enter the console command "<code>inspect($0)</code>" to <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects">inspect</a> the currently selected element.</td>
+  </tr>
+  <tr>
+   <td>粘贴到内部 HTML</td>
+   <td>Paste the clipboard contents into the node as its <a href="/en-US/docs/Web/API/element.innerHTML">innerHTML</a>.</td>
+  </tr>
+  <tr>
+   <td>粘贴到外部 HTML</td>
+   <td>Paste the clipboard contents into the node as its <a href="/en-US/docs/Web/API/element.outerHTML">outerHTML</a>.</td>
+  </tr>
+  <tr>
+   <td>粘贴/之前</td>
+   <td>Paste the clipboard contents into the document immediately before this node.</td>
+  </tr>
+  <tr>
+   <td>粘贴/之后</td>
+   <td>Paste the clipboard contents into the document immediately after this node.</td>
+  </tr>
+  <tr>
+   <td>粘贴/第一个子对象</td>
+   <td>Paste the clipboard contents into the document as the first child of this node.</td>
+  </tr>
+  <tr>
+   <td>粘贴/最后一个子对象</td>
+   <td>Paste the clipboard contents into the document as the last child of this node.</td>
+  </tr>
+  <tr>
+   <td>Scroll Into View</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 40</p>
+    </div>
+    Scrolls the web page so the selected node is visible.</td>
+  </tr>
+  <tr>
+   <td>删除节点</td>
+   <td>Delete the element</td>
+  </tr>
+  <tr>
+   <td>Open Link in New Tab</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 40</p>
+    </div>
+    (only when invoked over a link, such as an href attribute) Opens the linked item in a new tab.</td>
+  </tr>
+  <tr>
+   <td>Open File in Debugger</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 40</p>
+    </div>
+    (only when invoked over a link to a JS source) Opens the linked source in the Debugger.</td>
+  </tr>
+  <tr>
+   <td>Open File in Style-Editor</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 40</p>
+    </div>
+    (only when invoked over a link to a CSS source) Opens the linked source in the Style Editor.</td>
+  </tr>
+  <tr>
+   <td>Copy Link Address</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 40</p>
+    </div>
+    (only when invoked over a URL) Copy the URL.</td>
+  </tr>
+  <tr>
+   <td>:hover</td>
+   <td>Set the <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover">:hover</a> CSS pseudo-class</td>
+  </tr>
+  <tr>
+   <td>:active</td>
+   <td>Set the <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS pseudo-class</td>
+  </tr>
+  <tr>
+   <td>:focus</td>
+   <td>Set the <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a> CSS pseudo-class</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="编辑_HTML"><a name="Editing_HTML">编辑 HTML</a></h2>
+
+<p>您可以直接在HTML面板编辑HTML标签、属性和内容：双击要编辑的文本，修改它，按Enter键立即看到更改效果。</p>
+
+<p>编辑元素的 <a href="/zh-CN/docs/Web/API/Element.outerHTML">outerHTML</a>，激活元素的弹出菜单，选择“作为 HTML 编辑”。你会在HTML面板看到一个文本框：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7451/inspector-editHTML.png" style="display: block; height: 269px; margin-left: auto; margin-right: auto; width: 540px;">在这里你可以添加任何HTML代码：改变元素的标签，改变现有元素，或添加新的。一旦你点击外框，修改即应用于页面。</p>
+
+<h3 id="复制与粘贴">复制与粘贴</h3>
+
+<p>您可以在HTML树种使用弹出菜单来复制节点并粘贴到所需的位置。</p>
+
+<h3 id="拖拽功能">拖拽功能</h3>
+
+<div class="geckoVersionNote">
+<p>新增于 Firefox 39。</p>
+</div>
+
+<p>从Firefox 39起，您可以通过移动HTML树的节点来编辑HTML。点击并按住任何元素，然后将其拖在树的上或下，当您释放鼠标按钮时，该元素将被插入相应的位置：</p>
+
+<p>{{EmbedYouTube("oI-a035nfWk")}}</p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/zh-cn/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html
new file mode 100644
index 0000000000..91736d61b3
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html
@@ -0,0 +1,34 @@
+---
+title: Examine and edit the box model
+slug: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model
+---
+<div>{{ToolsSidebar}}</div><h2 id="Viewing_the_box_model_查看盒子模型">Viewing the box model 查看盒子模型</h2>
+
+<h3 id="查看盒子模型内容">查看盒子模型内容</h3>
+
+<p>点击<a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">Select Element button</a> 选择元素的按钮之后，当鼠标悬停在页面的某个元素的时候，该元素的<a href="/en-US/docs/Web/CSS/box_model">box model</a>盒子模型将在页面显示。</p>
+
+<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p>
+
+<p>当鼠标悬停在HTML区中的元素，元素的盒子模型也会显示。</p>
+
+<p>{{EmbedYouTube("xA4IxTttNLk")}}</p>
+
+<p>From Firefox 39, if the element is inline and is split over multiple line boxes, the highlighter shows each individual line box that together make up the element:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display: block; height: 186px; margin-left: auto; margin-right: auto; width: 351px;"></p>
+
+<h3 id="The_Box_Model_view_盒子模型视图">The Box Model view 盒子模型视图</h3>
+
+<p>当选中一个页面元素的时候，可以在<a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Box_Model_view">Box Model view</a>盒子模型视图看到该元素详细的盒子模型信息。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10875/box-model-view.png" style="display: block; height: 330px; margin-left: auto; margin-right: auto; width: 515px;">从Firefox 40开始，当鼠标悬停在一个盒子模型的值上方，就可以看到一个弹框提示这个值来自哪个CSS样式。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10877/box-model-view-tooltip.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 630px;"></p>
+
+<h2 id="Editing_the_box_model_编辑盒子模型">Editing the box model 编辑盒子模型</h2>
+
+<p>可以编辑<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">Box Model view</a>盒子模型视图里的变量，并可以在页面立刻看到修改的效果。</p>
+
+<p>{{EmbedYouTube("jij8IXYzpcA")}}</p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/zh-cn/tools/page_inspector/how_to/examine_event_listeners/index.html
new file mode 100644
index 0000000000..61e3a173a4
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/examine_event_listeners/index.html
@@ -0,0 +1,23 @@
+---
+title: Examine event listeners
+slug: Tools/Page_Inspector/How_to/Examine_event_listeners
+translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners
+---
+<div>{{ToolsSidebar}}</div><p>从Firefox 33开始， <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane </a>HTML区的标签元素右边有一个"ev"的图标，表示该元素绑定的事件。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9955/ev-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 571px;"></p>
+
+<p>点击“ev”这个图标，将会弹出该元素绑定的所有事件监听器。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9953/ev-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 628px;">每行包括：</p>
+
+<ul>
+ <li>暂停按钮：点击这个按钮会在<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Debugger</a>中跳到注册这个事件的源码处，然后可以在这个位置打上断点。</li>
+ <li>事件的名称</li>
+ <li>事件监听器的名字和监听器所在的源码文件的行号：点击它将弹出该监听函数的源码。</li>
+ <li>标识该事件是否是冒泡事件和哪个规范定义的该事件。</li>
+</ul>
+
+<p>注意到，不仅可以查看一般的DOM事件，还可以查看<a class="external external-icon" href="http://api.jquery.com/category/events/">jQuery events</a>事件。</p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/examine_flexbox_layouts/index.html b/files/zh-cn/tools/page_inspector/how_to/examine_flexbox_layouts/index.html
new file mode 100644
index 0000000000..7ee8e5ab77
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/examine_flexbox_layouts/index.html
@@ -0,0 +1,91 @@
+---
+title: CSS Flexbox 查看器：检查Flexbox布局
+slug: Tools/Page_Inspector/How_to/Examine_Flexbox_layouts
+translation_of: Tools/Page_Inspector/How_to/Examine_Flexbox_layouts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary"><strong>Flexbox Inspector</strong> 让您通过Firefox DevTools深入的探索网页上使用<a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS弹性盒子布局</a>的元素。它能协助您发现网页上的每一个Flex容器，并更仔细的检查及修改运用Flex布局的元素，更轻易的调试布局问题等。</p>
+
+<h2 id="发现_Flex_容器">发现 Flex 容器</h2>
+
+<p>当您把 <code><a href="/en-US/docs/Web/CSS/display">display: flex</a></code> 套在网页上其中的某个HTML元素时，DevTools会显示一些协助开发者方便检查Flex布局的特点。</p>
+
+<h3 id="通过查看器面板">通过查看器面板</h3>
+
+<p>通过<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#HTML_%E9%9D%A2%E6%9D%BF">查看器面板</a>，网页上每个运用 Flex布局的元素都会有一个<code>flex</code><span class="tlid-translation translation" lang="zh-CN"><span title="">标签：</span></span></p>
+
+<p><img alt="查看器板面显示flex标签" src="https://mdn.mozillademos.org/files/17110/zh-html-pane.png" style="height: 500px; width: 861px;"></p>
+
+<p>点击<code>flex</code>标签会开启Flexbox覆盖。即使您把鼠标从容器移开，覆盖依然会现实在页面上。</p>
+
+<h3 id="通过提示框">通过提示框</h3>
+
+<p>当您把鼠标移到查看器中的任何元素时，元素上会出现提示框。提示框会告诉您关于此元素的更多信息。</p>
+
+<p>以下的标头是个Flex容器:</p>
+
+<p><img alt="提示框显示Flex容器" src="https://mdn.mozillademos.org/files/17114/zh-tooltip-cont.png" style="display: block; height: 91px; margin: 0px auto; width: 806px;">每一个导航连接是个Flex项目:</p>
+
+<p><img alt="提示框显示Flex项目" src="https://mdn.mozillademos.org/files/17115/zh-tooltip-item.png" style="display: block; height: 90px; margin: 0px auto; width: 807px;"></p>
+
+<p>以下的<code>nav</code>元素则同时是标头的Flex项目，以及导航连接的Flex容器：</p>
+
+<p><img alt="提示框显示元素同时是Flex容器和Flex项目" src="https://mdn.mozillademos.org/files/17111/zh-tooltip-both.png" style="display: block; height: 90px; margin: 0px auto; width: 806px;"></p>
+
+<h3 id="通过_CSS_面板">通过 CSS 面板</h3>
+
+<p>CSS规则面板现实元素上的CSS声明。任何 <code><a href="/en-US/docs/Web/CSS/display">display: flex</a></code> 的声明会在 <code>flex</code> 字的左边加上一个Flexbox的小标图 <img alt="" src="https://mdn.mozillademos.org/files/16345/flexbox_icon.gif" style="height: 15px; width: 17px;">。您可以点击这个标图开启Flexbox覆盖，显示与Flex项目相关的信息。</p>
+
+<p><img alt="规则面板" src="https://mdn.mozillademos.org/files/17106/zh-css-pane.png" style="display: block; height: 472px; margin: 0px auto; width: 481px;"></p>
+
+<p>Flexbox覆盖会在每个Flex项目加上大纲:</p>
+
+<p><img alt="Flexbox覆盖" src="https://mdn.mozillademos.org/files/17113/zh-overlay.png" style="display: block; height: 801px; margin: 0px auto; width: 1595px;"></p>
+
+<p>即使您在查看器点击其它元素，覆盖依然会显示在页面上。当您修改相关的CSS属性值时，可以轻易的观察子元素的变化。</p>
+
+<h3 id="布局面板的弹性盒截面">布局面板的弹性盒截面</h3>
+
+<p>布局面板有几个可折叠的截面，其中包括弹性盒截面。如果在选择Flex元素前把截面扩大，您只会看到选择一个弹性（Flex）容器或项目以继续的信息。当你选上运用Flex布局的元素时，弹性盒截面将会显示调查Flex容器或项目的一些选项。</p>
+
+<div class="note">
+<p><strong>Note</strong>: The Layout view can be found underneath the <em>Layout</em> tab on the right-hand pane of the Page Inspector. The above and below screenshots should give you further hints on how to get to this.</p>
+</div>
+
+<h2 id="Flex容器选项">Flex容器选项</h2>
+
+<p>以下是Flex容器选项截面的截图：</p>
+
+<p><img alt="布局面板" src="https://mdn.mozillademos.org/files/17108/zh-flex-cont.png" style="border-style: solid; border-width: 1px; display: block; height: 483px; margin: 0px auto; width: 583px;"></p>
+
+<p>从中可以调整两个设定：</p>
+
+<ul>
+ <li>元素选择器右边会显示一个小圆圈。点击小圆圈会启动选色工具，让您更改覆盖大纲的颜色。</li>
+ <li>您也可以利用截面的右边的开关控制覆盖的显示。</li>
+</ul>
+
+<h2 id="Flex项目属性">Flex项目属性</h2>
+
+<p>每个Flex项目会按编号排列，列表会显示元素的名字及类名。把鼠标移到其中任何项目上将会把它在网页上突出显示。</p>
+
+<p><img alt="弹性项目列表" src="https://mdn.mozillademos.org/files/17109/zh-flex-items.png" style="border: 1px solid black; display: block; height: 166px; margin: 0px auto; width: 390px;"></p>
+
+<p>点击项目会显示关于Flex项目的细节。</p>
+
+<p><img alt="Flex项目细节信息" src="https://mdn.mozillademos.org/files/17112/zh-item-details.png" style="border: 1px solid black; display: block; height: 566px; margin: 0px auto; width: 536px;"></p>
+
+<p>这个视图显示关于Flex项目的以下信息：</p>
+
+<ul>
+ <li>Flex项目尺寸的图解</li>
+ <li>内容尺寸 - 浏览器计算Flex项目尺寸的启发点（容器未应用约束前的尺寸）</li>
+ <li>弹性 - Flex项目伸展或者收缩的尺寸。当容器有多余的空间，伸展程度将依据 <code>flex-grow</code>值计算，当容器欠缺空间时，收缩程度将依据<code>flex-shrink</code>值计算。</li>
+ <li>最小尺寸（只会在项目进行最小尺寸钳位时出现）- 当容器欠缺空间时，Flex项目内容能收缩到的最小宽度</li>
+ <li>最终尺寸 - 浏览器依照各个布局属性值进行Flex项目宽度计算后的最终尺寸</li>
+</ul>
+
+<p>截面的上方有个下拉列表，方便您选择容器中的任何Flex项目：</p>
+
+<p><img alt="Flex项目下拉列表" src="https://mdn.mozillademos.org/files/17107/zh-dropdown.png" style="border: 1px solid black; display: block; height: 217px; margin: 0px auto; width: 337px;"></p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/index.html b/files/zh-cn/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..bef125373c
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/index.html
@@ -0,0 +1,32 @@
+---
+title: 如何操作
+slug: Tools/Page_Inspector/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Page_Inspector/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">可以在这里找到各种如何操作的链接。这些链接深度描述了一写如何操作的技巧。</span></p>
+
+<p>{{ ListSubpages () }}</p>
+
+<p> </p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_filters">Edit filters</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/zh-cn/tools/page_inspector/how_to/inspect_and_select_colors/index.html
new file mode 100644
index 0000000000..35690be697
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/inspect_and_select_colors/index.html
@@ -0,0 +1,20 @@
+---
+title: Inspect and select colors
+slug: Tools/Page_Inspector/How_to/Inspect_and_select_colors
+translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors
+---
+<div>{{ToolsSidebar}}</div><p>在CSS面板中的<a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a>规则视图，如果样式规则包含颜色值，颜色值的旁边会显示一个颜色样板。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p>
+
+<p>点击颜色样板，将弹出选择面板，可以通过选择面板修改当前颜色的值。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p>
+
+<p>The color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page:</p>
+
+<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p>
+
+<p>Starting in Firefox 40, clicking the color sample while holding down the Shift key will change the color format:</p>
+
+<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/open_the_inspector/index.html b/files/zh-cn/tools/page_inspector/how_to/open_the_inspector/index.html
new file mode 100644
index 0000000000..e00223af06
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/open_the_inspector/index.html
@@ -0,0 +1,15 @@
+---
+title: 打开查看器
+slug: Tools/Page_Inspector/How_to/Open_the_Inspector
+translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>有两种主要方法打开查看器：</p>
+
+<ul>
+ <li>未选中元素：从“开发者”菜单选择“查看器”选项或使用<a href="/zh-CN/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">键盘快捷键</a>打开</li>
+ <li>选择一个元素：右键单击网页上的一个元素，并选择“查看元素”</li>
+</ul>
+
+<p>查看器将出现在浏览器窗口底部：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10055/inspector-in-context.png" style="display: block; margin-left: auto; margin-right: auto; width: 845px;">开始找到你的 开始了解查看器，查看<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour">UI导览</a>。</p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html b/files/zh-cn/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html
new file mode 100644
index 0000000000..59d7c6b405
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html
@@ -0,0 +1,24 @@
+---
+title: Reposition elements in the page
+slug: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page
+translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="geckoVersionNote">Firefox 48 新功能</div>
+
+<p>从 Firefox 48 开始，您就可以通过拖动来定位的元素。</p>
+
+<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p>
+
+<p>如果一个元素的  <code>{{cssxref("position")}} 设置为 absolute, relative 或 fixed 且包含</code>  {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} 中的一个，在开发工具 “查看器” -&gt; “布局”-&gt;“<a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">盒模型</a>” 面板将会看到一个按钮：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p>
+
+<p>点击这个按钮，可以在元素上看到两个调节手柄：</p>
+
+<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p>
+
+<p>您可以通过这两个手柄来拖动元素，设置元素的位置。</p>
+
+<p>如果元素已经设置了绝对定位，虚线表示该元素相对于哪个元素的位置。如果元素设置了相对定位，虚线表示元素的原始位置。每条线会即时提示偏移的位置提示信息。</p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/select_an_element/index.html b/files/zh-cn/tools/page_inspector/how_to/select_an_element/index.html
new file mode 100644
index 0000000000..5bb8c8c18c
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/select_an_element/index.html
@@ -0,0 +1,25 @@
+---
+title: 选择一个元素
+slug: Tools/Page_Inspector/How_to/Select_an_element
+translation_of: Tools/Page_Inspector/How_to/Select_an_element
+---
+<div>{{ToolsSidebar}}</div><p>{{EmbedYouTube("y2LcsxE2pR0")}}</p>
+
+<p>如果你通过点击“检查元素”查看元素”<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">打开了查看器</a>，然后一个元素就已经被选中了。</p>
+
+<p>否则，当你在页面上移动鼠标时候，鼠标下的元素就会高亮显示，注释显示HTML标记、任何类或ID属性和元素的大小。同时，在上下文中，在检查员的左窗格中显示HTML定义：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8311/inspector-open.png" style="display: block; margin-left: auto; margin-right: auto;">从Firefox 39起，您可以使用方向键来改变当前选中的元素：</p>
+
+<ul>
+ <li>左：高亮当前元素的父级</li>
+ <li>右：高亮显示当前元素的子级，如果没有子级则就轮到同级， 如果没有同级就轮到下一个节点</li>
+</ul>
+
+<p>当一个元素及其父级占据了屏幕同一个空间的情况下，只使用鼠标很难选中其中一个元素，这个功能就特别有用了。</p>
+
+<p>点击高亮显示的元素选择它。一旦一个元素被选中，就会在查看器左侧<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML面板</a>上标记突出显示，右侧的<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS面板</a>中显示样式信息：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8313/inspector-selected.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>有两种方法可以选中一个新的元素：要么在HTML面板点击标记，或单击<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">“选择元素”按钮</a>后点击网页中的元素。</p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html b/files/zh-cn/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html
new file mode 100644
index 0000000000..f139c55772
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html
@@ -0,0 +1,12 @@
+---
+title: Use the Inspector from the Web Console
+slug: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console
+translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console
+---
+<div>{{ToolsSidebar}}</div><p>在页面查看器最后选择的一个元素，可以在控制台输入<code>$0取得该元素。</code></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10057/console-$0.png" style="display: block; margin-left: auto; margin-right: auto; width: 761px;">在控制台输出的DOM元素右侧有一个链接图标，如果把鼠标悬停在链接图标的上方，该链接将被高亮，并且如果点击该链接，就会跳到页面选择器中并且选中该DOM元素。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10059/console-highlight.png" style="display: block; margin-left: auto; margin-right: auto; width: 760px;"></p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/view_background_images/index.html b/files/zh-cn/tools/page_inspector/how_to/view_background_images/index.html
new file mode 100644
index 0000000000..0ab79b2216
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/view_background_images/index.html
@@ -0,0 +1,12 @@
+---
+title: View background images
+slug: Tools/Page_Inspector/How_to/View_background_images
+translation_of: Tools/Page_Inspector/How_to/View_background_images
+---
+<div>{{ToolsSidebar}}</div><p>在规则视图，把鼠标悬停在相应的规则区域上，你可以预览用<em>background-image</em>指定的图片。</p>
+
+<h4 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/11215/css-image-preview.png" style="display: block; height: 422px; margin-left: auto; margin-right: auto; width: 585px;"></h4>
+
+<p>在Firefox 41之后的版本，如果你右击图片的声明，你会看到一个复制图像地址的选项。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11213/css-copy-image-data-url.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 587px;"></p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html b/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html
new file mode 100644
index 0000000000..a5a6ae1e6e
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html
@@ -0,0 +1,22 @@
+---
+title: View fonts
+slug: Tools/Page_Inspector/How_to/View_fonts
+translation_of: Tools/Page_Inspector/How_to/Edit_fonts
+---
+<div>{{ToolsSidebar}}</div><h2 id="font-family_tooltip_字体系列提示">font-family tooltip 字体系列提示</h2>
+
+<p>当鼠标悬停在样式规则视图中的一个字体系列类型，将出现应用该字体类型的样例提示：</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9957/font-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 565px;"></p>
+
+<h2 id="Fonts_view_字体视图">Fonts view 字体视图</h2>
+
+<p><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">Fonts view</a>字体视图显示当前选中元素所应用的所有字体类型。需要注意的是，它显示的是浏览器当前系统使用的字体，这可能和CSS样式指定的字体不一样。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>字体视图默认显示的文本是"Abc"，从Firefox 41开始，这个预览文本可以自由编辑。</p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/visualize_transforms/index.html b/files/zh-cn/tools/page_inspector/how_to/visualize_transforms/index.html
new file mode 100644
index 0000000000..3b39197447
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/visualize_transforms/index.html
@@ -0,0 +1,10 @@
+---
+title: Visualize transforms
+slug: Tools/Page_Inspector/How_to/Visualize_transforms
+tags:
+  - 指南
+translation_of: Tools/Page_Inspector/How_to/Visualize_transforms
+---
+<div>{{ToolsSidebar}}</div><p>当鼠标悬停在样式<a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a>规则视图的一个<a href="/en-US/docs/Web/CSS/transform"><code>transform</code></a>属性，将会在页面上层做对应的模拟运动：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9961/transform.png" style="display: block; height: 1670px; margin-left: auto; margin-right: auto; width: 1968px;"></p>
diff --git a/files/zh-cn/tools/page_inspector/how_to/work_with_animations/index.html b/files/zh-cn/tools/page_inspector/how_to/work_with_animations/index.html
new file mode 100644
index 0000000000..8a957c3596
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/how_to/work_with_animations/index.html
@@ -0,0 +1,184 @@
+---
+title: Work with animations
+slug: Tools/Page_Inspector/How_to/Work_with_animations
+translation_of: Tools/Page_Inspector/How_to/Work_with_animations
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>本文涵盖了三种工具，您可以使用其来可视化或编辑动画:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#动画编辑器">动画编辑器</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">关键帧编辑</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">时序函数编辑</a></li>
+</ul>
+
+<h2 id="动画编辑器">动画编辑器</h2>
+
+<p>The Page Inspector's <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">Animations view</a> displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.</p>
+
+<p>It displays animations created using <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS @keyframes rules</a>, or the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>. Starting in Firefox 48, it will show animations applied to the <code><a href="/en-US/docs/Web/CSS/::before">::before</a></code> and <code><a href="/en-US/docs/Web/CSS/::after">::after</a></code> pseudo-elements.</p>
+
+<p>To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.</p>
+
+<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}</p>
+
+<p>These animations are made using the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>.</p>
+
+<p>Let's use the animation inspector to see what's going on in this example.</p>
+
+<ol>
+ <li>Right-click in the box and select "Inspect Element"</li>
+ <li>Make sure the selected element is the <code>&lt;div class="channel"&gt;</code></li>
+ <li>Switch over to the "Animations" tab</li>
+ <li>Play the animation</li>
+</ol>
+
+<p>{{EmbedYouTube("XmKeAKryE5I")}}</p>
+
+<p>Let's take a closer look at the contents of the animation inspector here:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16354/animation_pane.png" style="border: 1px solid black; display: block; height: 297px; margin-left: auto; margin-right: auto; width: 394px;"></p>
+
+<p>It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).</p>
+
+<h3 id="Animation_bars">Animation bars</h3>
+
+<p>Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:</p>
+
+<ul>
+ <li>blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property</li>
+ <li>orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used</li>
+ <li>green if the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> was used</li>
+</ul>
+
+<p>The bar contains a lightning bolt icon <img alt="" src="https://mdn.mozillademos.org/files/13106/compositor.png" style="width: 15px;"> if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</p>
+
+<p>From Firefox 52 onwards, the bar is shaped to reflect the easing effect used for the animation. In the example above you can see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out.</p>
+
+<p>If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS <code>@keyframes</code>, there is one bar for each animation, labeled with its name.</p>
+
+<p>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>delay</code> and <code>endDelay</code></a> are both represented.</p>
+
+<p>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:</p>
+
+<ul>
+ <li>the type of animation: CSS transition, CSS animation, or Web Animations API</li>
+ <li>the duration of the animation</li>
+ <li>the animation's start and end delay</li>
+ <li>the animation's easing (or timing function).</li>
+ <li>the animation's fill</li>
+ <li>the Playback rate of the animation</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16355/animation_details.png" style="border: 1px solid black; display: block; height: 313px; margin-left: auto; margin-right: auto; width: 549px;"></p>
+
+<h3 id="Information_about_the_animated_element">Information about the animated element</h3>
+
+<p>To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.</p>
+
+<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). Clicking this icon locks the highlighter on the element.</p>
+
+<h3 id="Animation_details">Animation details</h3>
+
+<p>If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for <code>img#icon</code>'s animation:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16356/animation_icon_details.png" style="border: 1px solid black; display: block; height: 313px; margin-left: auto; margin-right: auto; width: 549px;"></p>
+
+<p>This is telling us that two properties were modified: <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. <code>filter</code> was given a value at 250ms and <code>transform</code> at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16357/animation_icon_scale.png" style="border: 1px solid black; display: block; height: 313px; margin-left: auto; margin-right: auto; width: 549px;"></p>
+
+<p>This is essentially a visual representation of the animation's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API#JavaScript_Content">keyframes</a>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> iconKeyframeSet <span class="operator token">=</span> <span class="punctuation token">[</span>
+  <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1)'</span><span class="punctuation token">,</span>   filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)'                </span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span>                          filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)'</span><span class="punctuation token">,</span> offset<span class="punctuation token">:</span> <span class="number token">0.333</span><span class="punctuation token"> }</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span>                            offset<span class="punctuation token">:</span> <span class="number token">0.666</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(0%)'</span><span class="punctuation token">                  }</span>
+<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Application_to_the_example">Application to the example</h3>
+
+<p>Applying all this to our example, we can see that:</p>
+
+<ul>
+ <li>The animation involved two elements, <code>span#note</code> and <code>img#icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the browser name "Firefox Developer Edition" and the browser icon.</li>
+ <li>The <code>img#icon</code> animation:
+  <ul>
+   <li>animated the <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> properties, to scale the icon and color it</li>
+   <li><span style="display: none;"> </span><span style="display: none;"> </span> lasted 750ms, had an <code>endDelay</code> of 100ms</li>
+   <li>used the compositor thread</li>
+   <li>was given an <code><a href="/en-US/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> value of <code>ease-in</code>: you can see this by the concave shape of the green bar.</li>
+  </ul>
+ </li>
+ <li><span style="display: none;"> </span><span style="display: none;"> </span>The <code>span#note</code> animation:
+  <ul>
+   <li>animated the <code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> properties, to make the name gradually appear</li>
+   <li>lasted 500ms, and had a <code>delay</code> of 150ms</li>
+   <li>was given an <code><a href="/en-US/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> value of <code>ease-out</code>: you can see this by the convex shape of the green bar.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Animation_playback">Animation playback</h3>
+
+<p>At the top of the animation inspector:</p>
+
+<ul>
+ <li>there are buttons to play/pause and restart the animation</li>
+ <li>there's a dropdown to change the animation playback rate</li>
+ <li>the current time in the animation is displayed.</li>
+</ul>
+
+<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when.</p>
+
+<h3 id="Further_information_about_animation_compositing">Further information about animation compositing</h3>
+
+<p>In Firefox 49 and above, the information exposed by the Animation Inspector about animation performance/compositing has been improved. We've created a couple of examples to demonstrate this. If you open up <a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing.html">animation-inspector-compositing.html</a> and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:</p>
+
+<ul>
+ <li>The white lightning bolt icon now indicates whether all the animation properties have been optimized by running them through the compositor, where possible.</li>
+ <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "All animation properties are optimized."</li>
+ <li>The expanded animation information now includes a lightning bolt icon next to the properties whose animation has been optimized via the compositor.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16359/animation_swoosh_01.png" style="border: 1px solid black; display: block; height: 313px; margin: 0px auto; width: 549px;"></p>
+
+<p>Let's now look at <a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing-silly.html">animation-inspector-compositing-silly.html</a> — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the <code>transform</code> property is deliberately not handed over to the compositor to handle. The Animation Inspector will rather helpfully tell you this in Firefox 49+ — look at it now and you'll see that:</p>
+
+<ul>
+ <li>The white lightning bolt icon in the bar has been replaced with a grey lightning bolt icon, to indicate that only some of the relevant properties are being optimized by the compositor.</li>
+ <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "Some animation properties are optimized."</li>
+ <li>Properties whose animation is <strong>not</strong> being optimized, but could be if you improved your code, are now given a dotted underline — see transform in the screenshot below. Hovering over this gives you a tooltip that explains why. In this case, the message is "Animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time."</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16360/animation_not_optimized.png" style="border: 1px solid black; display: block; height: 375px; margin: 0px auto; width: 549px;"></p>
+
+<h2 id="Edit_keyframes">Edit @keyframes</h2>
+
+<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p>
+
+<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p>
+
+<h2 id="Edit_timing_functions">Edit timing functions</h2>
+
+<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p>
+
+<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p>
+
+<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p>
+
+<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p>
+
+<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p>
+
+<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p>
+
+<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific, sans-serif, Tahoma, Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 149px; top: 308px; opacity: 0.85;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="翻译所选文本"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="朗读"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="复制到剪贴板"> </div>
+</div>
diff --git a/files/zh-cn/tools/page_inspector/index.html b/files/zh-cn/tools/page_inspector/index.html
new file mode 100644
index 0000000000..2bdaa30074
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/index.html
@@ -0,0 +1,55 @@
+---
+title: 页面查看器
+slug: Tools/Page_Inspector
+translation_of: Tools/Page_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>使用页面查看器来查看和修改页面的HTML和CSS。</p>
+
+<p>您可以查看Firefox加载到本地的页面副本或在Firefox OS设备、Android版Firefox上的远端实例。查看<a href="/zh-CN/docs/Tools/Remote_Debugging">远程调试</a>学习如何使用开发者工具连接到远端Firefox实例。Firefox等远程目标操作系统Android设备或Firefox。</p>
+
+<hr>
+<h2 id="用户界面导览">用户界面导览</h2>
+
+<p>为了对查看器有大概的了解，这里准备了一个<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour">UI的快速导览</a>。</p>
+
+<p>Firefox 62以上的版本应许用户把规则视图分成自己的版面。这被称为<a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">三版面模式</a>。</p>
+
+<hr>
+<h2 id="用法">用法</h2>
+
+<p>查看器能做什么，请看以下指南：</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">打开查看器</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">查看和编辑HTML</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">检查和编辑盒模型</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">查看并选择颜色</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/View_fonts">查看字体</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Visualize_transforms">可视化转换</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">使用查看器 API</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Select_an_element">选择一个元素</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">查看和编辑CSS</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">查看事件监听器</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Work_with_animations">处理动画</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit CSS shapes</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/View_background_images">查看背景图片</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">从 Web 控制台使用查看器</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">检查Flexbox布局</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="参考">参考</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector/Keyboard_shortcuts">快捷键</a></li>
+ <li><a href="/zh-CN/docs/Tools/Tools_Toolbox#Inspector">设置</a></li>
+</ul>
+</div>
diff --git a/files/zh-cn/tools/page_inspector/keyboard_shortcuts/index.html b/files/zh-cn/tools/page_inspector/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..2b9c2d2ed2
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/keyboard_shortcuts/index.html
@@ -0,0 +1,12 @@
+---
+title: 键盘快捷键
+slug: Tools/Page_Inspector/Keyboard_shortcuts
+translation_of: Tools/Page_Inspector/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>
+
+<h3 id="通用快捷键">通用快捷键</h3>
+
+<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/zh-cn/tools/page_inspector/ui_tour/index.html b/files/zh-cn/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..be7ac2b66b
--- /dev/null
+++ b/files/zh-cn/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,98 @@
+---
+title: UI 导览
+slug: Tools/Page_Inspector/UI_Tour
+translation_of: Tools/Page_Inspector/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>这篇文章是一个页面查看器用户界面主要部分的快速导览。</p>
+
+<p>查看器的 UI 包含了三个顶级组件：</p>
+
+<ul>
+ <li>“选择元素”按钮</li>
+ <li>HTML面板</li>
+ <li>CSS面板</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10029/inspector-ui.png" style="display: block; margin-left: auto; margin-right: auto; width: 918px;">本指南尽量保持简洁。并提供了各种如何使用查看器细节指导的链接。</p>
+
+<h2 id="选择元素按钮">选择元素按钮</h2>
+
+<p>查看器可以给你关于当前选择元素的详细信息，选择元素按钮是你可以选择一个元素进行检查的方式：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10031/select-button.png" style="display: block; height: 640px; margin-left: auto; margin-right: auto; width: 1674px;"></p>
+
+<p>注意：该按钮实际上是<a href="/zh-CN/docs/Tools/Tools_Toolbox#Toolbar">工具箱工具栏</a>上的一部分，所以你可以马上从任何工具切换到选择模式，不仅仅是查看器。</p>
+
+<p>了解如何选择一个元素，查看指南——<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Select_an_element">选择一个元素</a>。</p>
+
+<h2 id="HTML_面板">HTML 面板</h2>
+
+<p>查看器被分成两半，左边的一半就是HTML面板：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10033/html-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;"></p>
+
+<p>想要了解更多关于HTML面板的结构，查看指南——<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">检查和编辑HTML</a>。</p>
+
+<h2 id="CSS_面板">CSS 面板</h2>
+
+<p>占据查看器右边就是CSS面板：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10035/css-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;">CSS面板分为5个视图：</p>
+
+<ul>
+ <li>规则视图</li>
+ <li>计算后视图</li>
+ <li>字体视图</li>
+ <li>盒模型</li>
+ <li>动画视图</li>
+</ul>
+
+<p>使用顶部的选项卡在不同视图之间切换。</p>
+
+<h3 id="规则视图">规则视图</h3>
+
+<p>规则视图列出了适用于所选元素的所有规则，规则排列有低级到高级：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10017/css-rules.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">查看和编辑CSS</a> 的更多细节。</p>
+
+<h3 id="计算后视图">计算后视图</h3>
+
+<p>计算后视图显示你所选元素的完整计算CSS。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10013/css-computed.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">查看和编辑CSS</a> 的更多细节。</p>
+
+<h3 id="字体视图">字体视图</h3>
+
+<p>字体视图显示页面中的所有字体。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/View_fonts">字体视图</a> 的更多细节。</p>
+
+<h3 id="盒模型视图">盒模型视图</h3>
+
+<p>盒模型视图提供了一个所选元素的盒模型的可编辑视图。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10011/css-box-model.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">查看和编辑盒模型</a> 的更多细节。</p>
+
+<h3 id="动画视图">动画视图</h3>
+
+<p>动画视图显示所选动画元素的细节和一个暂停控制器：</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10009/css-animations.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Work_with_animations">处理动画</a> 的更多细节。</p>
+
+<h3 id="显示隐藏_CSS_面板">显示/隐藏 CSS 面板</h3>
+
+<p>从Firefox 40起，在工具栏增加了一个按钮，您可以使用用它来控制显示或隐藏CSS窗格：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10817/inspector-show-hide.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 739px;"></p>