initial commit

75 files changed, 8320 insertions, 0 deletions

diff --git a/files/zh-cn/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html b/files/zh-cn/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html
new file mode 100644
index 0000000000..fb6d8237d9
--- /dev/null
+++ b/files/zh-cn/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html
@@ -0,0 +1,211 @@
+---
+title: 'about:debugging (before Firefox 68)'
+slug: 'Tools/about:debugging/about:debugging_before_Firefox_68'
+translation_of: 'Tools/about:debugging/about:debugging_before_Firefox_68'
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.</p>
+
+<h2 id="Opening_the_aboutdebugging_page">Opening the about:debugging page</h2>
+
+<p>There are several different ways to open about:debugging:</p>
+
+<ul>
+	<li>Type "about:debugging" in the Firefox URL bar.</li>
+	<li><em>I</em>n the Tools &gt; Web Developer menu, click "Service Workers".</li>
+	<li>Select the Web Developer menu under the Hamburger menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), then select "Service Workers".</li>
+</ul>
+
+<p>When about:debugging opens, on the left-hand side, you'll see a sidebar enabling you to switch between the two main views: one for add-ons and one for workers.</p>
+
+<p>Whether or not system add-ons appear in the list on this page depends on the setting of the <code>devtools.aboutdebugging.showSystemAddons</code> preference. If you need to see system add-ons, navigate to <code>about:config</code> and make sure that this value is set to <code>true</code>.</p>
+
+<h2 id="Add-ons">Add-ons</h2>
+
+<div class="note">
+<p>The Add-ons section in about:debugging only supports restartless add-ons, including <a href="/en-US/Add-ons/Bootstrapped_extensions">basic bootstrapped extensions</a>, <a href="/en-US/Add-ons/SDK">Add-on SDK add-ons</a>, and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</p>
+</div>
+
+<p>This page enables you to do two things:</p>
+
+<ul>
+	<li>Load an add-on temporarily from disk</li>
+	<li>Connect the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a> to any restartless add-ons</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15009/debugger-revised.png" style="display: block; height: 612px; margin-left: auto; margin-right: auto; width: 700px;"></p>
+
+<h3 id="Connecting_the_Add-on_Debugger">Connecting the Add-on Debugger</h3>
+
+<div class="note">
+<p>Note that at the moment, it's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p>
+</div>
+
+<p>The Add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your Firefox). Next to each entry is a button labeled "Debug".</p>
+
+<p>If the "Debug" button is disabled, check the "Enable add-on debugging" box.</p>
+
+<p>If you click "Debug", you'll see a dialog asking you to accept an incoming connection. Click "OK", and the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a separate window. Note that sometimes the debugger window is hidden by the main Firefox window.</p>
+
+<p>{{EmbedYouTube("tGGcA3bT3VA")}}</p>
+
+<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p>
+
+<div class="note">
+<p><a id="Enabling_add-on_debugging" name="Enabling_add-on_debugging">The "Enable add-on debugging" button</a> works by turning on the <code>devtools.chrome.enabled</code> and <code>devtools.debugger.remote-enabled</code> preferences. Both preferences must be true to enable add-on debugging. Checking the box sets both preferences to <code>true</code>, and unchecking it sets them both to <code>false</code>.</p>
+
+<p>You can also modify the preferences directly in about:config, or by checking "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p>
+</div>
+
+<h3 id="Loading_a_temporary_add-on">Loading a temporary add-on</h3>
+
+<p>With the "Load Temporary Add-on" button you can load any sort of restartless add-on temporarily, from a directory on disk. Just click the button, navigate to the directory containing the add-on's file, and select any file in that directory. The temporary add-on will be displayed under the "Temporary Extensions" header.</p>
+
+<p>You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox.</p>
+
+<p>{{EmbedYouTube("sAM78GU4P34")}}</p>
+
+<p>The big advantages of this method, compared with installing an add-on from an XPI, are:</p>
+
+<ul>
+	<li>you don't have to rebuild an XPI and reinstall when you change the add-on's code</li>
+	<li>you can load an add-on without signing it and without needing to disable signing.</li>
+</ul>
+
+<h3 id="Updating_a_temporary_add-on">Updating a temporary add-on</h3>
+
+<p>If you install the add-on in this way, what happens when you update the add-on's files?</p>
+
+<h4 id="Before_Firefox_48">Before Firefox 48</h4>
+
+<ul>
+	<li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li>
+	<li>If you change files that stay loaded the whole time, like <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a>, then you can pick up changes you've made by disabling and then re-enabling the add-on in the about:addons page.</li>
+	<li>If you change files that are only parsed at install time, like the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file, you'll need to restart Firefox, then load the add-on again.</li>
+</ul>
+
+<div class="note">
+<p>Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox <em>does not work</em>.</p>
+</div>
+
+<h4 id="Firefox_48_onwards">Firefox 48 onwards</h4>
+
+<ul>
+</ul>
+
+<p>From Firefox 48 onwards:</p>
+
+<ul>
+	<li>as before: if you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li>
+	<li>there's a better way to handle the other cases: click the "Reload" button next to the "Debug" button. This does what it says:
+	<ul>
+		<li>reloading any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li>
+		<li>parsing the manifest.json file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys will take effect.</li>
+	</ul>
+	</li>
+</ul>
+
+<div class="note">
+<p>Note that in Firefox 49 onwards, the Reload button is only enabled for temporary add-ons. It will be disabled for all other add-ons.</p>
+</div>
+
+<h2 id="Tabs">Tabs</h2>
+
+<p>In Firefox 49 onwards, a Tabs page is available in <code>about:debugging</code> — this provides a complete list of all the debuggable tabs open in the current Firefox instance.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13617/about-debugging-tabs.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p>
+
+<p>Each tab entry has a <em>Debug</em> button next to it — when clicked, this will open up a toolbox specific to that tab, allowing you to debug that tab's contents.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13619/about-debugging-tabs-toolbox.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p>
+
+<div class="note">
+<p>Note that this feature isn't that immediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when <code>about:debugging</code> starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device browsers, simulators, etc. See {{bug(1212802)}} for the latest on this work.</p>
+</div>
+
+<h2 id="Workers">Workers</h2>
+
+<p>The Workers page shows your workers, categorised as follows:</p>
+
+<ul>
+	<li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li>
+	<li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li>
+	<li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li>
+</ul>
+
+<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13058/about-debugging-workers.png" style="display: block; height: 642px; margin-left: auto; margin-right: auto; width: 784px;"></p>
+
+<h3 id="Service_worker_state">Service worker state</h3>
+
+<p>From Firefox 52, the list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are distinguished:</p>
+
+<ul>
+	<li><em>"Registering"</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the "installing", "activating", and "waiting" states.</li>
+	<li><em>"Running"</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li>
+	<li><em>"Stopped"</em>: the service worker is installed and activated, but has been terminated after being idle.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14488/service-worker-status.png" style="display: block; height: 555px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<div class="note">
+<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p>
+</div>
+
+<h3 id="Debugging_workers">Debugging workers</h3>
+
+<p>For a service worker, if it is already running, you'll see two buttons next to it, labeled "Debug" and "Push". If it's not already running, you'll see one button, labeled "Start": click this to start the service worker.</p>
+
+<p>Clicking "Debug" connects the JavaScript Debugger and Console to this worker. You can set breakpoints, step through code, watch variables, evaluate code, and so on:</p>
+
+<p>{{EmbedYouTube("Z8ax79sHWDU")}}</p>
+
+<h3 id="Registering_workers">Registering workers</h3>
+
+<p>At first, you won't see any workers listed under <em>Service Workers</em> or <em>Shared Workers</em>. As soon as a worker is registered, the listing is updated:</p>
+
+<p>{{EmbedYouTube("wy4kyWFhFF4")}}</p>
+
+<div class="note">
+<p>Before Firefox 47, service workers were only shown when they were actually running.</p>
+</div>
+
+<h3 id="Unregistering_service_workers">Unregistering service workers</h3>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 48.</p>
+</div>
+
+<p>Starting in Firefox 48, you'll see a link named "unregister" next to each registered service worker:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13056/unregister-sw.png" style="display: block; margin-left: auto; margin-right: auto; width: 700px;"></p>
+
+<p>Click the link to unregister the service worker.</p>
+
+<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3>
+
+<div class="note">
+<p>Sending push events in about:debugging is new in Firefox 47.</p>
+</div>
+
+<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Just click the "Push" button to send a push event to the service worker:</p>
+
+<p>{{EmbedYouTube("62SkLyA-Zno")}}</p>
+
+<h3 id="Service_workers_not_compatible">Service workers not compatible</h3>
+
+<div>
+<p>In Firefox 49+, a warning message will be displayed in the Service Workers section of the Workers page if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13613/sw-not-compatible.png" style="display: block; height: 705px; margin: 0px auto; width: 1011px;"></p>
+</div>
+
+<p>Service workers can be unavailable for several reasons:</p>
+
+<ul>
+	<li>If you are using a Private Browsing window.</li>
+	<li>If your History preference is set to "Never Remember History" or "Always use private browsing mode".</li>
+	<li>If the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</li>
+</ul>
diff --git a/files/zh-cn/tools/about_colon_debugging/index.html b/files/zh-cn/tools/about_colon_debugging/index.html
new file mode 100644
index 0000000000..a5a46ba13c
--- /dev/null
+++ b/files/zh-cn/tools/about_colon_debugging/index.html
@@ -0,0 +1,218 @@
+---
+title: 'about:debugging'
+slug: 'Tools/about:debugging'
+tags:
+  - 调试器
+  - 远程调试
+translation_of: 'Tools/about:debugging'
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="blockIndicator warning">
+<p>如果你想在Firefox 68之前的版本中找到关于调试 页面(about:debugging) 的信息，请查看: <a href="/en-US/docs/Tools/about:debugging/about:debugging_before_Firefox_68">about:debugging (before Firefox 68)</a> 。 此文档适用于 Firefox 68 和之后的版本</p>
+</div>
+
+<p>声明：调试页面提供了空位，您可以将Firefox开发者工具附加到一些调试目标上。目前它支持目标三大类：无需重启的附加组件，选项卡，和workers。</p>
+
+<h2 id="打开调试页面">打开调试页面</h2>
+
+<p>有2种方式打开调试：</p>
+
+<ul>
+ <li> 在firefox地址栏输入 "about:debugging"。</li>
+ <li><em>点击右上角菜单栏按钮，选择Web开发者，点击远程调试</em>。</li>
+</ul>
+
+<p>当调试页面打开时，在页面的左边，你会看到一个侧边栏，在其中有2个选项关于远程调试的设置。</p>
+
+<dl>
+ <dt>设置</dt>
+ <dd>在设置选项配置以连接你的远程设备。</dd>
+ <dt>此火狐</dt>
+ <dd>包含你导入的临时扩展；已经安装在Firefox上的扩展；打开的选项卡；正在运行的service workers</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p>
+
+<h2 id="设置">设置</h2>
+
+<h3 id="连接到远程设备">连接到远程设备</h3>
+
+<p>Firefox 支持通过USB调试安卓设备。</p>
+
+<p>在连接之前：</p>
+
+<ol>
+ <li>在你的安卓设备上启用开发者选项。</li>
+ <li>在开发者选项中启用USB调试。</li>
+ <li>在安卓设备的 Firefox 中启用 USB 调试。</li>
+ <li>使用USB连接线将安卓设备连接到你的电脑。</li>
+</ol>
+
+<p>如果调试页面的左侧没有显示你的设备，尝试点击“刷新设备”按钮。 如果你确认是按照以上步骤来连接但还是没有显示，看看 <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_over_USB">故障排除</a>。</p>
+
+<p>要开始一个调试会话，首先打开你想要调试的页面并点击连接以打开连接你的设备。如果连接成功，你就可以点击你的设备名称，查看你设备上打开的选项卡信息。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>这些选项卡详情和此火狐选项的详情类似，不同的是此火狐的选项显示的是你的电脑上面的信息，而这些选项卡显示的是你的远程设备中的。</p>
+
+<p>注意：如果你的远程设备中的Firefox版本比你的电脑中的版本老，你会收到如下警告信息：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p>
+
+<p>在以上图片中，有三个打开的选项卡： <strong>Network or cache Recipe</strong>， <strong>Nightly Home</strong> 和 <strong>About Nightly</strong>。要调试这三个选项卡的内容，点击它上面的" Inspect"，点击之后，会打开一个有开发者工具的新选项卡。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16916/remote_debugger.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>在以上工具列表中，你可以看见连接的设备信息。包含你是通过USB连接到 Moto G(5) 上面的 Mozilla Firefox Nightly ，你正在调试的页面，和页面地址。</p>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<h2 id="此火狐">此火狐</h2>
+
+<p>此火狐选项结合了扩展的特征，选项卡，Workers 被分为以下几个部分：</p>
+
+<dl>
+ <dt>临时扩展</dt>
+ <dd>显示你载入的临时扩展。</dd>
+ <dt>扩展</dt>
+ <dd>此部分显示你已经安装在Firefox上面的扩展。</dd>
+ <dt>Service Workers, Shared Workers, 和其他 Workers</dt>
+ <dd>此页面有三项，包含处理 Service Workers, Shared Workers,和其他 Workers。</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p>
+
+<p>内部扩展是否显示在这里取决于 <code>devtools.aboutdebugging.showHiddenAddons</code> 设置。 如果你需要显示这些扩展， 在地址栏输入 <code>about:config</code> 找到以上设置并将值设为 <code>true</code>。</p>
+
+<h2 id="扩展">扩展</h2>
+
+<h3 id="导入一个临时扩展">导入一个临时扩展</h3>
+
+<p>通过“载入临时附加组件...”按钮可以导入你本地磁盘上的附加组件。 点击按钮， 找到附加组件所在的目录并选择里面的manifest文件，完成之后将会显示在“临时扩展”选项下面。</p>
+
+<p>你不必打包或者签名扩展，它会一直安装在上面，直到你重启Firefox。</p>
+
+<p>这方法对比从XPI上面安装附加组件有一个很大的优势：</p>
+
+<ul>
+ <li>当你修改了附加组建的代码时，不必重建XPI并且重新安装。</li>
+ <li>你可以到导入一个不需要签名和不必禁用签名的附加组件。</li>
+</ul>
+
+<p>一旦你导入临时扩展，你可以看到它的以下信息:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p>
+
+<dl>
+ <dt>检查</dt>
+ <dd>在调试器中导入扩展。</dd>
+ <dt>重载</dt>
+ <dd>重新载入扩展。这功能很方便当你修改了扩展的时候。</dd>
+ <dt>移除</dt>
+ <dd>移除临时扩展。</dd>
+</dl>
+
+<p>扩展的其他信息也包含：</p>
+
+<dl>
+ <dt>位置</dt>
+ <dd>你本地系统的扩展源码的所在位置</dd>
+ <dt>扩展 ID</dt>
+ <dd>分配给扩展的临时签名。</dd>
+ <dt>内部 UUID</dt>
+ <dd>分配给扩展的内部UUID。</dd>
+ <dt>Manifest URL</dt>
+ <dd>点击链接，扩展加载的 manifest 将在新选项卡打开。</dd>
+</dl>
+
+<h3 id="更新临时扩展">更新临时扩展</h3>
+
+<p>如果你用这个方法安装了一个临时扩展，当你更新扩展的时候会发生什么?</p>
+
+<ul>
+ <li>当你更改那些按需加载的文件，比如<a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Guides/Content_Scripts">内容脚本</a>或者<a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">弹出窗口</a>，这些更改会被自动识别，并在下次加载内容脚本或者弹出窗口出现的时候显示。</li>
+ <li>对于其他文件的更改，点击移除按钮旁边的重载按钮，它会做以下事情：
+  <ul>
+   <li>重载所有脚本，比如 <a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#后台脚本">后台脚本</a></li>
+   <li>再次解析manifest.json文件，所以更改 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> 或者任何其他key都会生效。</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="已安装的扩展">已安装的扩展</h3>
+
+<p>已经安装的扩展在下面的扩展列表选项下面，每个扩展你都会看到如下信息：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p>
+
+<p>就像加载过的临时扩展一样， Manifest URL 旁边的链接将在新选项卡打开加载的 manifest 。</p>
+
+<div class="note">
+<p><strong>注意： </strong>推荐使用浏览器工具箱而不是附加组件调试Web扩展。详见 <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> 。</p>
+</div>
+
+<p>调试页面的附件组件部分列出了当前安装的所有web 扩展。旁边的 <strong>查看</strong> 按钮可以调试扩展。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong>这个列表里面可能包含 Firefox自带的附加组件。</p>
+</div>
+
+<p>如果你点击 <strong>查看</strong>， <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">附加组件调试器</a> 会打开一个新选项卡。</p>
+
+<p>{{EmbedYouTube("efCpDNuNg_c")}}</p>
+
+<p>到 <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">附加组件调试器</a> 页面查看更多信息</p>
+
+<h2 id="Workers">Workers</h2>
+
+<p>Workers 页面显示你的 workers，有如下分类：</p>
+
+<ul>
+ <li>所有已经注册的 <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li>
+ <li>所有已经注册的 <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li>
+ <li>其他 workers，包含 <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> 和 <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li>
+</ul>
+
+<p>你可连接开发者工具到每个worker，并且发送通知给 service workers。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p>
+
+<h3 id="Service_worker_状态">Service worker 状态</h3>
+
+<p>service workers 列表显示了每个service worker 的 <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">生命周期</a> 状态， 有三种可能的状态：</p>
+
+<ul>
+ <li><em>“注册中”</em>： 涵盖了service worker到初始注册之间的所有状态，包含“安装中”，“激活中”，“等待中” 。</li>
+ <li><em>“运行中”：</em> 当前正在运行的service worker，已经安装，激活，并且正在处理事件。</li>
+ <li><em>“已停止”：</em> service worker 已经安装激活，但是空闲之后被终止。</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p>
+
+<div class="note">
+<p>这部分使用了一个简单的演示： <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p>
+</div>
+
+<h3 id="注销_service_workers">注销 service workers</h3>
+
+<p>取消注册按钮 允许你“注销” service worker:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="向_service_workers_推送事件">向 service workers 推送事件</h3>
+
+<p>要调试推送通知，你可以在 <a href="/en-US/docs/Web/API/PushEvent">push event</a> 监听器中设置一个断点。但是，你也可以调试本地推送通知而不需要服务器，点击推送按钮向service worker发送推送事件。</p>
+
+<h3 id="不兼容Service_workers">不兼容Service workers</h3>
+
+<div>
+<p>如果浏览器配置不兼容service workers，在此火狐选项页的顶部会显示一个警告信息。此时service worker将不可用或者被调试。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p>
+</div>
+
+<p>如果 <code>about:config</code> 里面的 <code>dom.serviceWorkers.enable</code> 设置成 false 那么Service workers 将不可用。</p>
+</div>
+</article>
diff --git a/files/zh-cn/tools/accessibility_inspector/index.html b/files/zh-cn/tools/accessibility_inspector/index.html
new file mode 100644
index 0000000000..da7ad58caf
--- /dev/null
+++ b/files/zh-cn/tools/accessibility_inspector/index.html
@@ -0,0 +1,161 @@
+---
+title: Accessibility Inspector
+slug: Tools/Accessibility_inspector
+translation_of: Tools/Accessibility_inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">可访问性查看器提供了一种访问重要信息的方法，在当前页通过可访问性树的辅助技术可以使重要信息显示出来，从而允许你去检查丢失的或者需要注意的信息。本文将带你了解可访问性查看器的主要特征和如何使用。</p>
+
+<p align="left"><strong>关于可访问性</strong><strong>的简短说明</strong></p>
+
+<p align="left">可访问性就是让你的网站能够尽可能为越来越多的人可用的做法，这意味着需要竭尽全力不要将任何访问信息的人挡在门外，仅仅因为他们可能有某些方面的残疾或者因为某些个人情况例如他们正在使用的设备、他们的网速、或者他们所处的地理位置或场所。</p>
+
+<p align="left">在这里我们主要讨论向有视觉障碍者展示信息-这个过程需要通过网页浏览器内部可用的<a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">accessibility APIs</a>来完成，这些<a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">API</a>展示了页面上不同元素扮演什么角色的信息。（例如：它们是纯文本或者按钮、链接、表单元素等等？）</p>
+
+<p>默认情况下，暗示它们用途的语义文档对象模型元素被分配了角色。有时候，你需要利用一些非语义的标识（例如 {{htmlelement("div")}}s）来创建一个复杂的自定义控件，可是该控件不具备反映用途的默认角色。在这种情况下，你就可以使用<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a><u>的</u>角色属性来提供自己的角色。</p>
+
+<p>通过浏览器<a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">accessibility APIs</a>展示出的角色和其他信息以被称为可访问性树的分层结构呈现。这个就有点像文档对象模型树，只不过它承载了数量更有限的元素和与它略微不同的信息。</p>
+
+<p>辅助技术就像屏幕阅读器，用它的信息去发现一个网页上有什么，告诉它们的用户那里有什么，然后让用户能够和网页发生交互作用。可访问性查看器同样的运用它的信息在开发者工具中提供有价值的调试排障功能。</p>
+
+<p> <strong>走近可访问性查看器</strong></p>
+
+<p>可访问性查看器（自火狐浏览器61版本起可用）在DevTools里不是默认显示的。要打开它，你需要去开发者工具设置里（按<kbd>F1</kbd>键，或者去“三点”菜单并选择设置）然后选中the <em>Default Developer Tools</em>heading下的可访问性查看器复选框。这样呢，可访问性查看器选项卡就会出现在主开发者工具显示中，单击就可以显示可访问性查看器的控制面板了：</p>
+
+<p><img alt="Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features" src="https://mdn.mozillademos.org/files/16021/accessibility-inspector-panel-off.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>
+
+<p>最初呢，它的性能是被关闭的（除非你已经在另一个浏览器选项卡将其打开，或者你如果是一个屏幕阅读器用户或者测试者，已经提前打开了火狐可访问性引擎）。这是因为可访问性功能被打开了之后，可访问性功能引擎就会在后台运行了。当引擎正在运行的时候，它会降低性能，占用内存；因此，会干扰其他面板的权值，例如内存和性能，同样也会影响到整个浏览器的性能。正因如此，最好在你不是特别需要使用它的时候关掉它。</p>
+
+<p>你可以利用打开<em>可访问性</em>功能按键来启用它。面板内容加载后，你可以在左上角利用关闭<em>可访问性</em>功能按键再次关掉它，除非你已经提前通过可访问性功能引擎运行来操作了一个屏幕阅读器，这样的话那个功能按钮便会被禁用。</p>
+
+<p>注：如果你在多个选项卡里运用可访问性的功能，那么关掉一个选项卡里的功能按键则会关掉所有选项卡里的所有功能按键。</p>
+
+<h2 id="可访问性功能面板的特征"><strong>可访问性功能面板的特征</strong></h2>
+
+<p>已启用的可访问性控制面板是这样的：</p>
+
+<p><img alt="Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features" src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>
+
+<p>在左手边，有一个树形图，代表当前页可访问性树中的所有项。 具有嵌套子项的项都带有箭头，通过点击可以显示子项，这样你就可以进入更深的层级结构。每一个项包含下面列出来的两个属性：</p>
+
+<ul>
+ <li>
+  <p align="left"><em>角色</em>—项目在页面上的角色（例如 pushbutton或者 footer）要么是浏览器提供的一个默认角色，要么就是通过WAI-ARIA分配的一个角色。</p>
+ </li>
+ <li>
+  <p align="left">名称—这个项在页面上的名称。名称从哪里来由元素决定，例如：绝大多数文本的元素名称就是它们的文本内容，然而表单元素的名称却是与它们相关联的{{htmlelement("label")}}。</p>
+ </li>
+</ul>
+
+<p>在右手边，你可以就当前选择的项看到更多的信息。列出的属性如下：</p>
+
+<ul>
+ <li><em>名称</em>—项的名称，如上所述。</li>
+ <li>
+  <p align="left"><em>角色</em>—项的角色，如上所述。</p>
+ </li>
+ <li>
+  <p align="left"><em>操作</em>一可以对项目执行的操作列表，例如，一个按钮会列出“Press”，而一个链接会列出“Jump”。</p>
+ </li>
+ <li><em>值</em>一项的值，项的种类意味着它的值可以是不同的东西。例如：一个表单的输入（角色：输入）的值可以是你所输入的任何东西，而一个链接的值将是相应的&lt;a&gt; 元素里的URL。</li>
+ <li><em>DOM节点</em>—项在可访问性树里所代表的文档对象模型节点的类型。你可以通过点击在后面出现的"target"图标以在页面检查器里选择节点。当你把鼠标悬停在"target"图标上的时候，页面内容里的节点就会凸显。</li>
+ <li>
+  <p align="left"><em>描述</em>一元素上任何进一步的描述都是由一个标题属性的内容提供。</p>
+ </li>
+ <li>
+  <p align="left"><em>帮助</em>一它不是在Gecko中执行的，所以它通常返回一个空字符串。它将会从Firefox 62版本的查看器中移除 ({{bug(1467643)}})。</p>
+ </li>
+ <li>任何可用于激活元素的键盘快捷键，在快捷键属性中已指定。需要知悉的是它仅在Firefox 62之后版本中起作用 ({{bug("1467381")}})</li>
+ <li>
+  <p align="left">子项计算一当前项在可访问性树层级所有的子项数量。</p>
+ </li>
+ <li>项中指数一 一个位于父项中指示子项数量的指数值。如果该项是其父项中的第一项，则其值为0，如果是第二项，则其值为1，依此类推。</li>
+ <li>状态一 可以用于当前项与不同可访问性相关的状态列表。例如，一个演示中的一条链接有可聚焦的、关联的、可选择文本、不透明，激活的和敏感的状态。有关内部状态完整的列表，请参见<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a></li>
+ <li>属性一应用于项上面的与所有可访问性相关的属性列表。它包含了设计式样相关的属性例如页边距和文本缩进，和对可访问性信息的有用状态，例如draggable和level（在有标题的情况下，标题的级别是什么。）有关可能属性完整的列表，请参见<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a>。</li>
+</ul>
+
+<div class="note">
+<p>注：所有平台上的公开信息都是一样的-查看器显示Gecko 可访问性树而不是来自可访问性的平台层信息</p>
+</div>
+
+<h3 id="键盘控制">键盘控制</h3>
+
+<p>可访问选项卡是完全可以通过键盘访问的：</p>
+
+<ul>
+ <li>你可以在“关闭可访问性功能按钮”和左侧右侧面板之间进行切换。</li>
+ <li>
+  <p align="left">当焦点放在其中一个面板时，你可以使用上下箭头来上下移动焦点，并使用向左向右箭头来展开和折叠可拓展行。（可访问性树的不同层次结构级别）</p>
+ </li>
+</ul>
+
+<h2 id="值得注意的相关功能">值得注意的相关功能</h2>
+
+<p>当可访问性功能被打开的时候，开发者工具中提供了许多有用的附加功能，具体如下：</p>
+
+<p align="left">上下文菜单选择项</p>
+
+<p>对于网页上一般的上下文菜单，当你按下右键/Ctrl键点击一条UI特性的时候，便会增加一个额外的上下文菜单选项；对于页面检查器上的HTML面板，当右/Ctrl +单击一个DOM元素时，便会增加一个额外的上下文菜单选项。</p>
+
+<p><img alt="context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;"></p>
+
+<p><img alt="context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p>
+
+<p>当你选择“检查可访问性属性/显示可访问性属性上下文菜单选项”时，<em>可访问性</em><em>选项卡</em>将会立即打开来展示相关的访问树项和它的属性。</p>
+
+<div class="note">
+<p align="left">注：一些文档模型元素并没有可访问性性属性，在这种情况下，“检查可访问性性属性/显示可访问性性属性上下文菜单选”将会显示为灰色。</p>
+</div>
+
+<h3 id="UI项突出">UI项突出</h3>
+
+<p>在无障碍选项卡中，当鼠标停留在可访问性项上，如果适用的话，你可以看见一个半透明的高光出现在它们相关的UI项上。该项的角色和名称将会在一个小的信息栏里显示出来。这对于在实际页面中测定可访问性树的项和UI项的关联方式是非常有用的。</p>
+
+<p>在下述例子中，你可以看到图像已被突出显示出来了，然后它的角色、图像、名称，“Road, Asphalt, Sky, Clouds, Fall”，以及色彩对比度3.46等信息都在上面的信息栏中显示出来了。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16302/image_accessibility.png" style="border: 1px solid black; display: block; height: 347px; margin: 0px auto; width: 451px;"></p>
+
+<h4 id="色彩对比度">色彩对比度</h4>
+
+<p>当你为网页设计调色板的时候，对比度信息就会非常的有用。原因是如果色彩对比不足的话，有视觉障碍的读者例如患有色盲症的人将无法阅读文章。对于网页上较小文本，WCAG2.0版本将4.5:1的比例定义为前景色和背景色之间建议的最小的色彩对比度。</p>
+
+<p>                                <img alt="" src="https://mdn.mozillademos.org/files/16305/text_contrast_2.png"></p>
+
+<p>在上图中色彩对比度是2.77，可能就不足以使其轻松阅读。请注意，旁边的感叹号就暗示了该对比度无法满足可接受的对比度，请参照下例来比较</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16304/text_contrast_1.png" style="display: block; height: 64px; margin: 0 auto; width: 336px;"></p>
+
+<p>在这个例子中，色彩对比度是12.63，这个时候这个值后面紧跟了AAA和一个绿色的√，它表明这个文本的色彩对比度是7:1或者更高，意思是它满足增强对比度标准或者AAA级别的标准。</p>
+
+<h3 id="可访问性选择器">可访问性选择器</h3>
+
+<p>与页面检查器HTML窗格选择器相似，当可访问性选项卡上的选择器按钮按下的时候，你可以在当前页让鼠标悬停，选择UI项，然后便可以在可访问性树里边突出显示相应的可访问对象。可访问性选项卡选择器会与页面检查器HTML窗格选择器略微不同，请参见下图：</p>
+
+<p><img alt="highlighted dom inspector picker button, with a tooltip saying Pick an element from the page" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p>
+
+<p><img alt="highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;"></p>
+
+<p>当你执行一个选择的时候，你可以看见可访问性对象会在可访问性树中突出显示，然后选择器就会失效，请注意 但是如果你按下SHIFT按键当执行一个选择的时候，你可以在可访问性树里边预览无障碍访对象（以及在右侧窗格里它的属性），直到释放Shift键之前，你可以随意的多次的进行选择（选择器不会取消）</p>
+
+<p>当选择器被激活的时候，你也可以通过第二次按下选择器按钮或者按下Esc键来取消激活。</p>
+
+<h2 id="典型案例">典型案例</h2>
+
+<p>可访问性查看器对于一目了然地发现可访问性问题非常有用。刚开始的时候，你可以调查没有合适文本等效项—例如没有alttex图像和一个属性名为空没有合适标签的表单元素，例：</p>
+
+<p><img alt="A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
+
+<p>在核查语义的时候它也非常的方便，你可以利用the Inspect Accessibility Properties context菜单来很快地看一个项是否具有正确的角色设置（例：一个按钮是否真的是按钮，或者一个链接是否真的是一个链接）。</p>
+
+<p><img alt="A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility">Accessibility fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Practical debugging information</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding WCAG</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a> by Léonie Watson</li>
+</ul>
diff --git a/files/zh-cn/tools/add-ons/index.html b/files/zh-cn/tools/add-ons/index.html
new file mode 100644
index 0000000000..7c50cee424
--- /dev/null
+++ b/files/zh-cn/tools/add-ons/index.html
@@ -0,0 +1,6 @@
+---
+title: 组件
+slug: Tools/Add-ons
+translation_of: Tools/Add-ons
+---
+<div>{{ToolsSidebar}}</div><p>开发者工具没有内置到Firefox里面，而是作为组件的方式存在。</p>
diff --git a/files/zh-cn/tools/browser_console/index.html b/files/zh-cn/tools/browser_console/index.html
new file mode 100644
index 0000000000..74fe0b0629
--- /dev/null
+++ b/files/zh-cn/tools/browser_console/index.html
@@ -0,0 +1,175 @@
+---
+title: 浏览器控制台
+slug: Tools/Browser_Console
+translation_of: Tools/Browser_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Browser Console （浏览器）控制台类似于<a href="/en-US/docs/Tools/Web_Console">Web控制台</a>，但是其不仅仅作用于某个标签页，更是针对整个浏览器。</p>
+
+<p>因此它会记录与网页控制台相同的日志信息：网络请求，JavaScript脚本，CSS样式表，安全错误和警告，以及JavaScript代码中显式输出的日志信息。然而，它并非只是输出单个网页的此类信息，而是会记录下所有标签页、附加组件和浏览器自身代码的相关信息。</p>
+
+<p>在附加组件或者浏览器代码的常用Web<a href="/en-US/docs/Tools/Tools_Toolbox">工具箱</a>中，如果还想使用其他的Web开发者工具，可以尝试一下<a href="/en-US/docs/Tools/Browser_Toolbox">浏览器工具箱</a>。</p>
+
+<p>同样，你也可以在浏览器控制台执行JS表达式。这里的区别是，web控制台在页面窗体作用域中执行代码，而浏览器控制台在浏览器窗体作用域中执行代码。 This means you can interact with all the browser's tabs using the <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> global, and even with the XUL used to specify the browser's user interface.</p>
+
+<div class="geckoVersionNote">
+<p>NB: From Firefox 30, the Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable browser {{Glossary("chrome")}} and add-on debugging toolboxes" (Firefox 40 and later) / "Enable {{Glossary("chrome")}} and add-on debugging" (Firefox 38.0.5 and earlier) option in the <a href="/en-US/docs/Tools_Toolbox#Advanced_settings">developer tool settings</a>.</p>
+</div>
+
+<h2 id="打开浏览器控制台">打开浏览器控制台</h2>
+
+<p>打开浏览器控制台的两种方式:</p>
+
+<ol>
+ <li>激活菜单栏（按Alt），选择 “工具” 的子菜单“Web开发者”的子菜单 “浏览器控制台” (or Tools menu if you display the menu bar or are on OS X)</li>
+ <li>使用快捷键: Windows平台 Ctrl+Shift+J 、MAC平台 Cmd+Shift+J .</li>
+</ol>
+
+<p>注意直到Firefox 38, if the Browser Console has become hidden by a normal Firefox window and you select it again, either from the menu or from the keyboard, then it will be closed. From Firefox 38 onwards, this instead has the effect of switching the focus back to the Browser Console, which is more likely to be what you wanted.</p>
+
+<p>你也可以通过在命令行启动Firefox并传递 <code>-jsconsole</code> 参数来打开浏览器控制台:</p>
+
+<pre class="notranslate">/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>
+
+<p>浏览器控制台如图所示:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>浏览器控制台的外观、行为看起来和 <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web控制台 </a>一样:</p>
+
+<ul>
+ <li>窗口的大部分空间被 <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">一个展示信息的容器</a></li>
+ <li>在顶部有一个<a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">工具条</a>可以帮助你来筛选你想看到的信息</li>
+ <li>最底部是一个<a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">命令行解释器</a>，你可以在这里执行Js表达式</li>
+</ul>
+
+<h2 id="浏览器控制台日志">浏览器控制台日志</h2>
+
+<p>浏览器控制台和Web控制台有着相同的日志记录:</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP请求</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">警告和错误</a> (包括JavaScript, CSS, 安全警告和错误,  JavaScript脚本使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API产生的信息)</li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">输入和输出信息</a>: 命令发送到浏览器通过命令行，然后执行它们.</li>
+</ul>
+
+<p>但是，浏览器控制台能显示如下信息（网页控制台不具备的）:</p>
+
+<ul>
+ <li>所有浏览器标签页的网页内容</li>
+ <li>浏览器内部的代码</li>
+ <li>附加组件.</li>
+</ul>
+
+<h3 id="附加组件（add-ons）的信息">附加组件（add-ons）的信息</h3>
+
+<p>浏览器控制台显示所有的Firefox add-ons信息.</p>
+
+<h4 id="Console.jsm">Console.jsm</h4>
+
+<p>To use the console API from a traditional or bootstrapped add-on, get it from the Console module.</p>
+
+<p>One exported symbol from Console.jsm is "console". Below is an example of how to acess it, which adds a message to the Browser Console.</p>
+
+<pre class="brush: js notranslate">Components.utils.import("resource://gre/modules/devtools/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console</pre>
+
+<p>Learn more:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/console">console API reference</a></li>
+ <li><a href="http://mxr.mozilla.org/mozilla-release/source/toolkit/devtools/Console.jsm">Console.jsm source code in the <span style="line-height: 1.5;">Mozilla Cross-Reference</span></a></li>
+</ul>
+
+<h4 id="HUDService">HUDService</h4>
+
+<p>There is also the HUDService which allows access to the Browse Console. The module is available at <a href="http://mxr.mozilla.org/mozilla-release/source/browser/devtools/webconsole/hudservice.js">Mozilla Cross-Reference</a>. We see we can not only access the Browser Console but also Web Console.</p>
+
+<p>Here is an example on how to clear the contents of the Browser console:</p>
+
+<pre class="brush: js notranslate">Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);</pre>
+
+<p>If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:</p>
+
+<pre class="brush: js notranslate">Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);</pre>
+
+<h4 id="Bonus_Features_Available">Bonus Features Available</h4>
+
+<p>For <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a> add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:</p>
+
+<pre class="brush: js notranslate">widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}</pre>
+
+<p>If you <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">build this as an XPI file</a>, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Click the icon. You'll see output like this in the Browser Console:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filter output"</a> search box. By default, only error messages are logged to the console, although <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">you can change this in the browser's preferences</a>.</p>
+
+<h2 id="浏览器控制台命令行">浏览器控制台命令行</h2>
+
+<div class="geckoVersionNote">
+<p>From Firefox 30, the Browser Console command line is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable chrome debugging" option in the <a href="/en-US/docs/Tools_Toolbox#Advanced_settings">developer tool settings</a>.</p>
+</div>
+
+<p>Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Also like the Web Console's command line interpreter, this command line supports <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">history</a>, and various <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">keyboard shortcuts </a>and <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">helper commands</a>. If the result of a command is an object, you can <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click on the object to see its details</a>.</p>
+
+<p>But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating <code>window</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.</p>
+
+<h3 id="Controlling_the_browser">Controlling the browser</h3>
+
+<p>The command line interpreter gets access to the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> object, through the <code>gBrowser</code> global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):</p>
+
+<pre class="brush: js notranslate">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "&lt;h1&gt;this page has been eaten&lt;/h1&gt;";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre>
+
+<p>It adds a listener to the currently selected tab's <code>load</code> event that will eat the new page, then loads a new page.</p>
+
+<h3 id="修改浏览器的UI（用户界面）">修改浏览器的UI（用户界面）</h3>
+
+<p>Since the global <code>window</code> object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:</p>
+
+<pre class="brush: js notranslate">var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">On OS X, this similar code will add a new item to the "Tools" menu:</p>
+
+<pre class="brush: js notranslate">var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/zh-cn/tools/browser_toolbox/index.html b/files/zh-cn/tools/browser_toolbox/index.html
new file mode 100644
index 0000000000..b95c830ccd
--- /dev/null
+++ b/files/zh-cn/tools/browser_toolbox/index.html
@@ -0,0 +1,50 @@
+---
+title: Browser Toolbox
+slug: Tools/Browser_Toolbox
+tags:
+  - console.log不显示
+  - 浏览器工具箱
+  - 火狐
+  - 网页工具箱
+  - 调试
+translation_of: Tools/Browser_Toolbox
+---
+<div>{{ToolsSidebar}}</div><p>浏览器工具箱和普通的<a href="/en-US/docs/Tools_Toolbox">工具箱</a>类似，但前者是应用于整个浏览器而不是单个的内容标签页。它可以让你在整个浏览器的环境中运行普通的火狐开发者工具，而不是单个网页。这让你可以debug扩展和浏览器自身的JavaScript代码，而不仅仅是网页的。</p>
+
+<p><em>提示：如果你想调试某个免重启或者基于SDK的附加组件、可以尝试使用 <a href="https://developer.mozilla.org/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>. 这两种情况之外的都可以使用浏览器工具箱.</em></p>
+
+<h3 id="开启浏览器工具箱设置">开启浏览器工具箱设置</h3>
+
+<p>这里说的是在网页工具箱里开启<strong>浏览器工具箱</strong>相关选项、默认是没有开启的，你可以：</p>
+
+<ul>
+ <li>打开<a href="/en-US/docs/Tools_Toolbox#Settings">开发者工具箱-设置</a>--<a href="/en-US/docs/Tools/Settings#Advanced_settings">高级设置</a></li>
+ <li>检查选项："开启的chrome和附加组件调试"，"开启远程调试"</li>
+ <li>如上操作如果仍看不到console输出、跳到下面"<strong>打开浏览器工具箱</strong>"</li>
+</ul>
+
+<h3 id="打开浏览器工具箱"><strong>打开浏览器工具箱</strong></h3>
+
+<p>在Firefox浏览器<strong>顶部菜单</strong>(可能自动隐藏了)依次打开<strong>工具</strong>--<strong>Web开发者</strong>--<strong>浏览器工具箱</strong> 即可。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6661/open-menu.png" style="display: block; height: 477px; margin-left: auto; margin-right: auto; width: 508px;">点击菜单项，一个像这样的会话便会呈现在你的面前:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6663/warning.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 554px;">点击OK，然后浏览器工具箱便会以独立的窗口打开:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6665/browser-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">友情提示：如果只是要查看整个浏览器级别的控制台日志输出依次点击<strong>顶部菜单</strong>(可能自动隐藏了)--<strong>工具</strong>--<strong>Web开发者</strong>--<strong>浏览器工具箱</strong>即可。正常我们调试还是切换到相应页面直接按F12就行了。</p>
+
+<p>你可以查看、调试所有被浏览器本身加载的或是任何后添加的且在运行着的JavaScript文件。总之，你可以使用下列的开发者工具:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger">调试器</a></li>
+ <li><a href="/en-US/docs/Tools/Browser_Console">控制台</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor">样式编辑器</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler">分析器</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor">网络监视器</a></li>
+ <li><a href="/en-US/docs/Tools/Scratchpad">缓存器</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">页面检查器</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/debugger-api/index.html b/files/zh-cn/tools/debugger-api/index.html
new file mode 100644
index 0000000000..f7c20b6ebf
--- /dev/null
+++ b/files/zh-cn/tools/debugger-api/index.html
@@ -0,0 +1,99 @@
+---
+title: Debugger-API
+slug: Tools/Debugger-API
+translation_of: Tools/Debugger-API
+---
+<div>{{ToolsSidebar}}</div>
+
+<h1 id="Debugger_接口"><code>Debugger</code> 接口</h1>
+
+<p>Mozilla 的JS引擎, <strong>SpiderMonkey</strong>, 提供了一个名为<code>Debugger</code> 的调试接口，开发者能够通过该接口使用JS代码观测和操纵另一端JS代码的运行. Firefox内置的开发者工具和 Firebug 插件都使用<code>Debugger</code> 来是实现它们的JavaScript调试器.同时，<code>Debugger</code> 也被广泛应用与实现其他类型的工具，例如tracers, coverage analysis, patch-and-continue等。</p>
+
+<p><code>Debugger</code> 有三个基本的特点：</p>
+
+<ul>
+ <li>
+  <p>It is a <em>source level</em> interface: it operates in terms of the JavaScript language, not machine language. It operates on JavaScript objects, stack frames, environments, and code, and presents a consistent interface regardless of whether the debuggee is interpreted, compiled, or optimized. If you have a strong command of the JavaScript language, you should have all the background you need to use <code>Debugger</code> successfully, even if you have never looked into the language’s implementation.</p>
+ </li>
+ <li>
+  <p>It is for use <em>by JavaScript code</em>. JavaScript is both the debuggee language and the tool implementation language, so the qualities that make JavaScript effective on the web can be brought to bear in crafting tools for developers. As is expected of JavaScript APIs, <code>Debugger</code> is a <em>sound</em> interface: using (or even misusing) <code>Debugger</code> should never cause Gecko to crash. Errors throw proper JavaScript exceptions.</p>
+ </li>
+ <li>
+  <p>It is an <em>intra-thread</em> debugging API. Both the debuggee and the code using <code>Debugger</code> to observe it must run in the same thread. Cross-thread, cross-process, and cross-device tools must use <code>Debugger</code> to observe the debuggee from within the same thread, and then handle any needed communication themselves. (Firefox’s builtin tools have a <a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="Remote Debugging Protocol">protocol</a> defined for this purpose.)</p>
+ </li>
+</ul>
+
+<p>In Gecko, the <code>Debugger</code> API is available to chrome code only. By design, it ought not to introduce security holes, so in principle it could be made available to content as well; but it is hard to justify the security risks of the additional attack surface.</p>
+
+<p>The <code>Debugger</code> API cannot currently observe self-hosted JavaScript. This is not inherent in the API’s design, but simply that the self-hosting infrastructure isn’t prepared for the kind of invasions the <code>Debugger</code> API can perform.</p>
+
+<h2 id="Debugger_实例与影子对象">Debugger 实例与影子对象</h2>
+
+<p><code>Debugger</code> reflects every aspect of the debuggee’s state as a JavaScript value—not just actual JavaScript values like objects and primitives, but also stack frames, environments, scripts, and compilation units, which are not normally accessible as objects in their own right.</p>
+
+<p>Here is a JavaScript program in the process of running a timer callback function:</p>
+
+<div class="figure"><img alt="A running JavaScript program and its Debugger shadows" src="https://mdn.mozillademos.org/files/7225/shadows.svg">
+<p class="caption">A running JavaScript program and its Debugger shadows</p>
+</div>
+
+<p>This diagram shows the various types of shadow objects that make up the Debugger API (which all follow some <a href="Debugger-API/Conventions" title="Debugger API: General Conventions">general conventions</a>):</p>
+
+<ul>
+ <li>
+  <p>A <a href="Debugger-API/Debugger.Object" title="Debugger.Object"><code>Debugger.Object</code></a> represents a debuggee object, offering a reflection-oriented API that protects the debugger from accidentally invoking getters, setters, proxy traps, and so on.</p>
+ </li>
+ <li>
+  <p>A <a href="Debugger-API/Debugger.Script" title="Debugger.Script"><code>Debugger.Script</code></a> represents a block of JavaScript code—either a function body or a top-level script. Given a <code>Debugger.Script</code>, one can set breakpoints, translate between source positions and bytecode offsets (a deviation from the “source level” design principle), and find other static characteristics of the code.</p>
+ </li>
+ <li>
+  <p>A <a href="Debugger-API/Debugger.Frame" title="Debugger.Frame"><code>Debugger.Frame</code></a> represents a running stack frame. You can use these to walk the stack and find each frame’s script and environment. You can also set <code>onStep</code> and <code>onPop</code> handlers on frames.</p>
+ </li>
+ <li>
+  <p>A <a href="Debugger-API/Debugger.Environment" title="Debugger.Environment"><code>Debugger.Environment</code></a> represents an environment, associating variable names with storage locations. Environments may belong to a running stack frame, captured by a function closure, or reflect some global object’s properties as variables.</p>
+ </li>
+</ul>
+
+<p>The <a href="Debugger-API/Debugger" title="The Debugger object"><code>Debugger</code></a> instance itself is not really a shadow of anything in the debuggee; rather, it maintains the set of global objects which are to be considered debuggees. A <code>Debugger</code> observes only execution taking place in the scope of these global objects. You can set functions to be called when new stack frames are pushed; when new code is loaded; and so on.</p>
+
+<p>Omitted from this picture are <a href="Debugger-API/Debugger.Source" title="Debugger.Source"><code>Debugger.Source</code></a> instances, which represent JavaScript compilation units. A <code>Debugger.Source</code> can furnish a full copy of its source code, and explain how the code entered the system, whether via a call to <code>eval</code>, a <code>&lt;script&gt;</code> element, or otherwise. A <code>Debugger.Script</code> points to the <code>Debugger.Source</code> from which it is derived.</p>
+
+<p>Also omitted is the <code>Debugger</code>’s <a href="Debugger-API/Debugger.Memory" title="Debugger.Memory"><code>Debugger.Memory</code></a> instance, which holds methods and accessors for observing the debuggee’s memory use.</p>
+
+<p>All these types follow some <a href="Debugger-API/Conventions" title="Debugger API: General Conventions">general conventions</a>, which you should look through before drilling down into any particular type’s specification.</p>
+
+<p>All shadow objects are unique per <code>Debugger</code> and per referent. For a given <code>Debugger</code>, there is exactly one <code>Debugger.Object</code> that refers to a particular debuggee object; exactly one <code>Debugger.Frame</code> for a particular stack frame; and so on. Thus, a tool can store metadata about a shadow’s referent as a property on the shadow itself, and count on finding that metadata again if it comes across the same referent. And since shadows are per-<code>Debugger</code>, tools can do so without worrying about interfering with other tools that use their own <code>Debugger</code> instances.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Here are some things you can try out yourself that show off some of <code>Debugger</code>’s features:</p>
+
+<ul>
+ <li>
+  <p><a href="Debugger-API/Tutorial-Breakpoint" title="Tutorial: Evaluate an expression when a breakpoint is hit">Setting a breakpoint</a> in a page, running a handler function when it is hit that evaluates an expression in the page’s context.</p>
+ </li>
+ <li>
+  <p><a href="Debugger-API/Tutorial-Allocation-Log-Tree" title="Tutorial: the allocation log">Showing how many objects different call paths allocate.</a></p>
+ </li>
+</ul>
+
+<h2 id="Gecko-specific_features">Gecko-specific features</h2>
+
+<p>While the <code>Debugger</code> core API deals only with concepts common to any JavaScript implementation, it also includes some Gecko-specific features:</p>
+
+<ul>
+ <li>[Global tracking][global] supports debugging all the code running in a Gecko instance at once—the ‘chrome debugging’ model.</li>
+ <li>[Object wrapper][wrapper] functions help manipulate object references that cross privilege boundaries.</li>
+</ul>
+
+<h4 id="Source_Metadata">Source Metadata</h4>
+
+<dl>
+ <dt>Generated from file:</dt>
+ <dt></dt>
+ <dd>js/src/doc/Debugger/Debugger-API.md</dd>
+ <dt>Watermark:</dt>
+ <dd id="watermark">sha256:6ee2381145a0d2e53d2f798f3f682e82dd7ab0caa0ac4dd5e56601c2e49913a7</dd>
+ <dt>Changeset:</dt>
+ <dd><a href="https://hg.mozilla.org/mozilla-central/rev/ffa775dd5bd4">ffa775dd5bd4</a></dd>
+</dl>
diff --git a/files/zh-cn/tools/debugger/how_to/index.html b/files/zh-cn/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..084f1717e5
--- /dev/null
+++ b/files/zh-cn/tools/debugger/how_to/index.html
@@ -0,0 +1,11 @@
+---
+title: How to
+slug: Tools/Debugger/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/zh-cn/tools/debugger/how_to/open_the_debugger/index.html b/files/zh-cn/tools/debugger/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..ccb9c8c108
--- /dev/null
+++ b/files/zh-cn/tools/debugger/how_to/open_the_debugger/index.html
@@ -0,0 +1,12 @@
+---
+title: Open the debugger
+slug: Tools/Debugger/How_to/Open_the_debugger
+translation_of: Tools/Debugger/How_to/Open_the_debugger
+---
+<div>{{ToolsSidebar}}</div><p>这样打开调试器：在火狐浏览器菜单中的Web开发者子菜单中选择"Debugger"选项 (or Tools menu if you display the menu bar or are on OS X),或者同时按住"Control-Shift-S"(对于MAC用户:Command-Option-S)</p>
+
+<p>打开之后,调试器工具箱 <a href="/en-US/docs/Tools/Tools_Toolbox" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> 将在浏览器底部显示，如下图一样。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7019/01-overview-startup.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/debugger/how_to/search/index.html b/files/zh-cn/tools/debugger/how_to/search/index.html
new file mode 100644
index 0000000000..13eee9b662
--- /dev/null
+++ b/files/zh-cn/tools/debugger/how_to/search/index.html
@@ -0,0 +1,44 @@
+---
+title: 搜索
+slug: Tools/Debugger/How_to/Search
+translation_of: Tools/Debugger/How_to/Search
+---
+<div>{{ToolsSidebar}}</div>
+
+<h2 id="搜索文件">搜索文件</h2>
+
+<p>按下<kbd>Ctrl</kbd> + <kbd>P</kbd> （或者在Mac上按下 <kbd>Command</kbd> + <kbd>P</kbd>）并输入文件名来搜索文件。<a href="/zh-CN/docs/Tools/Debugger/UI_Tour#Source_pane">源码区</a>会在你输入的过程中显示所有符合搜索条件的文件。你可以用上下箭头在列表中移动并选择文件，按下回车<kbd>Return</kbd>来打开文件:</p>
+
+<p>{{EmbedYouTube("xXsfYx0THWg")}}</p>
+
+<h2 id="在文件中搜索">在文件中搜索</h2>
+
+<p>要在<a href="/zh-CN/docs/Tools/Debugger/UI_Tour#Source_pane">源码区</a>中搜索已打开文件的中的内容，在源码区有焦点的情况下按下<kbd>Control</kbd> + <kbd>F</kbd>（或者在Mac上按下<kbd>Command</kbd> + <kbd>F</kbd>）输入后按下回车<kbd>Return</kbd>开始搜索。调试器会显示符合搜索条件的数量，并高亮显示每个结果：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16906/search_code.png" style="border: 1px solid black; display: block; height: 236px; margin: 0px auto; width: 545px;"></p>
+
+<h3 id="使用Outline">使用Outline</h3>
+
+<p>如果你正在当前的JavaScript文件中找函数，你可以用Outline来快速的找到那个函数。Outline中列出了当前文件中的函数，默认是以函数在文件中的顺序排序的。但是你可以在底部使用“根据函数名排序”（Sort by name）的功能来加快搜索。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16907/outline_sorted.png" style="display: block; margin: 0 auto;"></p>
+
+<p>你可以使用过滤功能来更加快速的找到想要的函数，只需要在Outline顶上的文本框中输入文字就可以过滤不需要的结果。例如我在上图中的Filter functions中输入“load”，我就可以得到以下结果：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16908/outline_filtered.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>只有函数名中包含“load”的函数会显示出来。</p>
+
+<p>这个功能在搜索只有几个函数的文件时可能不会那么游泳，但是当你在一个有数十个函数的文件中找想要的函数的时候就会显得方便。</p>
+
+<h2 id="在所有文件中搜索">在所有文件中搜索</h2>
+
+<p>你也可以在所有文件中找一个字符串。按下 <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>F</kbd>（Windows和Linux系统）或者<kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>F</kbd>（macOS系统）并输入你想要找的字符串。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16790/searchInAllFiles.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p>
+
+<p>如果目标字符串存在在文件中，Debugger会显示一个列表，包含所有找到的文件和字符串对应的行号。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16789/ctrlShiftF.png" style="border: 1px solid black; display: block; height: 342px; margin: 0px auto; width: 800px;"></p>
+
+<p>只需在列表中点击对应的项目就可以直接前往到那个文件中的那一行，也就是包含要搜索的字符串的地方。</p>
diff --git a/files/zh-cn/tools/debugger/how_to/use_a_source_map/index.html b/files/zh-cn/tools/debugger/how_to/use_a_source_map/index.html
new file mode 100644
index 0000000000..720ef16622
--- /dev/null
+++ b/files/zh-cn/tools/debugger/how_to/use_a_source_map/index.html
@@ -0,0 +1,35 @@
+---
+title: 使用 source map
+slug: Tools/Debugger/How_to/Use_a_source_map
+tags:
+  - Use a source map
+  - source map
+translation_of: Tools/Debugger/How_to/Use_a_source_map
+---
+<div>{{ToolsSidebar}}</div>
+
+<div>被浏览器执行的JavaScript代码通常会以某种方式从开发人员创建的原始资源中转译而来。例如：</div>
+
+<ul>
+ <li>源码通常会合并和最小化以高效的从服务器端获取</li>
+ <li>页面中运行的JavaScript通常是机器生成的，就像从CoffeeScript或TypeScript这样的语言编译时一样。</li>
+</ul>
+
+<p>在这些场景下，调试原始源代码会比浏览器下载的转换后的代码更加容易。 <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> 是从已转换的代码映射到原始源的文件，使浏览器能够重构原始源并在调试器中显示重建的原始源。</p>
+
+<p>为了调试工作能够使用source map，你必须：</p>
+
+<ul>
+ <li>生产一个source map</li>
+ <li>加入一个注释在转换后的文件，它指向source map。注释的语法类似：</li>
+</ul>
+
+<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre>
+
+<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>
+
+<p>在此视频我们加载了 <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. 页面加载一个名为“main.js”的源，该源最初是用CoffeeScript编写的，并编译为JavaScript。已编译的源包含这样的注释，指向源映射：</p>
+
+<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre>
+
+<p>在调试器的 <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">source list pane</a> 中，原始的CoffeeScript源现在显示为“main.coffee”，我们可以像调整任何其他源一样调试它。.</p>
diff --git a/files/zh-cn/tools/debugger/index.html b/files/zh-cn/tools/debugger/index.html
new file mode 100644
index 0000000000..39c4b178a6
--- /dev/null
+++ b/files/zh-cn/tools/debugger/index.html
@@ -0,0 +1,84 @@
+---
+title: 调试器
+slug: Tools/Debugger
+tags:
+  - 工具
+  - 开发工具
+  - 火狐操作系统
+  - 调试器
+  - 调试技术
+translation_of: Tools/Debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>JavaScript Debugger允许单步调试，进入到你的Javascript代码中审查并修改相应的值，便于追踪缺陷。</p>
+
+<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p>
+
+<p>你可以运用JS Debugger来调试并运行在远程或本地的代码，比如在火狐OS或安卓设备上。远程调试请查看 <em><u><a href="/en-US/docs/Tools/Remote_Debugging" title="/en-US/docs/Tools/Remote_Debugging">远程调试</a>  </u></em>，来学习如何将调试器与远程目标连接起来 。</p>
+
+<p>这里有一份<a href="/zh-CN/docs/Tools/Debugger/UI_Tour">快速指南</a>来帮助你熟悉JS Debugger的界面。</p>
+
+<h2 id="如何使用？">如何使用？</h2>
+
+<p>你可以参考以下文档来了解如何使用Debugger。</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Open_the_debugger">打开Debugger</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">美化源代码</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Search">搜索</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">使用source map</a></li>
+</ul>
+</div>
+
+<h3 id="暂停执行">暂停执行</h3>
+
+<p>有时你可能想暂停正在执行的代码，来了解代码的各个部分在做什么。为了告诉Debugger何时暂停执行，有以下多种不同的方法：</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Set_a_breakpoint">设置断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">设置条件断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Set_an_XHR_breakpoint">设置XHR断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Set_event_listener_breakpoints">设置Event Listener断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Breaking_on_exceptions">设置异常断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Use_watchpoints">使用watchpoints</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Break_on_DOM_mutation">设置DOM变化断点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Disable_breakpoints">禁用断点</a></li>
+</ul>
+</div>
+
+<h3 id="控制执行">控制执行</h3>
+
+<p>代码暂停执行之后能够做什么？</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Step_through_code">单步执行</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Black_box_a_source">忽略源代码</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Debug_worker_threads">调试worker线程代码</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Debug_eval_sources">调试eval()中的代码</a></li>
+</ul>
+</div>
+
+<h3 id="观察变量">观察变量</h3>
+
+<p>在执行期间或暂停时，有时你可能会想观察变量或表达式的值。</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Debugger/Set_a_logpoint">设置日志点</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger/How_to/Set_Watch_Expressions">设置watch表达式</a></li>
+</ul>
+
+<hr>
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>
+  <p><a href="/zh-CN/docs/Tools/Debugger/Keyboard_shortcuts">Debugger键盘快捷键</a></p>
+ </li>
+ <li>
+  <p><a href="/zh-CN/docs/Tools/Debugger/Source_map_errors">Source map错误</a></p>
+ </li>
+</ul>
diff --git a/files/zh-cn/tools/debugger/source_map_errors/index.html b/files/zh-cn/tools/debugger/source_map_errors/index.html
new file mode 100644
index 0000000000..89ad97c20f
--- /dev/null
+++ b/files/zh-cn/tools/debugger/source_map_errors/index.html
@@ -0,0 +1,68 @@
+---
+title: Source map errors
+slug: Tools/Debugger/Source_map_errors
+tags:
+  - Debugger
+  - Debugging
+  - Dev Tools
+  - Reference
+  - Source maps
+  - Tools
+translation_of: Tools/Debugger/Source_map_errors
+---
+<div>{{ToolsSidebar}}</div><p class="summary"><span style="">源映射是JSON文件，它提供了一种方法，可以将转换的源代码与开发人员所看到的原始资源关联起来，就像浏览器所看到的那样。您有时可能会遇到使用源映射的问题。这一页解释了最常见的问题以及如何修复它们。</span></p>
+
+<div class="note">
+<p><span style="">注意:如果你是新手地图的新手，你可以在如何使用源地图上了解更多的信息。</span></p>
+</div>
+
+<h2 id="通用源映射错误报告"><span style="">通用源映射错误报告</span></h2>
+
+<p><span style="">如果您确实看到了问题，将在webconsole中显示一条消息。该消息将显示一个错误消息、资源URL和源映射URL:</span></p>
+
+<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p><span style="">这里，资源URL告诉我们这个bundle。js提到了一个源映射，源映射URL告诉我们在哪里找到源映射数据(在本例中是相对于资源的)。这个错误告诉我们源映射不是JSON数据，所以我们正在为错误的文件服务。</span></p>
+
+<p><span style="">有一些常见的方法可以使源图出错;下面几节将详细介绍这些内容。</span></p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="缺少或无法访问的源映射"><span style="">缺少或无法访问的源映射</span></h2>
+
+<p><span style="">源映射资源可能会丢失或无法访问。</span></p>
+
+<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p>
+
+<p><span style="">这里的解决方法是确保文件已经被服务并且可以访问浏览器</span></p>
+
+<h2 id="无效的源图"><span style="">无效的源图</span></h2>
+
+<p><span style="">源映射数据可能是无效的——要么根本不是一个JSON文件，要么是一个不正确的结构。典型的错误消息是:</span></p>
+
+<ul>
+ <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li>
+ <li><code>Error: "version" is a required argument</code></li>
+</ul>
+
+<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p>
+
+<h2 id="原始失踪"><span style="">原始失踪</span></h2>
+
+<p><span style="">一个原始的源可能会丢失。在调试器中尝试打开原始源代码时，您可能会遇到这种情况。在这种情况下，信息看起来有点不同:</span></p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p>
+
+<p><span style="">在这种情况下，错误也会显示在调试器的source选项卡中:</span></p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p>
diff --git a/files/zh-cn/tools/debugger/ui_tour/index.html b/files/zh-cn/tools/debugger/ui_tour/index.html
new file mode 100644
index 0000000000..6ba5320fca
--- /dev/null
+++ b/files/zh-cn/tools/debugger/ui_tour/index.html
@@ -0,0 +1,115 @@
+---
+title: UI Tour
+slug: Tools/Debugger/UI_Tour
+translation_of: Tools/Debugger/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>本文对JavaScript Debugger的用户图形界面的主要部分进行快速的介绍。UI分成六个主要部分,后面将单独介绍这六个部分.</p>
+
+<ul>
+ <li><a href="#toolbar">Toolbar 工具栏</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Source list pane 源文件列表区</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Call_stack_pane">Call stack pane 调用栈区</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">Source pane 源码区</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Variables_pane">Variables pane 变量区</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Events_pane">Events pane 事件区</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7063/03-ui-sections.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Toolbar"><a name="toolbar">Toolbar</a></h2>
+
+<p>工具栏由下面四部分组成:</p>
+
+<ul>
+ <li>一组控制脚本跳转的按钮</li>
+ <li>调用栈的可视化</li>
+ <li>脚本过滤器</li>
+ <li>buttons to:
+  <ul>
+   <li>关闭/打开变量和事件面板</li>
+   <li>控制debugger的按钮</li>
+  </ul>
+ </li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7035/09-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;">左边的四个按钮完成以下的功能:</p>
+
+<ul>
+ <li><strong>Pause/Resume</strong> (F8): pauses or resumes execution of the script you're debugging. When it's blue and "pressed", as above, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.</li>
+ <li><strong>Step Over</strong> (F10): steps across the current line of JavaScript code.</li>
+ <li><strong>Step Into</strong> (F11): steps into the function call on the current line of JavaScript code.</li>
+ <li><strong>Step Out</strong> (Shift-F11): runs the script until the current function exits.</li>
+</ul>
+
+<p>调用栈的可视化显示正在中断的执行代码点的调用栈。</p>
+
+<h2 id="Source_list_pane_源文件列表区">Source list pane 源文件列表区</h2>
+
+<p>源文件列表区显示了所有被加载到当前页面的JS源文件，可以在这些源文件中选择其中一个进行调试。源文件列表区和调用栈区共享一块屏幕区域，可以使用该区域最上方的标签按钮在源文件列表区和调用栈区之间进行切换。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7025/04-source-list.png" style="display: block; margin-left: auto; margin-right: auto;">源文件被根据加载的来源进行分类。当选择其中一个源文件，该源文件将被加载到源码区显示。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7071/24-source-list-details.png" style="display: block; margin-left: auto; margin-right: auto;"><br>
+ Any breakpoints you've set in a source file are listed in the source list pane under the filename. The check box next to each breakpoint lets you enable/disable it. Right-clicking on the breakpoint's entry in the list shows a context menu enabling you to:</p>
+
+<ul>
+ <li>enable, disable or remove this breakpoint, all breakpoints, or all breakpoints except this one</li>
+ <li>make this breakpoint conditional (or edit its conditions, if it is already conditional)</li>
+</ul>
+
+<p>The three icons at the bottom of the source list pane enable you to <a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">black box a source</a>, <a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">pretty-print minified JS files</a>, and <a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">disable/enable all breakpoints</a>.</p>
+
+<h2 id="Call_stack_pane">Call stack pane</h2>
+
+<p>调试器左边的另一个标签显示垂直调用栈。</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7081/23-call-stack.png" style="display: block; margin-left: auto; margin-right: auto;">Each row represents a level in the call stack, with the current stack frame on top. The row shows the name of the function currently executing, and a link to its source file and line number.</p>
+
+<h2 id="Source_pane_源码区">Source pane 源码区</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9829/debugger-source-pane.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>源码区显示从源码列表区选择的当前源文件。断点是一个在行号旁边的蓝色圆点，当调试到该断点的时候，该断点内部将显示一个蓝色的箭头。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7031/07-breakpoint-hit.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>在源码区，通过上下文菜单可以实现：</p>
+
+<ul>
+ <li>设置一个断点</li>
+ <li>设置一个条件断点</li>
+ <li>add a watch expression for the selection</li>
+ <li>使用脚本过滤器搜索或过滤</li>
+</ul>
+
+<h3 id="Variables_popup_变量弹出框">Variables popup 变量弹出框</h3>
+
+<p>当鼠标悬停在源码区的某个变量，一个弹出框将出现，显示当前变量的值：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7033/08-variable-popup.png" style="display: block; margin-left: auto; margin-right: auto;">通过变量弹出框可以快速查看某个变量的值，不需要通过打开和搜索变量区查看变量的值。</p>
+
+<h2 id="Variables_pane_变量区">Variables pane 变量区</h2>
+
+<p>变量区可以查看和修改正在运行脚步的内部状态：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7037/10-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;">变量区和事件区共享一块屏幕区域，可以通过该区域最上方的标签按钮在变量区和事件区之间切换。</p>
+
+<p> </p>
+
+<h2 id="Events_pane_事件区">Events pane 事件区</h2>
+
+<p><span>事件区显示当前代码绑定的所有DOM事件。</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7041/12-events.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>事件区和变量区共享一块屏幕区域，可以通过该区域最上方的标签按钮在变量区和事件区之间切换。</p>
+
+<p>事件区根据事件的类型分类显示，下面的截屏显示了四种类型的事件：Interaction, Keyboard, Mouse,和Navigation。每种分类下面列出了在代码中使用下面语法注册的所有事件。</p>
+
+<pre>[event name] on [event target] in [source file]</pre>
+
+<p>If you check the checkbox next to the event, the debugger will break at the first line of the event's listener. If you check the checkbox next to the event type, then the debugger will break for any of the events listed under that type.</p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/dom_property_viewer/index.html b/files/zh-cn/tools/dom_property_viewer/index.html
new file mode 100644
index 0000000000..25e7943e68
--- /dev/null
+++ b/files/zh-cn/tools/dom_property_viewer/index.html
@@ -0,0 +1,44 @@
+---
+title: DOM Property Viewer
+slug: Tools/DOM_Property_Viewer
+tags:
+  - DOM
+  - Web开发
+  - 工具
+translation_of: Tools/DOM_Property_Viewer
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">DOM 属性查看器最新出现在 Firefox 48. 默认是被禁用的. 在 <a href="/en-US/docs/Tools_Toolbox#Settings">开发者工具设置</a> 中开启.</div>
+
+<p>DOM属性查看器允许您从当前页面的   {{domxref("window")}} 对象或<a href="/zh-CN/docs/tools/Working_with_iframes">所选的iframe</a>开始，检查 {{Glossary("DOM")}}  的属性作为可扩展树结构。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13098/DOM%20Inspector.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 843px;"></p>
+
+<h2 id="开启DOM属性查看器">开启DOM属性查看器</h2>
+
+<p>DOM属性查看器默认是没有开启的. 想要开启它, 打开 <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">开发者工具设置</a> and 并且选择 "DOM"  作为 "默认FireFox开发者工具".</p>
+
+<h2 id="打开DOM属性查看器">打开DOM属性查看器</h2>
+
+<p>一旦开启, 你就可以通过选择在FireFox菜单面板的WEB开发者子面板的 “DOM” 来打开DOM属性查看器（或者是工具面板，如果你显示菜单栏或者是在 Mac OS X）, 或者是按 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>W</kbd> 快捷键.</p>
+
+<p><a href="/en-US/docs/Tools/DevTools_Window">工具箱</a> 会显示在浏览器窗口的下面, 在DOM属性查看器被激活的时候. 仅仅在工具箱中激活起 "DOM".</p>
+
+<h2 id="DOM属性查看器_用户界面">DOM属性查看器 用户界面</h2>
+
+<h3 id="DOM树">DOM树</h3>
+
+<p>DOM的不同属性将会显示成一个可以伸展的树形结构. 左手边显示属性的名字, 右手边显示它的值. 直到对象的属性和数组的元素被显示. 如果属性的元素超过了能显示的范围, 你将看到 "more..." 标示, 并且需要去点击来查看全部的元素. 一个锁代表这个属性不可写.</p>
+
+<h3 id="刷新显示">刷新显示</h3>
+
+<p>如果DOM改变了，你可以点击 <em>刷新</em> 按钮来更新显示的内容:</p>
+
+<p><img alt="Button to update the DOM Inspector display" src="https://mdn.mozillademos.org/files/13102/DOM%20Inspector%20Refresh%20button.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 852px;"></p>
+
+<h3 id="过滤">过滤</h3>
+
+<p>这里有一个搜索区域在工具栏上:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13100/DOM%20Inspector%20search%20box.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 851px;"></p>
+
+<p>过滤器列出只有匹配你搜索的关键字的项目. 如果项目的名字中包含你搜索的关键字它们将可以列出来. 匹配区分大小写.</p>
diff --git a/files/zh-cn/tools/eyedropper/index.html b/files/zh-cn/tools/eyedropper/index.html
new file mode 100644
index 0000000000..762c2dd693
--- /dev/null
+++ b/files/zh-cn/tools/eyedropper/index.html
@@ -0,0 +1,45 @@
+---
+title: Eyedropper
+slug: Tools/Eyedropper
+tags:
+  - 取色器
+translation_of: Tools/Eyedropper
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>取色器是Firefox31中新增的功能</p>
+</div>
+
+<p>你可以使用取色器提取当前页面上的颜色。当取色器被激活的时候，它就像一个“放大镜”，使得你可以进行像素精度的颜色选择。在取色器下方显示的是当前像素点的颜色值，颜色值显示格式与你在<a href="/en-US/docs/Tools_Toolbox#Inspector">设置</a>中选择的一致</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="width: 305px; height: 204px; display: block; margin-left: auto; margin-right: auto;">使用取色器有两种方法：</p>
+
+<ul>
+ <li>从页面上提取一种颜色，然后粘贴在剪贴板上</li>
+ <li>把”检查器“样式视窗中的颜色改变为你在页面上选择的颜色</li>
+</ul>
+
+<h2 id="把一个颜色值复制到剪切板">把一个颜色值复制到剪切板</h2>
+
+<p>有两种方法激活取色器</p>
+
+<ul>
+ <li>选择”开发者工具“菜单下的”取色器“</li>
+ <li>点击工具栏中的取色器按钮（但是要注意这个按钮默认是不显示的：你需要在”开发者工具箱“中勾选上”从页面上抓取一个颜色“来使它默认可见）</li>
+</ul>
+
+<p>选中取色器之后，随着鼠标在页面上的移动，你可以看到取色器下面的当前颜色值也在变化。点击鼠标会把当前的颜色值复制到剪切板</p>
+
+<p>{{EmbedYouTube("xf2uk6UyRB8")}}（youtube视频演示需要翻墙，否则不能加载）</p>
+
+<h2 id="改变样式中的颜色值">改变样式中的颜色值</h2>
+
+<p>检查器css样式中的颜色值旁边有一个圆形的颜色样板：点击颜色样板会出现一个颜色提取弹窗。从火狐31版本之后，弹窗包含一个取色器图标：点击这个图标可以激活取色器</p>
+
+<p>现在，点击弹窗中取色器，然后移动鼠标点击页面，css样式中的颜色值就会变成你所选择的颜色</p>
+
+<p><br>
+ {{EmbedYouTube("0Zx1TN21QOo")}}（youtube视频演示需要翻墙，否则不能加载）</p>
+
+<h2 id="键盘快捷键">键盘快捷键</h2>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "eyedropper") }}</p>
diff --git a/files/zh-cn/tools/index.html b/files/zh-cn/tools/index.html
new file mode 100644
index 0000000000..160567490a
--- /dev/null
+++ b/files/zh-cn/tools/index.html
@@ -0,0 +1,228 @@
+---
+title: Firefox 开发者工具
+slug: Tools
+tags:
+  - Mozilla 开发
+  - Web 开发
+  - 'Web 开发:工具'
+  - 向导
+  - 工具
+  - '本地化:优先级'
+  - 网页开发
+  - '网页开发:工具'
+translation_of: Tools
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Firefox 开发者工具是指Firefox集成的一系列web开发者工具，可用于在 PC 和移动设备上对HTML、CSS 及 JavaScript进行测试，编辑和调试</p>
+
+<p class="summary">这段内容包括所有关于如何在Android调试Firefox、扩展DevTools以及整个浏览器调试相关的工具和知识的详细索引。</p>
+
+<p>如果你在寻找有关使用 Firefox 开发者工具的信息，你来对地方了——这个页面提供了核心工具和附加工具的详尽信息，以及更深层的信息，比如如何连接调试 Firefox 安卓版，如何拓展开发者工具和如何调试浏览器。</p>
+
+<p>请探索侧边栏的链接，进一步浏览页面。如果你有任何有关开发者工具的反馈或问题，请在邮件列表或 IRC 频道（请查阅<a href="/zh-CN/docs/Tools#Join_the_Developer_tools_community">底部的社区链接</a>）上向我们发送消息。如果你有任何特别关于文档的反馈或问题，<a href="https://discourse.mozilla.org/c/mdn">MDN 讨论</a>适合发帖。</p>
+
+<div class="note">
+<p><strong>注意</strong>：如果你是 Web 开发的初学者并且使用开发者工具，我们的<a href="/zh-CN/docs/Learn">学习 Web 开发</a>文档可能会对你有所帮助 — 查看<a href="/zh-CN/docs/Learn/Getting_started_with_the_web">初识 Web</a> 和 <a href="/zh-CN/docs/Learn/Discover_browser_developer_tools">什么是浏览器开发者工具？ </a>作为一个较为合适的出发点。</p>
+</div>
+
+<h2 id="核心工具">核心工具</h2>
+
+<p>在右侧的开发工具, 在 Windows 或者 Linux 使用 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 或<kbd>F12</kbd>, 或者在 Mac OS X <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> , 有几个按钮可用于执行操作或更改工具设置.</p>
+
+<p>右手边的省略号菜单包括了若干命令，让你执行操作或改变工具设定。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p>
+
+<table class="standard-table" style="height: 178px; width: 840px;">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td>
+   <td>这个按钮只有在页面中包含多个 iframe 时才会显示。点击显示当前页面的 iframe 列表，选择你想操作的哪个。</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
+   <td>点击这个按钮来给当前页面截图。（<strong>注意：</strong>这个特性默认不会打开，只有在设置里开启，图标才会显示。）</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
+   <td>切换至响应式布局设计。</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
+   <td>打开包括停靠模式、显示或隐藏分离式控制台和开发者工具设置的菜单。这个菜单还包括开发者工具的文档和 Mozilla 社区的链接。</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
+   <td>关闭开发者工具。</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="页面查看器">页面查看器</h3>
+
+<p><a href="/zh-CN/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>查看和编辑页面内容和布局。可视化页面的许多方面，包括盒子模型，动画和网格布局。</p>
+</div>
+
+<div class="column-half">
+<h3 id="Web_控制台">Web 控制台</h3>
+
+<p><a href="/zh-CN/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>查看由页面和 JavaScript 交互记录的信息</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="JavaScript_调试器">JavaScript 调试器</h3>
+
+<p><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>停止，浏览，检查和修改页面中运行的 JavaScript。</p>
+</div>
+
+<div class="column-half">
+<h3 id="网络监视器">网络监视器</h3>
+
+<p><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>查看加载页面时的网络请求。</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="性能工具">性能工具</h3>
+
+<p><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>分析网站的响应，JavaScript 程序和布局性能。</p>
+</div>
+
+<div class="column-half">
+<h3 id="响应式设计模式">响应式设计模式</h3>
+
+<p><a href="/zh-CN/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>查看网站或 app 在不同终端和网络类型上的外观和行为。</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="无障碍环境">无障碍环境</h3>
+
+<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>提供了一种访问页面的无障碍树的方法，允许你查看遗漏或需要注意的东西。</p>
+</div>
+
+<div class="column-half">
+<h3 id="应用面板">应用面板</h3>
+
+<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Application"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/17307/just-application-panel.jpg"></a></p>
+
+<p>提供现代web应用（或者叫改进web应用）预览和调试工具。包括服务工和web应用清单的预览。</p>
+</div>
+</div>
+
+<div class="note">
+<p><strong>注意</strong>：称呼开发者工具的 UI 的整体性的术语是 Toolbox（工具箱）。</p>
+</div>
+
+<h2 id="更多工具">更多工具</h2>
+
+<p>这些开发者工具也内置在 Firefox 中。但不像上面的“核心工具”一样常用。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt id="Memory"><a href="/zh-CN/docs/Tools/Memory">内存</a></dt>
+ <dd>判断哪些对象正在使用内存。</dd>
+ <dt id="Storage_Inspector"><a href="/zh-CN/docs/Tools/存储查看器">存储查看器</a></dt>
+ <dd>查看存在于页面中的 cookie、本地存储、indexedDB 和 会话存储。</dd>
+ <dt id="DOM_Property_Viewer"><a href="/zh-CN/docs/Tools/DOM_Property_Viewer">DOM 属性查看器</a></dt>
+ <dd>检查页面上 DOM 属性，函数等。</dd>
+ <dt id="Eyedropper"><a href="/zh-CN/docs/Tools/Eyedropper">页面取色器</a></dt>
+ <dd>从页面中选择一种颜色。</dd>
+ <dt id="Scratchpad"><a href="/zh-CN/docs/Tools/Scratchpad">便笺</a></dt>
+ <dd>Firefox 内置的文本编辑器，可让您编写和执行 JavaScript。</dd>
+ <dt id="Style_Editor"><a href="/zh-CN/docs/Tools/Style_Editor">样式编辑器</a></dt>
+ <dd>查看和编辑当前页面的 CSS 样式。</dd>
+ <dt id="Shader_Editor"><a href="/zh-CN/docs/Tools/Shader_Editor">着色器编辑器</a></dt>
+ <dd>查看和编辑 <a href="/zh-CN/docs/Web/WebGL">WebGL</a> 使用的顶点和片段着色器。</dd>
+ <dt id="Web_Audio_Editor"><a href="/zh-CN/docs/Tools/Web音频编辑器">网络音频编辑器</a></dt>
+ <dd>检查音频上下文中音频节点的图形，并修改其参数。</dd>
+ <dt id="Screenshot"><a href="/en-US/docs/Tools/Taking_screenshots">截图</a></dt>
+ <dd>对整个页面或单个元素的屏幕截图。</dd>
+ <dt id="Measure_a_portion_of_the_page"><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">测量部分页面</a></dt>
+ <dd>测量网页的特定区域。</dd>
+ <dt id="Rulers"><a href="/zh-CN/docs/Tools/Rulers">标尺</a></dt>
+ <dd>在网页上添加水平和垂直标尺的叠加层。</dd>
+</dl>
+</div>
+
+<div class="column-container">
+<div class="column-third">
+<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
+
+<p style="text-align: center;">体验最新的开发者工具和特性，试一试 Firefox 开发者版本吧！</p>
+
+<p><a href="https://www.mozilla.org/zh-CN/firefox/developer/">下载 Firefox 开发者版本</a></p>
+</div>
+</div>
+
+<h2 id="连接开发者工具">连接开发者工具</h2>
+
+<p>如果您使用<a href="/zh-CN/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">快捷键</a>或菜单打开开发者工具, 他们将定位由当前活动选项卡托管的文档。但是，你也可以将这些工具连接到其他目标上，无论是在当前的浏览器中，还是在不同的浏览器中，甚至是不同的设备上。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt id="about:debugging"><a href="/zh-CN/docs/Tools/about:debugging">调试工具</a></dt>
+ <dd>调试在浏览器中运行的插件、内容页签及工作者线程。</dd>
+ <dt id="Connecting_to_Firefox_for_Android"><a href="/zh-CN/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">连接到 Android 的 Firefox</a></dt>
+ <dd>将开发者工具连接到在 Android 设备上运行的 Firefox。</dd>
+ <dt id="Connecting_to_iframes"><a href="/zh-CN/docs/Tools/Working_with_iframes">连接到 iframe</a></dt>
+ <dd>将开发者工具连接到当前页面中的特定iframe。</dd>
+ <dt id="Connecting_to_other_browsers"><a href="/zh-CN/docs/Tools/Firefox_Tools_Adapter">连接到其他浏览器</a></dt>
+ <dd>将开发者工具连接到 Android 上的 Chrome 和 iOS 上的 Safari。</dd>
+</dl>
+</div>
+
+<h2 id="调试浏览器">调试浏览器</h2>
+
+<p>默认情况下，开发者工具将附加到网页或Web应用程序。 但是你也可以将它们连接到浏览器。 这对于浏览器和附加组件开发很有用。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt id="Browser_Console"><a href="/zh-CN/docs/Tools/Browser_Console">浏览器控制台</a></dt>
+ <dd>查看由浏览器本身和插件记录的信息，并在浏览器里运行 JavaScript 代码。</dd>
+ <dt id="Browser_Toolbox"><a href="/zh-CN/docs/Tools/Browser_Toolbox">浏览器工具箱</a></dt>
+ <dd>将开发工具附加到浏览器本身。</dd>
+</dl>
+</div>
+
+<h2 id="扩展开发者工具">扩展开发者工具</h2>
+
+<p>对于有关拓展 Firefox 开发者工具的信息，详见在 MDN 的<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">浏览器拓展</a>板块的<a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">拓展开发者工具</a>。</p>
+
+<h2 id="从_Firebug_迁移">从 Firebug 迁移</h2>
+
+<p>Firebug 已经寿终正寝（若想了解原因，请查看页面<a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug 存在于 Firefox 开发者工具</a>），我们明白，迁移到一个不太熟悉的开发者工具是具有挑战性的。 为了简化从 Firebug 到 Firefox 开发者工具的转换，我们写了一个简便的指南 — <a href="/zh-CN/docs/Tools/Migrating_from_Firebug">Firebug 迁移</a>。</p>
+
+<h2 id="贡献">贡献</h2>
+
+<p>如果你想帮助改进开发者工具，这些资源将帮助你入门。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="https://devtools-html.github.io/#getting-in-touch">参与其中</a></dt>
+ <dd>我们的开发者文档解释了如何参与。</dd>
+ <dt><a href="http://firefox-dev.tools/">提交故障</a></dt>
+ <dd>一个可用来帮助发现故障的工具。</dd>
+</dl>
+</div>
diff --git a/files/zh-cn/tools/keyboard_shortcuts/index.html b/files/zh-cn/tools/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..f09fc8a840
--- /dev/null
+++ b/files/zh-cn/tools/keyboard_shortcuts/index.html
@@ -0,0 +1,1217 @@
+---
+title: 键盘快捷键
+slug: Tools/Keyboard_shortcuts
+tags:
+  - 工具
+translation_of: Tools/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>这个页面列出了 Firefox 开发者工具的所有快捷键使用方法 。</p>
+
+<p>第一部分列出打开每个工具的快捷键，第二部分列出适用于工具箱本身的快捷键，之后为每个工具部分的快捷键。</p>
+
+<p>依赖本地环境的快捷键没有记录在这个页面。</p>
+
+<h2 id="打开和关闭工具">打开和关闭工具</h2>
+
+<p>这些快捷键可以在浏览器窗口打开指定的工具。对于工具箱中集成的工具，如果已被打开，也可以通过这些快捷键进行关闭操作。对于在新窗口打开的工具（如浏览器控制台），你必须关闭窗口来关闭工具。</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">打开工具箱（激活最近使用的工具）</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">唤起工具箱到前台（当工具箱为分离窗口模式且没有在前台运行）</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 或 <kbd>F12</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> 或 <kbd>F12</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 或 <kbd>F12</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">关闭工具箱（当工具箱为分离窗口模式且在前台运行）</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 或 <kbd>F12</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> 或 <kbd>F12</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 或 <kbd>F12</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开 Web 控制台<a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">切换工具箱</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开调试器<a href="#debugger_shortcut_note"><strong><sup>2</sup></strong></a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开样式编辑器</th>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开性能分析器</th>
+   <td><kbd>Shift</kbd> + <kbd>F5</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F5</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Shift</kbd> + <kbd>F5</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开网络监视器<a href="#opening-closing-network-monitor-note"><strong><sup>3</sup></strong></a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">切换开发者工具栏</th>
+   <td><kbd>Shift</kbd> + <kbd>F2</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F2</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Shift</kbd> + <kbd>F2</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">切换响应式设计视图</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开浏览器控制台<a href="#opening-closing-browser-console-note"><strong><sup>4</sup></strong></a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开浏览器工具箱</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开代码草稿纸</th>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开 WebIDE</th>
+   <td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">存储探查器<a href="#disabled-tools-shortcut"><strong><sup>5</sup></strong></a></th>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="opening-closing-web-console-note">1.不同于其他工具箱内工具，该快捷键无法关闭 Web 控制台。因为把焦点集中到了 Web 控制台的命令行。关闭 Web 控制台可以使用全局工具箱快捷键 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd> （Mac：<kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>I</kbd>）。</a></p>
+
+<p><a id="debugger_shortcut_note" name="debugger_shortcut_note">2.从 Firefox 66 开始，这个快捷键不再关联调试器。</a></p>
+
+<p><a id="opening-closing-network-monitor-note" name="opening-closing-network-monitor-note">3.在 Firefox 55 以前的版本上，这个快捷键是 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Q</kbd> （Mac：<kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>Q</kbd>）</a></p>
+
+<p><a id="opening-closing-browser-console-note" name="opening-closing-browser-console-note">4.到 Firefox 38 为止的版本上，当浏览器控制台在正常 Firefox 窗口上被隐藏，相同的组合键为关闭浏览器控制台。从 Firefox 38 起，如果当浏览器控制台在正常 Firefox 窗口上被隐藏，上面这个组合键将把焦点定位到浏览器控制台。</a></p>
+
+<p><a href="/en-US/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">5.该工具在默认情况下是禁用的，需要在设置面板中启用后才能运作。</a></p>
+
+<h2 id="工具箱">工具箱</h2>
+
+<div id="toolbox-shortcuts">
+<p>无论激活的是哪个工具，这些快捷键只在工具箱打开时起作用。</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">从左到右切换开发工具</th>
+   <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>]</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">从右到左切换开发工具</th>
+   <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>[</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在激活的工具和设置之间切换</th>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在工具箱中所设置的最后两种<a href="/zh-CN/docs/Tools/Tools_Toolbox#Docking_mode">停靠模式</a>间切换</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">切换分离式控制台（当控制台不是目前选中的工具）</th>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="all-toolbox-tools">
+<p>这些快捷键在工具箱的所有工具中都能使用。</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">放大字体</th>
+   <td><kbd>Ctrl</kbd> + <kbd>+</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>+</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>+</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">缩小字体</th>
+   <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>-</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">重置字体缩放</th>
+   <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>0</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="代码编辑器">代码编辑器</h2>
+
+<div id="source-editor">
+<p>此表列出了代码编辑器的默认快捷键。</p>
+
+<p>在开发工具选项的<a href="/zh-CN/docs/Tools/Tools_Toolbox#Editor_Preferences">编辑器偏好</a>中，您可以选择使用 Vim、Emacs 或 Sublime Text 的快捷键。</p>
+
+<p>选择这些,访问 <code>about:config</code>，选择设定 <code>devtools.editor.keymap</code> 的值为 "vim" 或 "emacs"或 "sublime"。通过这个设定。通过该方法你可以设定开发者工具中所有的代码编辑器使用的快捷键。并且你需要重新启动编辑器更改才能生效。</p>
+
+<p>从 Firefox 33 起，更改编辑器快捷键可以通过开发者工具箱选项中的<a href="/zh-CN/docs/Tools/Tools_Toolbox#Editor_Preferences">编辑器偏好</a>实现。而不需要通过 <code>about:config</code>。</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">跳转到某行</th>
+   <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">查找</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">查找下一个</th>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">全选</th>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">剪切</th>
+   <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>X</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">复制</th>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">粘贴</th>
+   <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">撤销</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">重做</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">缩进</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">取消缩进</th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">上移行</th>
+   <td><kbd>Alt</kbd> + <kbd>Up</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Up</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">下移行</th>
+   <td><kbd>Alt</kbd> + <kbd>Down</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Down</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">注释/取消注释行</th>
+   <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>/</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="页面查看器">页面查看器</h2>
+
+<div id="page-inspector">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">打开查看器</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="节点选择器">节点选择器</h3>
+
+<p>这些快捷键在开启<a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">节点拾取器</a>时有效。</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">选择光标下的元素并退出拾取状态</th>
+   <td><kbd>Click</kbd></td>
+   <td><kbd>Click</kbd></td>
+   <td><kbd>Click</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">选择光标下的元素并保持拾取状态</th>
+   <td><kbd>Shift</kbd> + <kbd>Click</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Click</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Click</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="HTML_面板">HTML 面板</h3>
+
+<p>这些快捷只能工作于在<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">查看器的HTML面板</a>。</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">删除选中的节点</th>
+   <td><kbd>Delete</kbd></td>
+   <td><kbd>Delete</kbd></td>
+   <td><kbd>Delete</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">撤销节点删除</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">重做节点删除</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">移动到下一节点（限定展开的节点）</th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">移动到上一节点</th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">移动到树的第一个节点</th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">移动到树的最后一个节点</th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">展开选中的节点</th>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">关闭选中的节点</th>
+   <td><kbd>Left arrow</kbd></td>
+   <td><kbd>Left arrow</kbd></td>
+   <td><kbd>Left arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">（当节点被选中时）开始调试属性</th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在节点内移动到下一属性</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在节点内移动到上一属性</th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">（当属性被选中时）开始编辑属性</th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">隐藏/显示所选属性</th>
+   <td><kbd>H</kbd></td>
+   <td><kbd>H</kbd></td>
+   <td><kbd>H</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">焦点移动到面板的搜索框</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">编辑 HTML</th>
+   <td><kbd>F2</kbd></td>
+   <td><kbd>F2</kbd></td>
+   <td><kbd>F2</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">停止编辑 HTML</th>
+   <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> +<kbd>Enter</kbd></td>
+   <td><kbd>F2</kbd> / <kbd>Cmd</kbd> + <kbd>Return</kbd></td>
+   <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> +<kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">复制所选节点的外层 HTML</th>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">滚动页面至所选节点</th>
+   <td><kbd>S</kbd></td>
+   <td><kbd>S</kbd></td>
+   <td><kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在标记中查找下一个匹配项</th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在标记中查找上一个匹配项</th>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Return</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="面包屑栏">面包屑栏</h3>
+
+<p>这些快捷键只在<a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">面包屑导航栏</a>获得焦点时工作。</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">移动至导航栏的上一个元素</th>
+   <td><kbd>Left arrow</kbd></td>
+   <td><kbd>Left arrow</kbd></td>
+   <td><kbd>Left arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">移动至导航栏的下一个元素</th>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">聚焦于 <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML 面板</a></th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">聚焦于 <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS 面板</a></th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="CSS_面板">CSS 面板</h3>
+
+<p>这些快捷只能工作于在<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">查看器的CSS面板</a>。</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">聚焦于 CSS 面板的搜索框</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">清空搜索框内容</th>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+   <td><kbd>Esc</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">通过属性和值步进</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">通过属性和值步退</th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">开始编辑属性或值（仅规则视图，当这个属性或值被选中但尚未被编辑）</th>
+   <td><kbd>Enter</kbd> 或 <kbd>Space</kbd></td>
+   <td><kbd>Return</kbd> 或 <kbd>Space</kbd></td>
+   <td><kbd>Enter</kbd> 或 <kbd>Space</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在自动补全项中循环增加或减少（仅规则视图，当这个属性或值被编辑时）</th>
+   <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td>
+   <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td>
+   <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">选中当前的自动补全项（仅规则视图，当这个属性或值被编辑时）</th>
+   <td><kbd>Enter</kbd> 或 <kbd>Tab</kbd></td>
+   <td><kbd>Return</kbd> 或 <kbd>Tab</kbd></td>
+   <td><kbd>Enter</kbd> 或 <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">以 1 的量增加所选的值</th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">以 1 的量减少所选的值</th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">以 100 的量增加所选的值</th>
+   <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">以 100 的量减少所选的值</th>
+   <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">以 10 的量增加所选的值</th>
+   <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">以 10 的量减少所选的值</th>
+   <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">以 0.1 的量增加所选的值</th>
+   <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Opt</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">以 0.1 的量减少所选的值</th>
+   <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Opt</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">展示/隐藏更多更多信息（仅计算值视图，当属性被选中时）</th>
+   <td><kbd>Enter</kbd> 或 <kbd>Space</kbd></td>
+   <td><kbd>Return</kbd> 或 <kbd>Space</kbd></td>
+   <td><kbd>Enter</kbd> 或 <kbd>Space</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开关于此属性的 MDN 参考（仅计算值视图，当属性被选中时）</th>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在样式编辑器中打开当前 CSS（仅计算值视图，当属性的更多信息显示且 CSS 文件参考被激活）</th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="调试器">调试器</h2>
+
+<div id="debugger">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">打开调试器</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在当前文件中搜索</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在当前文件中搜索下一个</th>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">通过文件名搜索脚本</th>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在断点继续执行</th>
+   <td><kbd>F8</kbd></td>
+   <td><kbd>F8</kbd> <a href="https://developer.mozilla.org/zh-CN/docs/Tools/Keyboard_shortcuts%24edit#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">步越</th>
+   <td><kbd>F10</kbd></td>
+   <td><kbd>F10</kbd> <a href="https://developer.mozilla.org/zh-CN/docs/Tools/Keyboard_shortcuts%24edit#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F10</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">步进</th>
+   <td><kbd>F11</kbd></td>
+   <td><kbd>F11</kbd> <sup><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Keyboard_shortcuts%24edit#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">步出</th>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd> <sup><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Keyboard_shortcuts%24edit#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="mac-function-key-note">1. 默认情况下，某些快捷键在一些 Mac 电脑上被映射到了特殊功能，比如：改变屏幕亮度或音量。详情查看</a><a href="http://support.apple.com/kb/HT3399">了解如何更改 Mac 上的功能键行为</a>。按住 Function 键来使用一个重映射的快捷键作为标准功能键（所以，打开分析器应该使用<kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd>）。</p>
+</div>
+
+<h2 id="调试器（Firefox_52_之前）">调试器（Firefox 52 之前）</h2>
+
+<div id="debugger">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">打开调试器</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">使用 <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a> 在当前源码搜索</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在当前源码查找下一个</th>
+   <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td>
+   <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td>
+   <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在当前源码查找上一个</th>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">使用 <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a> 在所有源码搜索</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">按照名称搜索脚本</th>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">搜索函数定义</th>
+   <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">当执行停了下来时过滤变量</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">下个断点恢复执行</th>
+   <td><kbd>F8</kbd></td>
+   <td><kbd>F8</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">步越</th>
+   <td><kbd>F10</kbd></td>
+   <td><kbd>F10</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F10</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">步进</th>
+   <td><kbd>F11</kbd></td>
+   <td><kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">步出</th>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在选中行设置一个断点</th>
+   <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在选中行设置一个条件断点</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">添加监视表达式到所选文本</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">使用 <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter </a>跳至所选行</th>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">使用 <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter </a>搜索</th>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">源代码面板</a>，跳转至函数定义</th>
+   <td><kbd>Ctrl</kbd> + <kbd>click </kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>click</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>click </kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="mac-function-key-note">1. 默认情况下，某些快捷键在一些 Mac 电脑上被映射到了特殊功能，比如：改变屏幕亮度或音量。详情查看</a><a href="http://support.apple.com/kb/HT3399">了解如何更改 Mac 上的功能键行为</a>。按住 Function 键来使用一个重映射的快捷键作为标准功能键（所以，打开分析器应该使用<kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd>）。</p>
+</div>
+
+<h2 id="Web_控制台">Web 控制台</h2>
+
+<div id="web-console">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">打开Web控制台</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">在消息显示面板搜索</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开<a href="/zh-CN/docs/Tools/Web_Console#Inspecting_objects">对象查看器面板</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Click</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Click</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Click</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">清除<a href="/zh-CN/docs/Tools/Web_Console#Inspecting_objects">对象查看器面板</a></th>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">焦点到命令行</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">清空输出</th>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="命令行解析器">命令行解析器</h3>
+
+<p>这些快捷键适用于焦点在<a href="/zh-CN/docs/Tools/Web_Console#The_command_line_interpreter">命令行解析器</a>时使用：</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">滚动到控制台输出的最开始（命令行为空时）</th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">滚动到控制台输出的最后（命令行为空时）</th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">向上翻页控制台输出</th>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">向下翻页控制台输出</th>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">通过<a href="/zh-CN/docs/Tools/Web_Console#Command_history">历史命令</a>后退</th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">通过历史命令前进</th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">移到行的开头</th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">移到行的末尾</th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">执行当前表达式</th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">添加新行以便输入多行表达式</th>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Return</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="自动补全弹窗">自动补全弹窗</h3>
+
+<p>这些快捷键适用于<a href="/zh-CN/docs/Tools/Web_Console#Autocomplete">自动补全弹窗</a>出现时使用：</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">选择当前自动补全建议</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">取消自动补全弹窗</th>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">移动到前一个自动补全建议</th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">移动到下一个自动补全建议</th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">上一页补全建议</th>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">下一页补全建议</th>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">回滚到开始的补全建议</th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">滚动到最后的补全建议</th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="样式编辑器">样式编辑器</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">打开样式编辑器</th>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开自动补全弹窗</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="scratchpad">
+<h2 id="代码草稿纸">代码草稿纸</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">打开代码草稿纸</th>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">运行代码草稿纸代码</th>
+   <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">运行代码草稿纸代码，并对返回值使用<a href="/zh-CN/docs/Tools/Web_Console#Inspecting_objects">对象查看器</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">运行代码草稿纸代码，在选中内容后面以注释的形式插入返回的结果</th>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">重新评估当前函数</th>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">重新加载代码，并运行</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">保存当前到文件</th>
+   <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打开已有文件</th>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">创建一个新代码</th>
+   <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>N</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">关闭代码草稿纸</th>
+   <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">打印草稿纸中代码</th>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">显示自动补全建议</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">显示内联文档</th>
+   <td><kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Space</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">显示内联文档</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="eyedropper">
+<h2 id="取色器">取色器</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">命令</th>
+   <th scope="col">Windows</th>
+   <th scope="col">macOS</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">选取当前颜色</th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">解除吸管</th>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">1 像素为单位移动</th>
+   <td><kbd>Arrow keys</kbd></td>
+   <td><kbd>Arrow keys</kbd></td>
+   <td><kbd>Arrow keys</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">10 像素为单位移动</th>
+   <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/zh-cn/tools/memory/basic_operations/index.html b/files/zh-cn/tools/memory/basic_operations/index.html
new file mode 100644
index 0000000000..32b44223e1
--- /dev/null
+++ b/files/zh-cn/tools/memory/basic_operations/index.html
@@ -0,0 +1,64 @@
+---
+title: 基础操作
+slug: Tools/Memory/Basic_operations
+translation_of: Tools/Memory/Basic_operations
+---
+<div>{{ToolsSidebar}}</div><h2 id="打开内存工具">打开内存工具</h2>
+
+<p>在Firefox 50以前，内存工具没有被默认启用。打开开发者工具设置并选择在默认的开发者工具中的内存选项以启用此功能：</p>
+
+<p>{{EmbedYouTube("qi-0CoCOXwc")}}</p>
+
+<p>从Firefox 50开始，内存工具默认启用。</p>
+
+<h2 id="创建快照">创建快照</h2>
+
+<p>点击“拍摄快照”按钮或者点击左侧的照相机图标来创建快照：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13651/memory-1-small.png" style="display: block; height: 244px; margin: 0px auto; width: 900px;"></p>
+
+<p>快照会占据右侧的面板，在左边你可以看到新的快照的入口，包括时间戳，大小和保存或者删除快照的控制：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13653/memory-2-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<h2 id="删除快照">删除快照</h2>
+
+<p>点击"X" 以删除快照:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13655/memory-3-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<h2 id="保存和加载快照">保存和加载快照</h2>
+
+<p>如果你关闭了内存工具，快照将会被忽略。点击保存按钮以保存快照：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13657/memory-4-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<p>你需要选择一个保存位置，将会保存为以 <code>.fxsnapshot</code>为扩展名的文件。</p>
+
+<p>点击导入按钮（一个向上箭头和正方形组合的图标）来导入一个已有的 <code>.fxsnapshot</code> 文件（在Firefox 49之前有一个名为导入的标签）：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13659/memory-5-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<p>你可以在硬盘上找到这个快照文件。</p>
+
+<h2 id="比较快照">比较快照</h2>
+
+<p>从Firefox45开始，你可以比较两个堆快照。这个对比会向你展示在两个快照之间内存分配和释放的不同。</p>
+
+<p>你可以点击快照按钮右边的按钮来创建对比 （在Firefox 47以前它是一个"+/-"图标）：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13661/memory-6-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
+
+<p>你也可以选择一个基线来进行快照对比。工具将会向你展示两个快照的区别。</p>
+
+<p>{{EmbedYouTube("3Ow-mdK6b2M")}}</p>
+
+<div class="note">
+<p>对比的时候不能使用关联性和树状图。</p>
+</div>
+
+<h2 id="记录调用堆栈">记录调用堆栈</h2>
+
+<p>内存工具可以告诉你你的代码里哪里在分配内存。然而，记录这些信息需要运行时进行 ，所以如果你想查看块中种内存调用的位置，你必须让你的工具在内存分配结束之前记录内存调用。选择“记录调用堆栈”以启用此功能（在Firefox 49之前叫做 "记录分配堆栈"）：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13663/memory-7-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p>
diff --git a/files/zh-cn/tools/memory/dom_allocation_example/index.html b/files/zh-cn/tools/memory/dom_allocation_example/index.html
new file mode 100644
index 0000000000..29c92782ef
--- /dev/null
+++ b/files/zh-cn/tools/memory/dom_allocation_example/index.html
@@ -0,0 +1,60 @@
+---
+title: DOM allocation example
+slug: Tools/Memory/DOM_allocation_example
+tags:
+  - 内存
+  - 开发者工具
+translation_of: Tools/Memory/DOM_allocation_example
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>这篇文章描述了一个简单的 Web 页面，它被用于阐述内存工具的一些特性。</p>
+
+<p>你可以在这个网页中试试：<a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a>。</p>
+
+<p>它仅仅包含了一个创建大量 DOM 节点的脚本：</p>
+
+<pre class="brush: js">var toolbarButtonCount = 20;
+var toolbarCount = 200;
+
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function createToolbarButton() {
+  var toolbarButton = document.createElement("span");
+  toolbarButton.classList.add("toolbarbutton");
+  // stop Spidermonkey from sharing instances
+  toolbarButton[getRandomInt(0,5000)] = "foo";
+  return toolbarButton;
+}
+
+function createToolbar() {
+  var toolbar = document.createElement("div");
+  // stop Spidermonkey from sharing instances
+  toolbar[getRandomInt(0,5000)] = "foo";
+  for (var i = 0; i &lt; toolbarButtonCount; i++) {
+    var toolbarButton = createToolbarButton();
+    toolbar.appendChild(toolbarButton);
+  }
+  return toolbar;
+}
+
+function createToolbars() {
+  var container = document.getElementById("container");
+  for (var i = 0; i &lt; toolbarCount; i++) {
+    var toolbar = createToolbar();
+    container.appendChild(toolbar);
+  }
+}
+
+createToolbars();
+</pre>
+
+<p>一段表示代码工作流程的伪代码：</p>
+
+<pre>createToolbars()
+    -&gt; createToolbar() // 调用 200 次, 每次创建一个 DIV 元素
+       -&gt; createToolbarButton() // 每次调用 createToolbar() 时，调用 20 次，每次创建一个 SPAN 元素</pre>
+
+<p>它总共创建了 200 个 <code><a href="/en-US/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> 对象和 4000 个 <code><a href="/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> 对象。</p>
diff --git a/files/zh-cn/tools/memory/index.html b/files/zh-cn/tools/memory/index.html
new file mode 100644
index 0000000000..85e7ebe131
--- /dev/null
+++ b/files/zh-cn/tools/memory/index.html
@@ -0,0 +1,60 @@
+---
+title: 内存
+slug: Tools/Memory
+translation_of: Tools/Memory
+---
+<div>{{ToolsSidebar}}</div><p>内存工具可以帮助你获取当前标签页内存堆的快照，它可以提供每个对象在内存中的使用以及在你的代码中哪里分配了内存的堆视图。</p>
+
+<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p>
+
+<hr>
+<h3 id="基础">基础</h3>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#打开内存工具">打开内存工具</a></li>
+ <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#创建快照">创建快照</a></li>
+ <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#比较快照">比较快照</a></li>
+ <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#删除快照">删除快照</a></li>
+ <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#保存和加载快照">保存和加载快照</a></li>
+ <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#记录调用堆栈">记录调用堆栈</a></li>
+</ul>
+</div>
+
+<hr>
+<h3 id="分析快照">分析快照</h3>
+
+<div class="geckoVersionNote">
+<p>树状图是在Firefox 48中新增的，关联性是在Firefox 46中新增的。</p>
+</div>
+
+<p>创建一张快照后内存工具会提供以下三种视图：</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Memory/Tree_Map_view">树状图视图</a> 以树形结构展示内存使用情况。</li>
+ <li><a href="/zh-CN/docs/Tools/Memory/Aggregate_view">聚合视图</a> 以已分配类型的表格的形式展示内存使用情况。</li>
+ <li><a href="/zh-CN/docs/Tools/Memory/Dominators_view">关联性视图</a> 展示对象分配的大小，即对象的大小加上通过引用的其他对象的大小。</li>
+</ul>
+
+<p>如果你选择记录快照的分配栈，聚合视图和关联性视图会准确列出在你代码中哪里进行了内存分配。</p>
+
+<hr>
+<h3 id="概念">概念</h3>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Memory/Dominators">关联性</a></li>
+</ul>
+</div>
+
+<hr>
+<h3 id="示例页面">示例页面</h3>
+
+<p>内存工具示例</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Memory/Monster_example">Monster示例</a></li>
+ <li><a href="/zh-CN/docs/Tools/Memory/DOM_allocation_example">DOM分配示例</a></li>
+</ul>
+</div>
diff --git a/files/zh-cn/tools/migrating_from_firebug/index.html b/files/zh-cn/tools/migrating_from_firebug/index.html
new file mode 100644
index 0000000000..493fd21fe9
--- /dev/null
+++ b/files/zh-cn/tools/migrating_from_firebug/index.html
@@ -0,0 +1,266 @@
+---
+title: Firebug迁移
+slug: Tools/Migrating_from_Firebug
+translation_of: Tools/Migrating_from_Firebug
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">当开发人员想从 Firebug 迁移到火狐开发者工具中的时候，你可能想知道你喜欢的 Firebug 特性有哪些还存在于开发者工具中。下面的列表目标是帮助你从开发者工具中找出它们。</p>
+
+<hr>
+<div class="column-container">
+<div class="column-third"></div>
+
+<div class="column-third">
+<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
+
+<p style="text-align: center;">要使用最新的开发者工具和特性，请下载火狐开发者版本。</p>
+
+<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="">下载火狐开发者版本</a></p>
+</div>
+
+<div class="column-third"></div>
+</div>
+
+<hr>
+<h2 id="概述">概述</h2>
+
+<h3 id="激活">激活</h3>
+
+<p>Firebug 是靠基于遵从同一规则的网址来激活的. 这意味着当你在同样的来源网址却在不同的tab打开时, Firebug 会自动打开。当你在同一个 tab 打开不同的网址时，它自动关闭。另一方面开发者工具的激活是基于 tab 的。这意味着当你在一个 tab 打开开发者工具时，就算你在不同的网站上切换，它也会一直开着。当你切换到另外的 tab，它们是关掉的。</p>
+
+<h3 id="打开工具">打开工具</h3>
+
+<p>按 F12 打开 Firebug. 也可以按 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>C</kbd> 打开并使用它查看元素. 开发者工具使用相同的快捷键, 同时也提供了<a href="https://developer.mozilla.org/zh-CN/docs/Tools/Keyboard_shortcuts">键盘快捷键</a>。例如， <a href="https://developer.mozilla.org/zh-CN/docs/Tools/Network_Monitor">网络监视器</a> 可以使用 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Q</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>Q</kbd> 打开，<a href="https://developer.mozilla.org/zh-CN/docs/Tools/Web_Console">Web 控制台</a> 使用 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>K</kbd> ，调试器 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>S</kbd>.</p>
+
+<h2 id="Web_控制台">Web 控制台</h2>
+
+<p><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Web_Console">Web 控制台</a> 等价于 Firebug 的 <a href="https://getfirebug.com/wiki/index.php/Console_Panel">Console panel</a> . 它显示与网页相关联的日志信息，并允许您通过它的<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter">命令行</a>执行 JavaScript 表达式。两者间的表示有些不同，它们可能{{bug(1269730)}}在中被改变。</p>
+
+<h3 id="日志信息筛选">日志信息筛选</h3>
+
+<p>Firebug 在工具栏上使用 <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Options_Menu">选项菜单</a> 和 <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Filter_buttons">过滤按钮 </a>来筛选日志信息。 开发者工具提供了类似的功能 <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filter buttons inside its toolbar</a> — 整合在同一个地方.</p>
+
+<h3 id="命令行_API">命令行 API</h3>
+
+<p>为了方便，Firebug 在<a href="https://getfirebug.com/wiki/index.php/Command_Line_API">命令行 API</a>中为您提供了一些特殊函数，开发者工具命令行中提供了一些<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">常规的函数</a>，与 Firebug 相比可能多一些新的函数缺失一些原有的函数。</p>
+
+<h3 id="控制台_API">控制台 API</h3>
+
+<p>为了从页面上打印一些东西到控制台中，Firebug 提供了<a href="https://getfirebug.com/wiki/index.php/Console_API">控制台 API </a>供页面调用。开发者工具提供<a href="https://developer.mozilla.org/en-US/docs/Web/API/console">相同的 API</a>，所以你的所有 <code>console.*</code> 语法都可以继续工作。</p>
+
+<h3 id="日志持久化">日志持久化</h3>
+
+<p>在 Firebug 中你可以通过点击页面导航工具栏中的<a href="https://getfirebug.com/wiki/index.php/Console_Panel#Persist">持久化按钮</a>去保存和重新加载日志信息。在开发者工具中可以在工具箱的设置选项卡中设置 <em><a href="/en-US/docs/Tools/Settings#Common_preferences">Enable persistent logs</a> 选项。</em></p>
+
+<h3 id="服务端日志">服务端日志</h3>
+
+<p>Firebug 扩展比如 <a href="https://addons.mozilla.org/en-US/firefox/addon/firephp/">FirePHP</a> 允许把服务端的日志信息打印到 Firebug 控制台。这个功能也已经<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Server">整合到开发者工具</a>中使用 <a href="https://craig.is/writing/chrome-logger">ChromeLogger</a> 协议并且不需要安装任何扩展。</p>
+
+<h3 id="历史命令">历史命令</h3>
+
+<p>Firebug 历史命令访问通过命令行上的一个按钮，在<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history">开发者工具命令行</a>中通过点按 <kbd>↑</kbd>/<kbd>↓</kbd><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history"> </a>访问。</p>
+
+<h3 id="对象属性检查">对象属性检查</h3>
+
+<p>通过点击控制面板中输出的对象你可以在 <a href="https://getfirebug.com/wiki/index.php/DOM_Panel">DOM 选项卡</a>中查看对象的属性和方法。在火狐开发者工具你一样可以查看对象信息。不同的是它在 <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties">Web 控制面板</a>中的一个侧边栏展示方法和属性信息。</p>
+
+<h3 id="显示网络请求">显示网络请求</h3>
+
+<p>Firebug 控制面板允许打印{{Glossary("AJAX")}} 请求信息 (aka {{Glossary("XMLHttpRequest", "XMLHttpRequests")}})。开发者工具的 Web 控制面板中通过网络-&gt;XHR 也可以访问。而且，开发者工具 Web 控制面板甚至允许你通过网络&gt;日志显示所有其他的网络请求。</p>
+
+<h3 id="浏览_JSON_和_XML_结构数据">浏览 JSON 和 XML 结构数据</h3>
+
+<p>当展开控制面板中的一个请求时，Firebug 打开一个特殊标签页查看{{Glossary("AJAX")}}请求响应的 JSON 数据和 XML 数据。开发者工具 Web 控制台直接带响应标签页展示这些结构数据。</p>
+
+<h3 id="多行命令行">多行命令行</h3>
+
+<p>Firebug 控制台有一个多行命令的<a href="https://getfirebug.com/wiki/index.php/Command_Editor">命令编辑器</a>。开发者工具没有这样的命令编辑器(在{{bug(1133849)}}中提到)，但是又一个单独的工具 <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>，可以添加到工具箱的面板中或者通过火狐菜单&gt; <em>Developer</em> &gt; <em>Scratchpad</em> 或者 <kbd>Shift</kbd> + <kbd>F4</kbd>在独立的窗口打开。而且普通的命令行识别到一个还没有结束的命令的时候能够智能的添加换行，比如：你输入了 <code>document.</code> 然后输入了回车。你也可以手动的输入 <kbd>Shift</kbd> + <kbd>Enter</kbd>来添加换行。</p>
+
+<h3 id="响应预览">响应预览</h3>
+
+<p>Firebug 控制面板的一个网络请求日志展开的时候会有一个预览标签页。开发者工具Web控制面板会展示预览在响应标签页。现在会丢失 HTML、XML 和 SVG 预览，详见{{bug(1247392)}} and {{bug(1262796)}}，然而，当你点击请求URL后切换到 <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>(网络监控)，会有一个预览页面。</p>
+
+<h2 id="查看器">查看器</h2>
+
+<p>Firebug 拥有一个 <a href="https://getfirebug.com/wiki/index.php/HTML_Panel">HTML 面板 </a>，它允许编辑与之相关的 HTML/XML/SVG 和 CSS。DevTools 中的这个功能由<a href="/en-US/docs/Tools/Page_Inspector">页面查看器</a>提供。</p>
+
+<h3 id="编辑_HTML">编辑 HTML</h3>
+
+<p>页面查看其中的标签属性以及内容都可以像在 Firebug 中那样行内编辑。它甚至还允许编辑标签名。</p>
+
+<p>你还可以直接编辑 HTML 。在 Firebug 中你右键单击那个节点然后在上下文菜单中选择 <a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Edit">编辑  HTML... </a>。在 DevTools 中这个选项也在上下文菜单之中。这个选项叫做 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Editing_HTML_2">作为 HTML 编辑</a>。变化的即时预览当前仍然缺失，这被追踪在 {{bug(1067318)}} 和 {{bug(815464)}} 中。</p>
+
+<h3 id="复制_HTML_和相关信息">复制 HTML 和相关信息</h3>
+
+<p>Firebug's HTML panel allows to copy the inner and outer HTML of an element as well as the CSS and XPath to it via the context menu of an element. The Page Inspector provides the same functionality except copying XPaths. This is covered by {{bug(987877)}}.</p>
+
+<p>Firebug 的 HTML 面板允许通过某元素的上下文菜单来复制它内部和外部的 HTML代码以及CSS 和 XPath 等。页面查看器提供相同的功能，除了 XPaths 的复制。这个问题由 {{bug(987877)}} 覆盖。</p>
+
+<h3 id="Edit_CSS">Edit CSS</h3>
+
+<p>Both tools allow to view and edit the CSS rules related to the element selected within the node view in a similar way. Firebug has a <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel">Style side panel</a> for this, the DevTools have a <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Rules side panel</a>.</p>
+
+<p>In Firebug you add new rules by right-clicking and choosing <em><a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Context_Menu">Add Rule...</a></em> from the context menu. The DevTools also have a context menu option for that named <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Add_rules"><em>Add New Rule</em> and additionally have a + button</a> within the Rules panel's toolbar to create new rules.</p>
+
+<p>To edit element styles, i.e. the CSS properties of the {{htmlattrxref("style")}} attribute of an element, in Firebug you have to right-click into the Style side panel and choose <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Context_Menu">Edit Element Style...</a> from the context menu. The DevTools display an <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#element_rule">element {} rule</a> for this purpose, which requires a single click into it to start editing the properties.</p>
+
+<h3 id="Auto-completion_of_CSS">Auto-completion of CSS</h3>
+
+<p>As in Firebug, the Rules view provides an auto-completion for the CSS property names and their values. A few property values are not auto-completed yet, which is tracked in {{bug(1337918)}}.</p>
+
+<h3 id="Copy_paste_CSS">Copy &amp; paste CSS</h3>
+
+<p>Firebug's Style side panel as well as the DevTools' Rules side panel provide options within their context menus to copy the CSS rule or the style declarations. The DevTools additionally provide an option to copy the selector of a rule and copy disabled property declarations as commented out. They are missing the option to copy the whole style declaration, though this can be achieved by selecting them within the panel and copying the selection by pressing <kbd>Ctrl</kbd>+<kbd>C</kbd> or via the context menu.</p>
+
+<p>The Rules side panel of the DevTools is smarter when it comes to pasting CSS into it. You can paste whole style declarations into an existing rule property declarations which are commented out are automatically disabled.</p>
+
+<h3 id="Toggle_pseudo-classes">Toggle pseudo-classes</h3>
+
+<p>Firebug lets you toggle the CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> {{cssxref(":hover")}}, {{cssxref(":active")}} and {{cssxref(":focus")}} for an element via the <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Options_Menu">options menu of the Style side panel</a>. In the DevTools there are two ways to do the same. The first one is to toggle them via the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Setting_hover_active_focus">pseudo-class panel within the Rules side panel</a>. The second one is to right-click and element within the node view and toggle the pseudo-classes via the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Context_menu_reference">context menu</a>.</p>
+
+<h3 id="Examine_CSS_shorthand_properties">Examine CSS shorthand properties</h3>
+
+<p>CSS <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand properties</a> can be split into their related longhand properties by setting the option <em><a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Options_Menu">Expand Shorthand Properties</a></em> within the Style side panel. The DevTools' Rules panel is a bit smarter and allows you to expand individual shorthand properties by clicking the twisty besides them.</p>
+
+<h3 id="Only_show_applied_styles">Only show applied styles</h3>
+
+<p>The <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel#Options_Menu">Style side panel in Firebug has an option</a> to display only the properties of a CSS rule that are applied to the selected element and hide all overwritten styles. There is no such feature in the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Rules side panel</a> of the DevTools, but it is requested in {{bug(1335327)}}.</p>
+
+<h3 id="Inspect_box_model">Inspect box model</h3>
+
+<p>In Firebug the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">box model</a> can be inspected via the <a href="https://getfirebug.com/wiki/index.php/Layout_Side_Panel">Layout side panel</a>. In the DevTools the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">box model is part of the Computed side panel</a>. Both tools highlight the different parts of the box model within the page when hovering them in the box model view. Also, both tools allow you to edit the different values inline via a click on them.</p>
+
+<h3 id="Inspect_computed_styles">Inspect computed styles</h3>
+
+<p>The computed values of CSS properties are displayed within the DevTools' <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed side panel</a> like within Firebug's <a href="https://getfirebug.com/wiki/index.php/Computed_Side_Panel">Computed side panel</a>. The difference is that in the DevTools the properties are always listed alphabetically and not grouped (see {{bug(977128)}}) and there is no option to hide the Mozilla specific styles, therefore there is an input field allowing to filter the properties.</p>
+
+<h3 id="Inspect_events">Inspect events</h3>
+
+<p>Events assigned to an element are displayed in the <a href="https://getfirebug.com/wiki/index.php/Events_Side_Panel">Events side panel</a> in Firebug. In the DevTools they are shown when clicking the small 'ev' icon besides an element within the node view. Both tools allow to display wrapped event listeners (e.g. listeners wrapped in jQuery functions). To improve the UI of the DevTools, there is also a request to add an Events side panel to them like the one in Firebug (see {{bug(1226640)}}).</p>
+
+<h3 id="Stop_script_execution_on_DOM_mutation">Stop script execution on DOM mutation</h3>
+
+<p>In Firebug you can break on DOM mutations, that means that when an element is changed, the script execution is stopped at the related line within the JavaScript file, which caused the change. This feature can globally be enabled via the <a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Break_On_Mutate"><em>Break On Mutate</em> button</a>, or <a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Context_Menu">individually for each element</a> and for different types of changes like attribute changes, content changes or element removal. Unfortunately, the DevTools do not have this feature yet (see {{bug(1004678)}}). To stop the script execution there, you need to set a breakpoint on the line with the modification within the <a href="/en-US/docs/Tools/Debugger">Debugger panel</a>.</p>
+
+<h3 id="Search_for_elements_via_CSS_selectors_or_XPaths">Search for elements via CSS selectors or XPaths</h3>
+
+<p>Firebug allows to <a href="https://getfirebug.com/wiki/index.php/HTML_Panel#Search">search for elements within the HTML panel via CSS selectors or XPaths</a>. Also the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">DevTools' Inspector panel allows to search for CSS selectors</a>. It even displays a list with matching IDs or classes. Searching by XPaths is not supported though (see {{bug(963933)}}.</p>
+
+<h2 id="调试器">调试器</h2>
+
+<p>What's the <a href="https://getfirebug.com/wiki/index.php/Script_Panel">Script panel</a> in Firebug, is the <a href="/en-US/docs/Tools/Debugger">Debugger panel</a> in the DevTools. Both allow you to debug JavaScript code executed on a website.</p>
+
+<h3 id="Switch_between_sources">Switch between sources</h3>
+
+<p>Firebug has a <a href="https://getfirebug.com/wiki/index.php/Script_Panel#Script_Location_Menu">Script Location Menu</a> listing all JavaScript sources related to the website. Those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, <code>eval()</code>, <code>new Function()</code>, etc.). In the DevTools' Debugger panel the scripts are listed at the left side within the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Sources side panel</a>. Dynamically generated scripts are only listed there when they are <a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">named via a <code>//# sourceURL</code> comment</a>.</p>
+
+<h3 id="Managing_breakpoints">Managing breakpoints</h3>
+
+<p>In Firebug you can set different types of breakpoints, which are all listed within the <a href="https://getfirebug.com/wiki/index.php/Breakpoints_Side_Panel">Breakpoints side panel</a>. In the DevTools the breakpoints are shown below each script source within the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Sources side panel</a>. Those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. They do currently only allow to set script breakpoints. XHR, DOM, Cookie and Error breakpoints are not supported yet (see {{bug(821610)}}, {{bug(1004678)}}, {{bug(895893)}} and {{bug(1165010)}}). While there are no breakpoints for single JavaScript errors, there is a setting <em>Pause on Exceptions</em> within the <a href="/en-US/docs/Tools/Debugger/Settings">Debugger panel options</a>.</p>
+
+<h3 id="Step_through_code">Step through code</h3>
+
+<p>Once the script execution is stopped, you can step through the code using the Continue (<kbd>F8</kbd>), Step Over (<kbd>F10</kbd>), Step Into (<kbd>F11</kbd>) and Step Out (<kbd>Shift</kbd>+<kbd>F11</kbd>) options. They work the same in both tools.</p>
+
+<h3 id="Examine_call_stack">Examine call stack</h3>
+
+<p>When the script execution is paused, Firebug displays the function call stack within its <a href="https://getfirebug.com/wiki/index.php/Stack_Side_Panel">Stack side panel</a>. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Call_stack_pane">Call Stack side panel</a>. To see the call parameters in the DevTools, you need to have a look at the <a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables#Examine_variables">Variables side panel</a>.</p>
+
+<h3 id="Examine_variables">Examine variables</h3>
+
+<p>The <a href="https://getfirebug.com/wiki/index.php/Watch_Side_Panel">Watch side panel</a> in Firebug displays the {{domxref("window")}} object (the global scope) by default. With the script execution halted it shows the different variable scopes available within the current call stack frame. Furthermore, it allows you to add and manipulate watch expressions. The DevTools have a <a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">Variables side panel</a>, which works basically the same. The main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the <code>window</code> object. Though you can inspect that object either via the <a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM property viewer</a> or via the <a href="/en-US/docs/Tools/Web_Console">Web Console</a>.</p>
+
+<h2 id="样式编辑器">样式编辑器</h2>
+
+<p>The <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug's <a href="https://getfirebug.com/wiki/index.php/CSS_Panel">CSS panel</a> does it. In addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. It also allows you to toggle individual style sheets.</p>
+
+<h3 id="Switch_between_sources_2">Switch between sources</h3>
+
+<p>The CSS panel of Firebug allows to switch between different CSS sources using the <a href="https://getfirebug.com/wiki/index.php/CSS_Panel#CSS_Location_Menu">CSS Location Menu</a>. The Style Editor has a <a href="/en-US/docs/Tools/Style_Editor#The_style_sheet_pane">sidebar</a> for this purpose.</p>
+
+<h3 id="Edit_a_style_sheet">Edit a style sheet</h3>
+
+<p>Firebug's <a href="https://getfirebug.com/wiki/index.php/CSS_Panel">CSS panel</a> offers three different ways for editing style sheets. The default one is to edit them inline like within the <a href="https://getfirebug.com/wiki/index.php/Style_Side_Panel">Style side panel</a>. Furthermore it has a <a href="https://getfirebug.com/wiki/index.php/CSS_Panel#Edit_Button">Source and a Live Edit mode</a>, which allow to edit the selected style sheet like within a text editor. The Style Editor of the DevTools only has one way to edit style sheets, which corresponds to Firebug's Live Edit mode.</p>
+
+<h3 id="Try_out_CSS_selectors">Try out CSS selectors</h3>
+
+<p>Firebug's Selectors side panel provides a way to validate a CSS selector. It lists all elements matching the entered selector. The DevTools don't have this feature yet, but it's requested in {{bug(1323746)}}.</p>
+
+<h3 id="Searching_within_the_style_sheets">Searching within the style sheets</h3>
+
+<p>Firebug allows to search within the style sheets via the search field. The Style Editor in the DevTools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see {{bug(889571)}}) and also not via a regular expression (see {{bug(1362030)}}.</p>
+
+<h2 id="性能工具">性能工具</h2>
+
+<p>Firebug allows to profile JavaScript performance via the <a href="https://getfirebug.com/wiki/index.php/Console_Panel#Profile">"Profile" button within the Console panel</a> or the <code><a href="https://getfirebug.com/wiki/index.php/Console.profile">console.profile()</a></code> and <code><a href="https://getfirebug.com/wiki/index.php/Console.profileEnd">console.profileEnd()</a></code> commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via <code><a href="/en-US/docs/Web/API/Console/profile">console.profile()</a></code> and <code><a href="/en-US/docs/Web/API/Console/profileEnd">console.profileEnd()</a></code> like in Firebug or via the "Start Recording Performance" button in the <a href="/en-US/docs/Tools/Performance">Performance Tool</a>. The output of the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> is the one that comes nearest to the output in Firebug, but the Performance panel provides much more information than just the JavaScript performance. E.g. it also provides information about HTML parsing or layout.</p>
+
+<p>This is the part where Firebug and the DevTools differ the most, because the outputs are completely different. While Firebug focuses on JavaScript performance and provides detailed information about JavaScript function calls during the profiling session, the Performance Tool in the DevTools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding JavaScript function calls.</p>
+
+<h3 id="View_JavaScript_call_performance">View JavaScript call performance</h3>
+
+<p>What comes nearest to Firebug's <a href="https://getfirebug.com/wiki/index.php/Profiler">profiler output</a> is the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree view</a> in the Performance panel. Like in Firebug it lists the total execution time of each function call under <em>Total Time</em> as well as the number of calls under <em>Samples</em>, the time spent within the function under <em>Self Time</em> and the related percentages in reference to the total execution time.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The times and percentages listed in the DevTools' Call Tree view is not equivalent to the ones shown in Firebug, because it uses different APIs sampling the execution of the JavaScript code.</p>
+</div>
+
+<h3 id="Jump_to_function_declaration">Jump to function declaration</h3>
+
+<p>Like in Firebug's profiler output the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree view</a> of the DevTools' Performance Tool allows to jump to the line of code where the called JavaScript function is defined. In Firebug the source link to the function is located at the right side of the <a href="https://getfirebug.com/wiki/index.php/Console_Panel">Console panel</a> output while within the DevTools the link is placed on the right side within the Call Tree View.</p>
+
+<h2 id="网络监视器">网络监视器</h2>
+
+<p>To monitor network requests Firebug provides a <a href="https://getfirebug.com/wiki/index.php/Net_Panel">Net panel</a>. The Firefox DevTools allow to inspect the network traffic using the <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>. Both tools provide similar information including a timeline showing the request and response times of the network requests.</p>
+
+<h3 id="Inspect_request_information">Inspect request information</h3>
+
+<p>Both Firebug and the Firefox DevTools' Network Monitor allow you to inspect the information about a request by clicking on it. The only difference is that Firebug shows the information below the request while the Network Monitor displays it within a side panel.</p>
+
+<p>In both tools there are different tabs containing different kinds of information for the selected request. They contain a <em>Headers</em>, <em>Params</em>, <em>Response</em> and <em>Cookies</em> panel. A preview of the response is shown within specifically named panels like <em>HTML</em>. The Network Monitor has a <em>Preview</em> panel for this purpose. It doesn't provide information about the cached data yet (see {{bug(859051)}}), but provides a <em>Security</em> tab in addition to Firebug's information and a <em>Timings</em> tab showing detailed information about the network timings.</p>
+
+<h3 id="View_request_timings">View request timings</h3>
+
+<p>Firebug offers detailed information about the network timings related to a request by hovering the <a href="https://getfirebug.com/wiki/index.php/Net_Panel#Timeline">Timeline column within its Net panel</a>. The Network Monitor shows this information within a <a href="/en-US/docs/Tools/Network_Monitor#Timings">Timings side panel</a> when you select a request.</p>
+
+<h3 id="View_remote_address">View remote address</h3>
+
+<p>The remote address of a request is shown within the Remote IP column within Firebug. In the Network Monitor the address is shown at <em>Remote Address</em> in the <em>Headers</em> tab when a request is selected.</p>
+
+<h3 id="Search_within_requests">Search within requests</h3>
+
+<p>The search field within Firebug allows to search within the requests. The search field in the Firefox DevTools filters the requests by the entered string.</p>
+
+<p>Firebug allowed to search within the response body of the network requests by checking <em>Response Bodies</em> within its <a href="https://getfirebug.com/wiki/index.php/Search_Field#Options">search field options</a>. This feature is not available yet within the Network Monitor, but it's requested in {{bug(1334408)}}. While response bodies can't be searched yet, the Network Monitor allows to<a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_properties"> filter by different request properties</a>.</p>
+
+<h2 id="存储查看器">存储查看器</h2>
+
+<p>The <a href="https://getfirebug.com/wiki/index.php/Cookies_Panel">Cookies panel</a> in Firebug displays information related to the cookies created by a page and allows to manipulate the information they store. Within the DevTools this functionality is located within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>. In contrast to Firebug the Storage Inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases.</p>
+
+<h3 id="Inspect_cookies">Inspect cookies</h3>
+
+<p>All cookies related to a website are listed inside the <a href="https://getfirebug.com/wiki/index.php/Cookies_Panel">Cookies panel</a> in Firebug. Inside the DevTools, the cookies are grouped by domain under the Cookies section within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>. Both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration date and whether the cookie is HTTP-only.</p>
+
+<p>The DevTools don't show by default whether a cookie is secure, but this can be enabled by right-clicking the table header and checking <em>Secure</em> from the context menu. Additionally, the DevTools allow to display the creation date of a cookie as well as when it was last accessed and whether it is host-only.</p>
+
+<h3 id="Edit_cookies">Edit cookies</h3>
+
+<p>To edit a cookie in Firebug you have to right-click the cookie and choose <em>Edit</em> from the context menu. Then a dialog pops up allowing you to edit the data of the cookie and save it. Inside the Storage Inspector you just have to double-click the data you want to edit. Then an inline editor allows you to edit the value.</p>
+
+<h3 id="Delete_cookies">Delete cookies</h3>
+
+<p>Firebug's Cookies panel allows you to delete all cookies of a website via the menu option <em><a href="https://getfirebug.com/wiki/index.php/Cookies_Panel#Cookies">Cookies</a></em> &gt; <em>Remove Cookies</em> or by pressing <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd>. It also allows you to only remove session cookies via <em>Cookies</em> &gt; <em>Remove Session Cookies</em> and to remove single cookies by right-clicking them and choosing <em>Delete</em>. The DevTools Storage Inspector allows to remove all cookies and a single one by right-clicking on a cookie and choosing <em>Delete All</em> resp. <em>Delete "&lt;cookie name&gt;"</em>. Additionally, it allows to delete all cookies from a specific domain via the context menu option <em>Delete All From "&lt;domain name&gt;"</em>. It currently does not allow to only delete session cookies (see {{bug(1336934)}}).</p>
+
+<h2 id="开发者工具条">开发者工具条</h2>
+
+<h3 id="Display_of_error_count">Display of error count</h3>
+
+<p>When there are JavaScript errors on a page, the <a href="https://getfirebug.com/wiki/index.php/Start_Button#Error_info">Firebug Start Button shows a badge</a> with their number. The DevTools show the number of errors in the <a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a>.</p>
+
+<h3 id="Command_API">Command API</h3>
+
+<p>Firebug offers a great variety of <a href="https://getfirebug.com/wiki/index.php/Command_Line_API">commands</a>, which can be executed within its command line. The Developer Toolbar also provides an <a href="/en-US/docs/Tools/GCLI#Commands">API with a lot of different commands</a> to control the DevTools and execute different tasks.</p>
+
+<h2 id="反馈">反馈</h2>
+
+<p>We are always happy to respond to feedback and questions. If you have any queries or points of view, feel free to share them on our <a href="https://discourse.mozilla.org/c/devtools">DevTools Discourse Forum</a>.</p>
diff --git a/files/zh-cn/tools/network_monitor/index.html b/files/zh-cn/tools/network_monitor/index.html
new file mode 100644
index 0000000000..64ae2463c3
--- /dev/null
+++ b/files/zh-cn/tools/network_monitor/index.html
@@ -0,0 +1,187 @@
+---
+title: Network Monitor
+slug: Tools/Network_Monitor
+translation_of: Tools/Network_Monitor
+---
+<div>{{ToolsSidebar}}</div><p>网络监视器显示所有火狐浏览器发送的网络请求（例如：加载网页或者<a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>请求），每个请求耗费的时间，和每个请求的详细信息。在"Web Developer"菜单选择"Network"选项，打开网络监视器(对于MAC的火狐浏览器来说, 在"Tools"的子菜单),或者打开开发工具盒子,点击"Network"标签。</p>
+
+<p>网络监视器显示在浏览器的底部。重新加载页面查看发送的请求信息：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13535/1-new-overview-small.png" style="display: block; height: 831px; margin-left: auto; margin-right: auto; width: 1100px;"></p>
+
+<h2 id="UI_overview">UI overview</h2>
+
+<p>UI分成了四个主要部分:</p>
+
+<ul>
+ <li>主屏幕包含 <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">工具栏</a>, <a href="/en-US/docs/Tools/Network_Monitor#Network_request_list">网络请求列表</a>, <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">网络请求面板</a>:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13266/nm-pieces.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 962px;"></p>
+
+<h2 id="Network_request_list_网络请求列表">Network request list 网络请求列表</h2>
+
+<p>默认地，网络监视器显示一个页面加载过程中发送的所有网络请求。每个网络请求单独一行显示。<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/13537/5-new-request-list-new.png" style="display: block; height: 257px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>默认地，当跳转到其他页面或者刷新当前页面， 当前的网络监视器信息会被清除。从Firefox31版本开始，在开发工具的<a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Settings</a>设置中勾上"Enable persistent logs"就可以修改网络监视器的上述默认行为。</p>
+
+<h3 id="Network_request_fields_网络请求显示属性">Network request fields 网络请求显示属性</h3>
+
+<p>每行显示：</p>
+
+<ul>
+ <li><strong>√</strong>: 响应结果的状态码。被显示为一个颜色图标：绿色表示成功(2xx的状态码)，橙色表示重定向(3XX),红色表示错误(4XX和5XX).从Firefox 30开始,在图标的后面显示状态码。</li>
+ <li><strong>Method</strong>: HTTP请求方法</li>
+ <li><strong>File</strong>: 请求的URL</li>
+ <li><strong>Domain</strong>: 请求的域名</li>
+ <li><strong>Type</strong>: 响应体的类型</li>
+ <li><strong>Size</strong>: 响应报文体的大小</li>
+</ul>
+
+<p>The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.</p>
+
+<p>From Firefox 30 onwards, if the file is an image, the row includes a thumbnail of the image, and hovering over the filename shows a preview in a tooltip:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7403/nm-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Timeline">Timeline</h3>
+
+<p>The request list also displays a timeline for the different parts of each request. Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. For more details on the color-coding used here, see the section on the <a href="/en-US/docs/Tools/Network_Monitor#Timings">Timings</a> page.</p>
+
+<h3 id="Filtering_by_content_type">Filtering by content type</h3>
+
+<p>At the bottom of the window a row of buttons enables you to filter requests by the content type of the response:<img alt="" src="https://mdn.mozillademos.org/files/7395/nm-filter-by-type.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>At the far right of this row is a button labeled "Clear": as you might guess, this enables you to clear the network request list.</p>
+
+<h3 id="Context_menu_上下文菜单">Context menu 上下文菜单</h3>
+
+<p>Context-clicking on a row in the list displays a context menu with the following options:</p>
+
+<ul>
+ <li>Open in New Tab浏览器新打开一个窗口</li>
+ <li>Copy URL拷贝URL</li>
+ <li>Copy as cURL (only from Firefox 31 onwards)</li>
+ <li>Copy Image as Data URI (only for images)</li>
+ <li>Edit and Resend 编辑和重发</li>
+ <li>Start <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page 开始对当前页面进行性能分析</li>
+</ul>
+
+<h4 id="Edit_and_Resend_编辑和重发">Edit and Resend 编辑和重发</h4>
+
+<p>This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.</p>
+
+<h4 id="Copy_as_cURL">Copy as cURL</h4>
+
+<div class="geckoVersionNote">
+<p>This feature is new in Firefox 31.</p>
+</div>
+
+<p>This option copies the network request to the clipboard as a <a href="http://curl.haxx.se/">cURL</a> command, so you can execute it from a command line. The command may include the following options:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>-X [METHOD]</code></td>
+   <td>If the method is not GET or POST</td>
+  </tr>
+  <tr>
+   <td><code>--data</code></td>
+   <td>For URL encoded request parameters</td>
+  </tr>
+  <tr>
+   <td><code>--data-binary</code></td>
+   <td>For multipart request parameters</td>
+  </tr>
+  <tr>
+   <td><code>--http/VERSION</code></td>
+   <td>If the HTTP version is not 1.1</td>
+  </tr>
+  <tr>
+   <td><code>-I</code></td>
+   <td>If the method is HEAD</td>
+  </tr>
+  <tr>
+   <td><code>-H</code></td>
+   <td>One for each request parameter</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Network_request_details_网络请求细节">Network request details 网络请求细节</h2>
+
+<p>Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.、</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13274/nm-headers-annotated.png" style="display: block; height: 872px; margin-left: auto; margin-right: auto; width: 1870px;">The tabs at the top of this pane enable you to switch between five different pages:</p>
+
+<ul>
+ <li><strong>Headers 消息头</strong></li>
+ <li><strong>Cookies</strong></li>
+ <li><strong>Params 请求参数</strong></li>
+ <li><strong>Response 响应结果</strong></li>
+ <li><strong>Timings</strong></li>
+</ul>
+
+<p>From Firefox 30 onwards, there's a sixth page that appears only if the content type is HTML, the <strong>Preview</strong> page.</p>
+
+<p>Clicking the icon to the left of the tabs closes the pane and returns you to the list view.</p>
+
+<h3 id="Headers_消息头标签">Headers 消息头标签</h3>
+
+<p>消息头标签显示请求的基本信息，包括URL和状态码。显示的是请求头和响应头的信息。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7397/nm-headers.png" style="display: block; margin-left: auto; margin-right: auto;">可以过滤显示的消息头：</p>
+
+<h3 id="Cookies标签"><img alt="" src="https://mdn.mozillademos.org/files/7399/nm-headers-filtered.png" style="display: block; margin-left: auto; margin-right: auto;">Cookies标签</h3>
+
+<p>这个标签显示了所有请求和响应发送的全部cookies。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7391/nm-cookies.png" style="display: block; margin-left: auto; margin-right: auto;">和消息头一样，可以过滤cookies。</p>
+
+<h3 id="Params_请求参数标签">Params 请求参数标签</h3>
+
+<p>该标签显示GET方法和POST方法发送的请求参数。</p>
+
+<h3 id="Response_响应标签"><img alt="" src="https://mdn.mozillademos.org/files/7407/nm-params.png" style="display: block; margin-left: auto; margin-right: auto;">Response 响应标签</h3>
+
+<p>显示完整的响应信息。如果响应结果是HTML，JS或者CSS文件，响应结果被当做文本显示：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7413/nm-response-html.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>如果响应类型是JSON，那么该标签显示一个JSON对象：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7421/nm-response-json.png" style="display: block; margin-left: auto; margin-right: auto;">如果响应结果是图片，那么该标签显示的是图片的预览图：</p>
+
+<h3 id="Timings"><img alt="" src="https://mdn.mozillademos.org/files/7415/nm-response-image.png" style="display: block; margin-left: auto; margin-right: auto;">Timings</h3>
+
+<p>The Timings tab has a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:<img alt="" src="https://mdn.mozillademos.org/files/7417/nm-timings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Preview_预览">Preview 预览</h3>
+
+<div class="geckoVersionNote">
+<p>Firefox 30新增加的功能</p>
+</div>
+
+<p>From Firefox 30 onwards, if the file type is HTML a sixth tab appears labeled "Preview". This renders just that HTML:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7401/nm-html-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Performance_analysis_性能分析">Performance analysis 性能分析</h2>
+
+<div class="geckoVersionNote">
+<p>Firefox 29新加入性能分析工具。</p>
+</div>
+
+<p>从Firefox 29版本开始，网络监视器包含了一个性能分析工具。性能分析工具显示浏览器加载网页各个部分所花费的时间。<br>
+ 点击网络监视器底部的秒表图标，就可以打开性能分析工具。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7411/nm-performance-button.png" style="display: block; margin-left: auto; margin-right: auto;">(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)</p>
+
+<p>The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7409/nm-performance.png" style="display: block; margin-left: auto; margin-right: auto;">The results for each run are summarised in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.</p>
+
+<p>To get back to the Network Monitor's list of network requests click the "Back" button on the left.</p>
+
+<p>Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">only that resource type</a>.</p>
diff --git a/files/zh-cn/tools/network_monitor/performance_analysis/index.html b/files/zh-cn/tools/network_monitor/performance_analysis/index.html
new file mode 100644
index 0000000000..e2096ad0bc
--- /dev/null
+++ b/files/zh-cn/tools/network_monitor/performance_analysis/index.html
@@ -0,0 +1,43 @@
+---
+title: 性能分析工具
+slug: Tools/Network_Monitor/Performance_Analysis
+tags:
+  - 工具
+  - 开发工具
+  - 指南
+  - 火狐
+  - 网络
+  - 调试
+translation_of: Tools/Network_Monitor/Performance_Analysis
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>网络监视器包括了一个性能分析工具，来帮助你查看浏览器在你的网站上使用了多长时间来下载每种资源</p>
+
+<h2 id="使用性能分析工具">使用性能分析工具</h2>
+
+<p>如果要使用性能分析工具，请点击工具栏上的停表按钮.</p>
+
+<p>(如果你只是打开了网络监视器，那么它还没有填充请求列表，你会在主窗口得到一个停表按钮.)</p>
+
+<p>网络监视器会加载这个网站两次: 第一次浏览器没有缓存, 第二次浏览器会使用缓存. 这样能模拟出用户第一次访问该网站的情况和之后的浏览情况. 它会并排或在窗口过窄时垂直显示每次运行的结果:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16277/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>每次运行结果的总结都会显示在面板和饼图上. 面板有资源类型、每种资源的总大小和每种资源读取的总时间. 旁边的饼图显示每种资源大小的占比.</p>
+
+<p>若要返回到网络监视器，请点击左侧的“返回”按钮.</p>
+
+<p>点击饼状图的任何一个部分都会切换到显示当次的网络性能分析数据，并且自动地<a href="/en-US/docs/Tools/Network_Monitor/request_list#Filtering_requests">仅保持你所点击的类型的资源的相关信息可见</a>.</p>
+
+<h2 id="网络性能分析工具相关特性">网络性能分析工具相关特性</h2>
+
+<p>下面的文章包含了关于使用网络性能分析工具的不同方面的信息:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Toolbar">工具栏</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list">网络请求列表</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_details">网络请求详情</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/recording">网络日志记录</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Throttling">节流</a></li>
+</ul>
diff --git a/files/zh-cn/tools/network_monitor/request_details/index.html b/files/zh-cn/tools/network_monitor/request_details/index.html
new file mode 100644
index 0000000000..9ee16fbe29
--- /dev/null
+++ b/files/zh-cn/tools/network_monitor/request_details/index.html
@@ -0,0 +1,376 @@
+---
+title: Network request details
+slug: Tools/Network_Monitor/request_details
+tags:
+  - Dev Tools
+  - Firefox
+  - Networking
+translation_of: Tools/Network_Monitor/request_details
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>如果你点击网络请求列表的某项，这个请求的详细信息面板就会出现。这个面板提供了关于这个请求的详细信息。</p>
+
+<h2 id="Network_request_details">Network request details</h2>
+
+<p>点击某个请求之后，在右侧显示了一个新的如下的面板，展现了这个请求的详细信息。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16261/network_request_details.png" style="display: block; height: 741px; margin-left: auto; margin-right: auto; width: 930px;"></p>
+
+<p>面板上部有一些选项卡，可以让你在不同的页面切换。选项如下：</p>
+
+<ul>
+ <li><strong>Headers</strong></li>
+ <li><strong>Cookies</strong></li>
+ <li><strong>Params</strong></li>
+ <li><strong>Response</strong></li>
+ <li><strong>Cache</strong></li>
+ <li><strong>Timings</strong></li>
+ <li><strong>Security </strong>（仅在安全请求下出现）</li>
+ <li><strong>Stack trace</strong> （仅在请求有堆栈的情况下出现，也就是说请求是脚本调用其他脚本的时候）。Firefox 55 添加。</li>
+</ul>
+
+<p>点击面板上<a href="/en-US/docs/Tools/Network_Monitor#Toolbar">工具栏</a>最左侧的图标可以关闭本面板，返回请求列表。</p>
+
+<h3 id="Headers">Headers</h3>
+
+<p>你可以在请求头上右键菜单里以 json 格式复制一些或者全部的信息：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16731/response_headers_68.png" style="border: 1px solid black; display: block; height: 267px; margin: 0px auto; width: 397px;"><strong>复制</strong>选项只复制你选中的键值对，<strong>复制全部</strong>选项会以一个标准的 json 格式复制 headers 的全部值：</p>
+
+<pre class="brush: json">{
+  "Response headers (1.113 KB)": {
+    "headers": [
+      {
+        "name": "accept-ranges",
+        "value": "bytes"
+      },
+      {
+        "name": "age",
+        "value": "0"
+      },
+      {
+        "name": "backend-timing",
+        "value": "D=74716 t=1560258099074460"
+      },
+      {
+        "name": "cache-control",
+        "value": "private, must-revalidate, max-age=0"
+      },
+      {
+        "name": "content-disposition",
+        "value": "inline; filename=api-result.js"
+      },
+      {
+        "name": "content-encoding",
+        "value": "gzip"
+      },
+      {
+        "name": "content-length",
+        "value": "673"
+      },
+      {
+        "name": "content-type",
+        "value": "text/javascript; charset=utf-8"
+      },
+      {
+        "name": "date",
+        "value": "Tue, 11 Jun 2019 13:01:39 GMT"
+      },
+      {
+        "name": "mediawiki-login-suppressed",
+        "value": "true"
+      },
+      {
+        "name": "p3p",
+        "value": "CP=\"This is not a P3P policy! See https://en.wikipedia.org/wiki/Special:CentralAutoLogin/P3P for more info.\""
+      },
+      {
+        "name": "server",
+        "value": "mw1316.eqiad.wmnet"
+      },
+      {
+        "name": "server-timing",
+        "value": "cache;desc=\"pass\""
+      },
+      {
+        "name": "strict-transport-security",
+        "value": "max-age=106384710; includeSubDomains; preload"
+      },
+      {
+        "name": "vary",
+        "value": "Accept-Encoding,Treat-as-Untrusted,X-Forwarded-Proto,Cookie,Authorization,X-Seven"
+      },
+      {
+        "name": "via",
+        "value": "1.1 varnish (Varnish/5.1), 1.1 varnish (Varnish/5.1)"
+      },
+      {
+        "name": "x-analytics",
+        "value": "ns=-1;special=Badtitle;WMF-Last-Access=11-Jun-2019;WMF-Last-Access-Global=11-Jun-2019;https=1"
+      },
+      {
+        "name": "x-cache",
+        "value": "cp1075 pass, cp1075 pass"
+      },
+      {
+        "name": "x-cache-status",
+        "value": "pass"
+      },
+      {
+        "name": "x-client-ip",
+        "value": "204.210.158.136"
+      },
+      {
+        "name": "x-content-type-options",
+        "value": "nosniff"
+      },
+      {
+        "name": "X-Firefox-Spdy",
+        "value": "h2"
+      },
+      {
+        "name": "x-frame-options",
+        "value": "SAMEORIGIN"
+      },
+      {
+        "name": "x-powered-by",
+        "value": "HHVM/3.18.6-dev"
+      },
+      {
+        "name": "x-search-id",
+        "value": "esvan0r5bnnwscyk2wq09i1im"
+      },
+      {
+        "name": "x-varnish",
+        "value": "766019457, 417549316"
+      }
+    ]
+  },
+  "Request headers (665 B)": {
+    "headers": [
+      {
+        "name": "Accept",
+        "value": "*/*"
+      },
+      {
+        "name": "Accept-Encoding",
+        "value": "gzip, deflate, br"
+      },
+      {
+        "name": "Accept-Language",
+        "value": "en-US,en;q=0.5"
+      },
+      {
+        "name": "Connection",
+        "value": "keep-alive"
+      },
+      {
+        "name": "Cookie",
+        "value": "WMF-Last-Access=11-Jun-2019; WMF-Last-Access-Global=11-Jun-2019; mwPhp7Seed=5c9; GeoIP=US:NY:Port_Jervis:41.38:-74.67:v4"
+      },
+      {
+        "name": "DNT",
+        "value": "1"
+      },
+      {
+        "name": "Host",
+        "value": "en.wikipedia.org"
+      },
+      {
+        "name": "Referer",
+        "value": "https://www.wikipedia.org/"
+      },
+      {
+        "name": "TE",
+        "value": "Trailers"
+      },
+      {
+        "name": "User-Agent",
+        "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0"
+      }
+    ]
+  }
+}</pre>
+
+<p>Header 选项卡有三个主要部分，上部列出了请求的基本信息：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16262/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>这包括了：</p>
+
+<ul>
+ <li>请求的信息</li>
+ <li><strong>HTTP 请求的</strong>header</li>
+ <li><strong>响应的 header</strong></li>
+</ul>
+
+<h4 id="请求的信息"><strong>请求的信息</strong></h4>
+
+<ul>
+ <li><strong>请求的 URL</strong></li>
+ <li><strong>请求的方法</strong></li>
+ <li><strong>远端IP地址</strong>和<strong>端口</strong></li>
+ <li>一个问号图标的<strong>状态码</strong>，连接到关于这个状态码详情的页面。可以参阅 MDN 上的<a href="/zh-CN/docs/Web/HTTP/Headers">HTTP Headers 文档</a>。</li>
+ <li><strong>Edit and Resend</strong> 按钮<a href="/en-US/docs/Tools/Network_Monitor/request_list/#Edit_and_Resend">编辑后重新发送</a>请求。</li>
+ <li>A <strong>Raw headers</strong> button to display the raw request and response headers.</li>
+ <li>The HTTP version used</li>
+ <li>The <strong>Referrer Policy</strong>, which governs which referrer information, sent in the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer" title="The Referer request header contains the address of the previous web page from which a link to the currently requested page was followed. The Referer header allows servers to identify where people are visiting them from and may use that data for analytics, logging, or optimized caching, for example."><code>Referer</code></a> header, should be included with requests. (See <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy">Referrer-Policy</a> for a description of possible values)</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16266/network_headers.png" style="border: 1px solid black; display: block; height: 295px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>You can filter the headers that are displayed.</p>
+
+<p>Starting in Firefox 67, in addition to showing information about known trackers in the list, the request information section of the Headers panel also shows an icon and a message if the request is to a site that is associated with a known tracker ({{bug("1485416")}}).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16600/tracker_in_header_panel.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 402px;"></p>
+
+<h4 id="Response_headers"><strong>Response headers</strong></h4>
+
+<p>The response headers section shows details about the response. If you hover over a line in the response headers section, a question mark links to the documentation for that response header, if available.</p>
+
+<div class="blockIndicator note">
+<p>If you noticed that the keys in the response header are all in lowercase, while the request headers keys are not, that is by design.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16441/response_headers.png" style="border: 1px solid black; display: block; height: 327px; margin: 0px auto; width: 435px;"></p>
+
+<h4 id="Request_headers"><strong>Request</strong> headers</h4>
+
+<p>The Request headers section shows details about the request headers. If you hover over a line in the request headers section, a question mark links to the documentation for that request header, if available.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16442/request_headers.png" style="border: 1px solid black; display: block; height: 223px; margin: 0px auto; width: 435px;"></p>
+
+<h3 id="Cookies">Cookies</h3>
+
+<p>This tab lists full details of any cookies sent with the request or response:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16265/network_cookies.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p>
+
+<p>As with headers, you can filter the list of cookies displayed. The full list of cookie attributes is shown—see the following screenshot showing Response cookies with further attributes shown.</p>
+
+<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p>
+
+<p>The <code>samesite</code> attribute has been shown since Firefox 62 ({{bug("1452715")}}).</p>
+
+<h3 id="Params">Params</h3>
+
+<p>This tab displays the GET parameters and POST data of a request:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16333/params.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h3 id="Response">Response</h3>
+
+<p>The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16268/network_response.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>If the response is JSON, it will be shown as an inspectable object:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16332/response_json.png" style="display: block; height: 268px; margin: 0 auto; width: 900px;"></p>
+
+<p>If the response is an image, the tab displays a preview:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16331/response_pane_image.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h4 id="Cache">Cache</h4>
+
+<p>If the response is cached (i.e. a 304), the Cache tab will display details about that cached resource.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16329/response_cache.png" style="border: 1px solid black; display: block; height: 245px; margin: 0px auto; width: 567px;"></p>
+
+<p>These details include:</p>
+
+<ul>
+ <li><strong>Last fetched:</strong> The date the resource was last fetched</li>
+ <li><strong>Fetched count:</strong> The number of times in the current session that the resource has been fetched</li>
+ <li><strong>Data size:</strong> The size of the resource.</li>
+ <li><strong>Last modified:</strong> The date the resource was last modified.</li>
+ <li><strong>Expires:</strong> The date the resource expires.</li>
+ <li><strong>Device:</strong> The device the resource was fetched from (e.g. "disk").</li>
+</ul>
+
+<h4 id="HTML_preview">HTML preview</h4>
+
+<p>If the response is HTML, a preview of the rendered HTML appears inside the Response tab, above the response payload.</p>
+
+<h3 id="Timings">Timings</h3>
+
+<p>The Timings tab breaks a network request down into the following subset of the stages defined in the <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP Archive</a> specification:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Blocked</td>
+   <td>
+    <p>Time spent in a queue waiting for a network connection.</p>
+
+    <p>The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> preference. If all connections are in use, the browser can't download more resources until a connection is released.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>DNS resolution</td>
+   <td>Time taken to resolve a host name.</td>
+  </tr>
+  <tr>
+   <td>Connecting</td>
+   <td>Time taken to create a TCP connection.</td>
+  </tr>
+  <tr>
+   <td>Sending</td>
+   <td>Time taken to send the HTTP request to the server.</td>
+  </tr>
+  <tr>
+   <td>Waiting</td>
+   <td>Waiting for a response from the server.</td>
+  </tr>
+  <tr>
+   <td>Receiving</td>
+   <td>Time taken to read the entire response from the server (or cache).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>It presents a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16271/network_timings.png" style="border: 1px solid black; display: block; height: 749px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h3 id="Security">Security</h3>
+
+<p>If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16269/network_security.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p>
+
+<p>The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:</p>
+
+<ol>
+ <li>Using SSLv3 instead of TLS</li>
+ <li>Using the RC4 cipher</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p>
+
+<h3 id="Stack_trace">Stack trace</h3>
+
+<p>Stack traces are shown in the <em>Stack Trace</em> tab, for responses that have a stack trace of course.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16270/network_stack_trace.png" style="border: 1px solid black; display: block; height: 205px; margin: 0px auto; width: 900px;"></p>
+
+<h2 id="Network_Monitor_Features">Network Monitor Features</h2>
+
+<p>The following articles cover different aspects of using the network monitor:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Toolbar">Toolbar</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list">Network request list</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Performance_Analysis">Performance analysis</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Throttling">Throttling</a></li>
+</ul>
diff --git a/files/zh-cn/tools/network_monitor/toolbar/index.html b/files/zh-cn/tools/network_monitor/toolbar/index.html
new file mode 100644
index 0000000000..f9418facda
--- /dev/null
+++ b/files/zh-cn/tools/network_monitor/toolbar/index.html
@@ -0,0 +1,53 @@
+---
+title: Network monitor toolbar
+slug: Tools/Network_Monitor/toolbar
+translation_of: Tools/Network_Monitor/toolbar
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>网络监视器提供了两条工具栏，一个在主窗口上面, 还有一个在下面.</p>
+
+<h2 id="工具栏">工具栏</h2>
+
+<p>第一个工具栏在网络监视器窗口的上面.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16247/network_toolbar.png" style="display: block; height: 98px; margin-left: auto; margin-right: auto; width: 1200px;"></p>
+
+<p>它们提供:</p>
+
+<ul>
+ <li>用于清理 <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list">网络请求列表</a> 的按钮</li>
+ <li>一个盒子让你能够使用URL和属性 <a href="/en-US/docs/Tools/Network_Monitor/request_list#Filtering_requests">过滤请求</a>.</li>
+ <li>一组按钮让你可以按类型过滤网络请求:
+  <ul>
+   <li>按响应的内容类型</li>
+   <li>XHR请求</li>
+   <li>WebSocket upgrades (WS 标签)</li>
+  </ul>
+ </li>
+ <li>在默认情况下, the Network Monitor is cleared each time you navigate to a new page or reload the current page. 你可以点击“持续日志”复选框来更改它的行为.</li>
+ <li>一个复选框可以让你禁用缓存.</li>
+ <li>Throttling</li>
+ <li>HAR</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16248/network_monitor_bottom_toolbar.png" style="border: 1px solid black; height: 48px; width: 2010px;"></p>
+
+<p>第二个工具栏在网络监视器底部，它提供:</p>
+
+<ul>
+ <li>一个启动 <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Performance_analysis">性能分析</a> 的按钮</li>
+ <li>一个对此页面的总结, 包括请求数量、总大小和总时间.</li>
+</ul>
+
+<h2 id="Network_Monitor_Features">Network Monitor Features</h2>
+
+<p>The following articles cover different aspects of using the network monitor:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list">网络请求列表</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_details">Network request details</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Performance_Analysis">性能分析</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/Throttling">Throttling</a></li>
+</ul>
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>
diff --git a/files/zh-cn/tools/performance/call_tree/index.html b/files/zh-cn/tools/performance/call_tree/index.html
new file mode 100644
index 0000000000..93700f1f75
--- /dev/null
+++ b/files/zh-cn/tools/performance/call_tree/index.html
@@ -0,0 +1,108 @@
+---
+title: Call Tree
+slug: Tools/Performance/Call_Tree
+translation_of: Tools/Performance/Call_Tree
+---
+<div>{{ToolsSidebar}}</div><div class="summary">
+<p><font><font>调用树会告诉您浏览器花费最多时间使用哪些JavaScript函数。通过分析其结果，您可以发现代码中的瓶颈 - 浏览器花费了大量时间的地方。</font></font></p>
+
+<p><font><font>这些瓶颈是您可以做出的任何优化都会产生最大影响的地方。</font></font></p>
+</div>
+
+<p><font><font>Call Tree是一个采样分析器。</font><font>它定期对JavaScript引擎的状态进行采样，并记录当时正在执行的代码的堆栈。</font><font>统计上，我们执行某个特定功能时采用的样本数量与浏览器执行它的时间相对应。</font></font></p>
+
+<div class="note">
+<p><font><font>在本文中，我们将使用简单程序的输出作为示例。</font><font>如果你想让程序试验你的个人资料，你可以在</font></font><a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/"><font><font>这里</font></font></a><font><font>找到它</font><font>。</font><font>您可以在</font></font><a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/profile/call-tree.json"><font><font>这里</font></font></a><font><font>找到我们讨论的特定配置文件</font><font>- 只需将其导入性能工具即可。</font></font></p>
+
+<p><font><font>有描述该计划的结构的短页面</font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Examples/Sorting_algorithms_comparison"><font><font>在这里</font></font></a><font><font>。</font></font></p>
+
+<p><font><font>请注意，我们使用相同的程序 - 实际上是相同的配置文件 - 在</font></font><a href="/en-US/docs/Tools/Performance/Flame_Chart"><font><font>Flame Chart</font></font></a><font><font>的文档页面中</font><font>。</font></font></p>
+</div>
+
+<p><font><font>下面的屏幕截图显示了一个程序的输出，该程序比较了三种排序算法 - 冒泡排序，选择排序和快速排序。</font><font>为此，它会生成一些填充了随机整数的数组，并依次使用每种算法对它们进行排序。</font></font></p>
+
+<p><font><font>我们</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Zooming_in"><font><font>放大</font></font></a><font><font>了录制的部分，显示了一个很长的JavaScript标记：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10981/perf-call-tree.png" style="display: block; height: 574px; margin-left: auto; margin-right: auto; width: 1052px;"></p>
+
+<p><font><font>Call Tree将结果呈现在表格中。</font><font>每一行表示一个函数，其中至少取得一个样本，并且按照在该函数中取得的样本数从最高到最低排序行。</font></font></p>
+
+<p><em><font><font>样本</font></font></em><font><font>是我们执行这个特定函数时所采样本的数量。</font></font></p>
+
+<p><em><font><font>自我成本</font></font></em><font><font>是指该数字占记录选定部分样本总数的百分比。</font></font></p>
+
+<p><em><font><font>自我时间</font></font></em><font><font>是根据记录的选定部分覆盖的总</font><em><font>时间</font></em><font>将该数字转换为毫秒。</font></font></p>
+
+<p><font><font>在当前版本的调用树中，这些是最重要的列。</font><font>具有较高</font></font><em><font><font>自身成本的</font></font></em><font><font>函数</font><font>是优化的好选择，或者是因为它们需要很长时间才能运行，或者因为它们经常被调用。</font></font></p>
+
+<p><font><font>这个屏幕截图告诉我们一些我们可能已经知道的事情：泡泡排序是一种非常低效的算法。</font><font>泡沫分类中的样本数大约是选择排序中的六倍，是快速排序中的13倍。</font></font></p>
+
+<h2 id="走上调用树"><font><font>走上</font></font><font><font>调用树</font></font></h2>
+
+<p><font><font>每个函数名称旁边都有一个公开箭头：单击它，您可以看到从调用采样的函数到根的备用调用树的路径。</font><font>例如，我们可以扩展条目</font></font><code>bubbleSort()</code><font><font>：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10983/perf-call-tree-expanded-bubblesort.png" style="display: block; height: 512px; margin-left: auto; margin-right: auto; width: 1054px;"></p>
+
+<p><font><font>所以我们可以看到调用图如下所示：</font></font></p>
+
+<pre><font><font>sortAll（）</font></font>
+<font><font>
+    - &gt; sort（）</font></font>
+<font><font>
+        - &gt; bubbleSort（）</font></font></pre>
+
+<p><font><font>另请注意</font><font>，</font><font>此处的</font></font><em><font><font>自我成本</font></font></em><font><font>为</font></font><code>sort()</code><font><font>1.45％，并且请注意，这</font></font><code>sort()</code><font><font>与列表中稍后</font><font>的单独条目相同</font><font>。</font><font>这告诉我们一些样本是</font></font><code>sort()</code><font><font>自己</font><font>采集的</font><font>，而不是它所调用的功能。</font></font></p>
+
+<p><font><font>有时从入口到顶层有多条路径返回。</font><font>让我们扩展条目</font></font><code>swap()</code><font><font>：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10985/perf-call-tree-expanded-sawp.png" style="display: block; height: 636px; margin-left: auto; margin-right: auto; width: 1052px;"></p>
+
+<p><font><font>里面有253个样本</font></font><code>swap()</code><font><font>。</font><font>但是</font></font><code>swap()</code><font><font>通过两种不同的途径达成了：两者</font></font><code>bubbleSort()</code><font><font>并</font></font><code>selectionSort()</code><font><font>使用它们。</font><font>我们还可以看到253个样本中</font></font><code>swap() </code><font><font>有</font><font>252个</font><font>在</font></font><code>bubbleSort()</code><font><font>分支中，只有一个在</font></font><code>selectionSort()</code><font><font>分支中。</font></font></p>
+
+<p><font><font>这个结果意味着冒泡排序比我们想象的效率更低！</font><font>它可以承担另外252个样本的责任，或几乎占总成本的10％。</font></font></p>
+
+<p><font><font>通过这种挖掘，我们可以计算出整个调用图和相关的样本数量：</font></font></p>
+
+<pre><font><font>sortAll（）// 8</font></font>
+<font><font>
+    - &gt; sort（）// 37</font></font>
+<font><font>
+        - &gt; bubbleSort（）// 1345</font></font>
+<font><font>
+            - &gt; swap（）// 252</font></font>
+<font><font>
+        - &gt; selectionSort（）// 190</font></font>
+<font><font>
+            - &gt; swap（）// 1</font></font>
+<font><font>
+        - &gt; quickSort（）// 103</font></font>
+<font><font>
+            - &gt;分区（）// 12</font></font></pre>
+
+<h2 id="平台数据"><font><font>平台数据</font></font></h2>
+
+<p><font><font>您还会看到一些标记为</font></font><em><font><font>Gecko</font></font></em><font><font>，</font></font><em><font><font>输入和事件</font></font></em><font><font>等的行。</font><font>这些代表内部浏览器调用。</font></font></p>
+
+<p><font><font>这也可以是有用的信息。</font><font>如果您的网站正在努力使浏览器工作，这可能不会显示为您的代码中记录的示例，但它仍然是您的问题。</font></font></p>
+
+<p><font><font>在我们的例子中，有679个样本被分配到</font></font><em><font><font>Gecko--</font></font></em><font><font>后面的第二大组</font></font><code>bubbleSort()</code><font><font>。</font><font>我们来扩展一下：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10987/perf-call-tree-expanded-gecko.png" style="display: block; height: 478px; margin-left: auto; margin-right: auto; width: 1050px;"></p>
+
+<p><font><font>这个结果告诉我们，这些样本中有614个，或约占总成本的20％，来自我们的</font></font><code>sort()</code><font><font>呼叫。</font><font>如果我们查看代码</font></font><code>sort()</code><font><font>，应该很明显，高平台数据成本来自重复呼叫</font></font><code>console.log()</code><font><font>：</font></font></p>
+
+<pre class="brush: js line-numbers  language-js" style=""><code class="language-js" style=""><span class="keyword token" style="border: 0px; color: #0077aa; margin: 0px; padding: 0px;">function</span> <span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">sort</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span>unsorted<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span> <span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">{</span>
+  console<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">.</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">log</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">bubbleSort</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span>unsorted<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">;</span>
+  console<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">.</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">log</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">selectionSort</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span>unsorted<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">;</span>
+  console<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">.</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">log</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">quickSort</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span>unsorted<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">;</span>
+<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">}</span></code></pre>
+
+<p><font><font>考虑更有效的方法来实现这一点肯定是值得的。</font></font></p>
+
+<p><font><font>这里要注意的一件事是空闲时间被分类为</font></font><em><font><font>Gecko</font></font></em><font><font>，所以你的配置文件中没有运行JavaScript的部分将贡献</font></font><em><font><font>Gecko</font></font></em><font><font>样本。</font><font>这些与您的网站的性能无关。</font></font></p>
+
+<div class="note">
+<p><font><font>默认情况下，Call Tree不会将平台数据拆分为单独的函数，因为它们会增加很多噪音，并且细节对于不使用Firefox的用户可能不太有用。</font><font>如果您想查看详细信息，请在</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar"><font><font>设置中</font></font></a><font><font>选中“显示壁虎平台数据” </font><font>。</font></font></p>
+</div>
+
+<p> </p>
diff --git a/files/zh-cn/tools/performance/frame_rate/index.html b/files/zh-cn/tools/performance/frame_rate/index.html
new file mode 100644
index 0000000000..5e0c776482
--- /dev/null
+++ b/files/zh-cn/tools/performance/frame_rate/index.html
@@ -0,0 +1,70 @@
+---
+title: 帧率
+slug: Tools/Performance/Frame_rate
+translation_of: Tools/Performance/Frame_rate
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="summary">
+<p>帧率是网站响应能力的指标。 较低或不一致的帧率可能会使网站显得响应慢或卡死，从而带来不良的用户体验。</p>
+
+<p>60 fps 的帧率是站点流畅展示的目标，因此，为响应某些事件所需的所有更新，您需要 16.7 ms 的时间预算。</p>
+
+<p>“性能”工具中的帧率图显示了录制过程中的帧率。 它可以快速指出您的站点可能出现问题的位置，使您可以使用其他工具进行更深入的分析。</p>
+</div>
+
+<h2 id="帧率和响应">帧率和响应</h2>
+
+<p>帧率是视频设备可以产生图像（或帧）的速率。 电影和游戏最熟悉它，但现在已广泛用作网站和 Web 应用程序的性能指标。</p>
+
+<p>在网络性能中，帧封装了浏览器为了更新和重绘屏幕而需要做的工作。 帧率最明显地适用于动画：如果帧率太低，则动画将看起来有抖动，而更快的帧率将使得动画更流畅。 但是，当用户与网站交互时，帧率也可以作为衡量网站响应能力的常用指标。</p>
+
+<p>例如，如果将鼠标移到某个页面元素上触发了一些 JavaScript，这些 JavaScript 改变了元素的外观，并触发了重排和重绘，那么所有这些工作都需要在该帧中完成。 如果浏览器处理该帧花费的时间太长，那么浏览器将显示暂时无响应（卡顿）。</p>
+
+<p>同样的，如果页面滚动涉及很多复杂的页面更新，并且浏览器无法保持可接受的帧率，则滚动页面将显得缓慢或卡死。</p>
+
+<p>通常，较高且一致的帧率将使用户与站点的交互更加舒服。</p>
+
+
+
+<div class="note">
+<p>60 fps 的帧率被认为是实现流畅显示的目标，因此，为响应某些事件而需要同步进行的所有更新，需要在 16.7 ms 内完成。</p>
+
+<p>但是，一致性尤为重要：如果您无法提供 60 fps，则最好以更低的速率连续提供更好的帧率，并避免帧速率突然下降而导致站点假死。</p>
+</div>
+
+<h2 id="帧率图">帧率图</h2>
+
+<p>可以在“性能”工具的“<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#Recording_overview">录制概览</a>”中找到帧率图。 当浏览器完成一帧时需要花费一个时间戳，并使用它来跟踪记录过程中的帧率。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11025/perf-frame-rate.png" style="display: block; height: 66px; margin-left: auto; margin-right: auto; width: 900px;">x 轴是全部周期内的时间，共有三个注解：最大帧率，平均帧率和最低帧率。</p>
+
+
+
+
+
+<h2 id="使用帧率图">使用帧率图</h2>
+
+<p>帧率图的最大的价值在于，它和 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Web_Console">Web 控制台</a>一样，可以快速指出您的站点可能出现问题的位置，从而使您可以使用其他工具进行更深入的分析。 例如，这是性能文件的屏幕截图：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11023/perf-fr-waterfall.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>您可以看到平均帧率在一定程度上是正常的，但是有三个点，帧率会崩溃数 10 毫秒。 对于页面中正在播放的任何动画，这无疑会引起明显的停顿。</p>
+
+
+
+<p>帧率图与位于其直接上方的<a href="/zh-CN/docs/Tools/Performance/UI_Tour#Waterfall_overview">瀑布摘要</a>相关，并且可以看到帧率的前两个下降与橙色条形相关，这是花费在执行JavaScript上的时间。</p>
+
+
+
+<p>如果我们从记录的这些片段中选择一个，则其下方的主<a href="/zh-CN/docs/Tools/Performance/Waterfall">瀑布视图</a>将会把它放大，然后我们可以看到导致问题的函数：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11027/perf-zoom.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+
+
+<p>我们有一个来自 click 事件的 JavaScript 函数，该函数会将主线程阻塞了 170 毫秒。</p>
+
+<p>但是，是哪个功能呢？ 切换到<a href="/zh-CN/docs/Tools/Performance/Flame_Chart">火焰图</a>查看当时的调用堆栈：<img alt="" src="https://mdn.mozillademos.org/files/11021/perf-fr-flame-chart.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>出问题的函数称是  <code>doPointlessComputations()</code>，它在 “ main.js” 中定义。 要解决此问题，我们可以考虑将其拆分为多个部分，然后在 <code><a href="/zh-CN/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code> 中运行这些部分，甚至在 <a href="/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers">worker</a> 中运行整个函数。 <a href="/zh-CN/docs/Tools/Performance/Scenarios/Intensive_JavaScript">密集型 JavaScript</a> 文章展示了哪些策略可以来解决由长时间运行的同步 JavaScript 引起的响应性问题。</p>
diff --git a/files/zh-cn/tools/performance/index.html b/files/zh-cn/tools/performance/index.html
new file mode 100644
index 0000000000..9c51584f00
--- /dev/null
+++ b/files/zh-cn/tools/performance/index.html
@@ -0,0 +1,91 @@
+---
+title: 性能
+slug: Tools/Performance
+translation_of: Tools/Performance
+---
+<div>{{ToolsSidebar}}</div><p>性能工具让你深入了解你的网站的一般响应性，JavaScript和布局性能。利用性能工具你可以创建你的网站在一段时间内的一个记录，或资料。然后此工具在资料里将浏览器渲染你的网站时所做的事情，和帧率图展示给你。</p>
+
+<p>你有三个子工具来详细检查资料：</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall（瀑布流）</a>展示浏览器所做的不同工作，如运算布局，JavaScript，重绘，和垃圾回收</li>
+ <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree（调用树）</a>展示那些最耗时间的JavaScript函数</li>
+ <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart（火焰图）</a>展示记录过程中的JavaScript调用堆栈</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="开始使用">开始使用</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">界面之旅</a></dt>
+ <dd>
+ <p>要了解使用性能工具的方法，这是一个快速的界面指导。</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/How_to">如何工作</a></dt>
+ <dd>基本任务：打开工具，创建，保存，载入，并配置记录。</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="性能工具的组件">性能工具的组件</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">帧频（刷新率）</a></dt>
+ <dd>了解你网站的整体响应能力。</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">调用树</a></dt>
+ <dd>找到你网站上JavaScript的瓶颈。</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Waterfall">瀑布流</a></dt>
+ <dd>了解当用户与站点进行交互时浏览器的工作。</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">火焰图</a></dt>
+ <dd>看看在记录的过程中，哪些JavaScript函数执行。</dd>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="场景">场景</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">驱动CSS属性</a></dt>
+ <dd>采用瀑布流了解浏览器如何更新一个页面，以及如何驱动不同的CSS属性来影响性能。</dd>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">密集JavaScript</a></dt>
+ <dd>使用帧频和瀑布流工具来突出长期运行Javascript引起的性能问题，以及在这种状况下如何使用工作的代码可以造成有效帮助。</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
+
+<div class="column-half">
+<dl>
+ <dd> </dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/zh-cn/tools/performance/ui_tour/index.html b/files/zh-cn/tools/performance/ui_tour/index.html
new file mode 100644
index 0000000000..7b77de46ff
--- /dev/null
+++ b/files/zh-cn/tools/performance/ui_tour/index.html
@@ -0,0 +1,139 @@
+---
+title: UI Tour
+slug: Tools/Performance/UI_Tour
+translation_of: Tools/Performance/UI_Tour
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>性能工具界面包含下面4个部分：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#工具栏">工具栏</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#录制列表面板">录制列表面板</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#录制概览">录制概览</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#详情面板">详情面板</a>，可能包含下面内容的某一个：
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/Waterfall">瀑布流</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/Call_Tree">调用树</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/Flame_Chart">火焰图</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="工具栏">工具栏</h2>
+
+<p>工具栏包含如下按钮:</p>
+
+<ul>
+ <li>开始和停止录制</li>
+ <li>导入之前保存的录制文件</li>
+ <li>清空录制列表面板. 此操作会删除所有未保存的录制<em>.</em></li>
+ <li>过滤在瀑布流展示的<a href="/zh-CN/docs/Tools/Performance/Waterfall#Markers">标记</a> </li>
+ <li>切换<a href="/zh-CN/docs/Tools/Performance/UI_Tour#Details_pane">详情面板</a>的活动工具.</li>
+ <li>配置性能选项</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 836px;"></p>
+
+<h2 id="录制列表面板">录制列表面板</h2>
+
+<p>录制列表面板列出了您已加载的所有录制，包括您在此会话中进行的录制和已导入的所有录制。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p>
+
+<p>任何时候，都有一个录制被选择，并且该录制会显示在工具界面的其余部分中。 要选择其他录制，就在面板中单击对应录制。 要将录制另存为JSON文件，请单击“保存”。</p>
+
+
+
+<h2 id="录制概览">录制概览</h2>
+
+<p>这里是全部录制的概览，x 轴是时间。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>录制概览包含两部分： 瀑布流概览和帧率图</p>
+
+<h3 id="瀑布流概览">瀑布流概览</h3>
+
+<p>展示了压缩过的<a href="/zh-CN/docs/Tools/Performance/Waterfall">瀑布流</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>记录操作时使用与<a href="/zh-CN/docs/Tools/Performance/Waterfall#Markers">主瀑布视图相同的方案</a>进行颜色标记。</p>
+
+
+
+<h3 id="帧率图">帧率图</h3>
+
+<p>帧率可以让您大致了解录制期间浏览器的响应能力：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>请参阅有关<a href="/zh-CN/docs/Tools/Performance/Frame_rate">帧率</a>的单独文章。</p>
+
+
+
+<h3 id="关联事件">关联事件</h3>
+
+<p>由于这些元素是同步的，因此可以将一个元素中的事件与另一个元素中的事件相关联。</p>
+
+<p>例如，在下面的屏幕截图中，长时间运行的绘制操作（在瀑布流中<a href="/zh-CN/docs/Tools/Performance/Waterfall#Markers">显示为绿色条</a>）对应于帧速率的下降：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<h3 id="放大">放大</h3>
+
+<p>您可以使用概览选择录制的一部分以进行更详细的查看。 选择一个区间，主视图将更新为仅包含所选部分。 在下面的屏幕截图中，我们选择了低帧率区间，就可以更详细地查看长时间运行的绘制操作：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<h2 id="详情面板">详情面板</h2>
+
+<p>详情面板显示当前选择的工具选项。 要切换到其他<a href="/zh-CN/docs/Tools/Performance/UI_Tour#Toolbar">工具</a>，请使用工具栏中的按钮。</p>
+
+
+
+<h3 id="瀑布流">瀑布流</h3>
+
+<p>瀑布流展示了录制过程中浏览器所做的工作：执行 JavaScript，更新 CSS，更新页面布局以及执行重新绘制。 x 轴表示时间，录制的操作横着看就像瀑布一样，说明了浏览器按照串行进行工作。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>要了解有关瀑布的更多信息，请参见单独的<a href="/zh-CN/docs/Tools/Performance/Waterfall">瀑布</a>页面。</p>
+
+
+
+<h3 id="调用树">调用树</h3>
+
+<p>调用树是页面中运行的 JavaScript 的采样探查器。 它会定期对 JavaScript 引擎的状态进行采样，并记录在采样时所执行代码的堆栈。 从统计上讲，我们执行特定功能所用的样本数量与浏览器执行该功能所花费的时间相对应，由此您可以确定代码中的瓶颈。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br>
+ 要了解有关调用树的更多信息，请参见单独的<a href="/zh-CN/docs/Tools/Performance/Call_Tree">调用树</a>页面。 </p>
+
+
+
+<h3 id="火焰图">火焰图</h3>
+
+<p>如果调用树从统计角度告诉您，网站在整个录制过程中执行哪些功能花费了最多时间，则火焰图会告诉您录制过程中任意给定时刻的调用堆栈：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>要了解有关火焰图的更多信息，请参见单独的<a href="/zh-CN/docs/Tools/Performance/Flame_Chart">火焰图</a>页面。</p>
+
+<h3 id="分配">分配</h3>
+
+<div class="geckoVersionNote">
+<p>分配视图是Firefox 46中的新增功能。</p>
+</div>
+
+<p>分配视图类似于调用树视图，但用于分配：它显示页面中哪些功能在录制过程中分配的内存最多。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>仅当录制文件之前在“性能”工具设置中选中“记录分配”时，才会显示“分配”视图：</p>
+
+<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
+
+<p>要了解有关“分配”视图的更多信息，请参见单独的<a href="/zh-CN/docs/Tools/Performance/Allocations">分配</a>页面。</p>
diff --git a/files/zh-cn/tools/performance/waterfall/index.html b/files/zh-cn/tools/performance/waterfall/index.html
new file mode 100644
index 0000000000..331bc730f8
--- /dev/null
+++ b/files/zh-cn/tools/performance/waterfall/index.html
@@ -0,0 +1,482 @@
+---
+title: Waterfall
+slug: Tools/Performance/Waterfall
+translation_of: Tools/Performance/Waterfall
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="summary">
+<p><font><font>通过瀑布流，您可以了解浏览器在运行网站或应用程序时所做的各种事情。</font><font>它的基础是浏览器在运行网站时所做的事情可以分为各种类型 - 运行 JavaScript，更新布局等等 - 而且在任何时候，浏览器都在做这些事情之一。</font></font></p>
+
+<p><font><font>因此，如果您看到性能问题的迹象 - 例如帧速下降，您可以前往瀑布流查看浏览器在录制过程中正在进行的操作。</font></font></p>
+
+<div class="summary"></div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10951/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p><font><font>沿着 X 轴是时间。</font><font>记录的操作（称为标记）显示为水平条，以瀑布流形式显示，以反映浏览器执行的连续性。</font></font></p>
+
+<p><font><font>选择标记后，您会在右侧的侧边栏中看到更多关于它的信息。</font><font>这包括标记的持续时间以及特定于</font></font><a href="/en-US/docs/Tools/Performance/Waterfall#Markers"><font><font>标记类型的</font></font></a><font><font>更多信息</font><font>。</font></font></p>
+
+<h2 id="标记"><a id="timeline-color-coding" name="timeline-color-coding"></a><font><font>标记</font></font></h2>
+
+<p><font><font>操作标记用颜色标记和标记。</font><font>记录下列操作：</font></font></p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 20%;"><font><font>名称和说明</font></font></th>
+   <th scope="col"><font><font>颜色</font></font></th>
+   <th scope="col"><font><font>详细资料</font></font></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 40%;">
+    <p><a id="DOM_Event_Marker" name="DOM_Event_Marker"><strong><font><font>DOM 事件</font></font></strong></a></p>
+
+    <p><font><font>为响应 DOM 事件而执行的 JavaScript 代码。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
+   <td style="width: 45%;">
+    <dl>
+     <dt><font><font>事件类型</font></font></dt>
+     <dd><font><font>例如，“点击”或“消息”。</font></font></dd>
+    </dl>
+
+    <dl>
+     <dt><font><font>活动阶段</font></font></dt>
+     <dd><font><font>例如，“目标”或“捕获”。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><font><font>在页面中执行的 JavaScript 函数标有该函数被调用的原因：</font></font></p>
+
+    <p><strong><font><font>脚本标记</font></font><br>
+     <font><font>setInterval </font></font><br>
+     <font><font>setTimeout </font></font><br>
+     <font><font>requestAnimationFrame </font></font><br>
+     <font><font>Promise回调</font></font><br>
+     <font><font>Promise Init </font></font><br>
+     <font><font>Worker </font></font><br>
+     <font><font>JavaScript URI </font></font><br>
+     <font><font>事件处理程序</font></font></strong></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>堆</font></font></dt>
+     <dd><font><font>调用堆栈，并链接到函数。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>解析 HTML</font></font></strong></p>
+
+    <p><font><font>花费时间解析页面的 HTML。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>堆</font></font></dt>
+     <dd><font><font>调用堆栈，并链接到函数。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>解析 XML</font></font></strong></p>
+
+    <p><font><font>花费时间解析页面的 XML。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>堆</font></font></dt>
+     <dd><font><font>调用堆栈，并链接到函数。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>重新计算样式</font></font></strong></p>
+
+    <p><font><font>计算适用于页面元素的计算样式。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>Restyle 提示</font></font></dt>
+     <dd><font><font>指示需要什么样的重新列表的字符串。</font><font>提示可能是以下任何一种：</font></font><br>
+     <font><font>自子</font></font><br>
+     <font><font>树</font></font><br>
+     <font><font>LaterSiblings </font></font><br>
+     <font><font>CSSTransitions </font></font><br>
+     <font><font>CSSAnimations </font></font><br>
+     <font><font>SVGAttrAnimations </font></font><br>
+     <font><font>StyleAttribute </font></font><br>
+     <font><font>StyleAttribute_Animations </font></font><br>
+     <font><font>Force </font></font><br>
+     <font><font>ForceDescendants</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>布局</font></font></strong></p>
+
+    <p><font><font>计算页面元素的位置和大小。</font><font>该操作有时称为“回流”。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>绘制</strong></p>
+
+    <p><font><font>将像素绘制到屏幕上。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10705/green.png" style="height: 21px; width: 60px;"></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>垃圾回收</font></font></strong></p>
+
+    <p><a href="/en-US/docs/Tools/Performance/Waterfall#Garbage_collection"><font><font>垃圾回收事件</font></font></a><font><font>。</font><font>非增量 GC 事件标记为“（非增量）”。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>原因</font></font></dt>
+     <dd><font><font>表示 GC 执行原因的字符串。</font></font></dd>
+     <dt><font><font>非增量原因</font></font></dt>
+     <dd><font><font>如果 GC 事件是非增量的，则该字符串指示执行非增量 GC 的原因。</font></font></dd>
+    </dl>
+
+    <div class="geckoVersionNote">
+    <p><font><font>Firefox 46 中的新增功能：如果GC 事件是由分配压力引起的，则会显示一个链接，标记为“显示分配触发器”。</font><font>点击链接可查看导致此 GC 事件的分配配置文件。</font></font></p>
+
+    <p><font><font>有关</font><font>更多详细信息，</font><font>请参阅</font></font><a href="/en-US/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection"><font><font>分配和垃圾收集</font></font></a><font><font>。</font></font></p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>周期回收</font></font></strong></p>
+
+    <p><font><font>回收 C ++ 引用计数的数据结构。</font></font></p>
+
+    <p><font><font>像垃圾回收一样，但是用于C ++对象。</font><font>请参阅 </font></font><a href="http://blog.kylehuey.com/post/27564411715/cycle-collection"><font><font>Kyle Huey 关于周期收集的博客文章</font></font></a><font><font>。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>类型</font></font></dt>
+     <dd><font><font>始终“回收”。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>CC 图减少</font></font></strong></p>
+
+    <p><font><font>循环回收的准备/预优化。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>类型</font></font></dt>
+     <dd><font><font>总是“忘记滑雪”。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>控制台</strong></p>
+
+    <p><font><font>匹配 </font></font><code>console.time() </code><font><font>与</font><font>之间的时间间隔</font></font><code>console.timeEnd()</code><font><font>。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10955/gray.png" style="height: 54px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>计时器名称</font></font></dt>
+     <dd><font><font>参数传递给 </font></font><code>console </code><font><font>函数。</font></font></dd>
+     <dt><font><font>在开始堆叠</font></font></dt>
+     <dd><font><font>调用堆栈 </font></font><code>console.time() </code><font><font>，并链接到函数。</font></font></dd>
+     <dt><font><font>在最后堆叠</font></font></dt>
+     <dd><font><font>（Firefox 41 中的新功能）。</font><font>在堆栈调用堆栈</font></font><code>console.timeEnd()</code><font><font>。</font><font>如果这在a的回调中 </font></font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code><font><font>，这也会显示</font></font><a href="/en-US/docs/Tools/Performance/Waterfall#Async_stack"><font><font>“异步堆栈”</font></font></a><font><font>。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>时间戳</font></font></strong></p>
+
+    <p><code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code><font><font>。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10953/blue.png" style="height: 54px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>标签</font></font></dt>
+     <dd><font><font>该论据传递给 </font></font><code>timeStamp()</code><font><font>。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>DOMContentLoaded</font></font></strong></p>
+
+    <p><font><font>文档的 </font></font><code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a> </code><font><font>事件。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/12191/red.png" style="height: 21px; width: 60px;"></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>加载</font></font></strong></p>
+
+    <p><font><font>文档的 </font></font><code><a href="/en-US/docs/Web/Events/load">load</a> </code><font><font>事件。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/12193/blue.png" style="height: 21px; width: 60px;"></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>主线程中的 worker 事件</font></font></strong></p>
+
+    <p><font><font>主线程向 worker 发送消息或从 worker 接收消息时显示。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/12195/orange2.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <p><font><font>之一：</font></font></p>
+
+    <dl>
+     <dt><font><font>在主线程上序列化数据</font></font></dt>
+     <dd><font><font>主线程正在序列化要发送给工作人员的消息。</font></font></dd>
+     <dt><font><font>反序列化主线程中的数据</font></font></dt>
+     <dd><font><font>主线程反序列化从工作人员收到的消息。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>worker 线程中的 worker 事件</font></font></strong></p>
+
+    <p><font><font>当 worker 从主线程收到消息或向主线程发送消息时显示。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/12197/orange2-hollow.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <p><font><font>之一：</font></font></p>
+
+    <dl>
+     <dt><font><font>在 worker 中序列化数据</font></font></dt>
+     <dd><font><font>工作人员正在序列化要发送到主线程的消息。</font></font></dd>
+     <dt><font><font>在 worker 中反序列化数据</font></font></dt>
+     <dd><font><font>工作人员正在反序列化从主线程收到的消息。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><font><font>瀑布流工具中的标记及其颜色与</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview"><font><font>瀑布流概述中的相同</font></font></a><font><font>，因此可以很容易地从一个到另一个进行关联。</font></font></p>
+
+<h3 id="过滤标记"><font><font>过滤标记</font></font></h3>
+
+<p><font><font>您可以使用</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar"><font><font>工具栏中</font></font></a><font><font>的按钮控制显示哪些标记</font><font>：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13238/perf-markers.png" style="display: block; height: 694px; margin-left: auto; margin-right: auto; width: 799px;">​​​​​</p>
+
+<h2 id="瀑布流模式"><font><font>瀑布流模式</font></font></h2>
+
+<p><font><font>您在瀑布流中看到的内容完全取决于您的网站所做的事情：JavaScript 网站会有很多橙色，而视觉动态网站会有很多紫色和绿色。</font><font>但有一些常见的模式可以提醒您可能出现的性能问题。</font></font></p>
+
+<h3 id="渲染瀑布流"><font><font>渲染瀑布流</font></font></h3>
+
+<p><font><font>您在瀑布流视图中经常会看到的一种模式如下所示：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10711/perf-timeline-waterfall.png" style="display: block; height: 286px; margin-left: auto; margin-right: auto; width: 727px;"></p>
+
+<p><font><font>这是浏览器用于响应某些事件更新页面的基本算法的可视化：</font></font></p>
+
+<ol>
+ <li><strong><font><font>JavaScript 函数调用</font></font></strong><font><font>：某些事件（例如 DOM 事件）会导致页面中的某些JavaScript 运行。</font><font>JavaScript 改变了页面的一些 DOM 或 CSSOM。</font></font></li>
+ <li><strong><font><font>重新计算样式</font></font></strong><font><font>：如果浏览器认为页面元素的计算样式已更改，则必须重新计算它们。</font></font></li>
+ <li><strong><font><font>布局</font></font></strong><font><font>：接下来，浏览器使用计算的样式来确定元素的位置和几何形状。</font><font>此操作被标记为“布局”，但有时也称为“回流”。</font></font></li>
+ <li><strong><font><font>Paint</font></font></strong><font><font>：最后，浏览器需要重新绘制元素到屏幕上。</font><font>最后一步不是按照这个顺序显示的：页面可以分成多个图层，这些图层被独立绘制，然后在称为“组合”的过程中合并。</font></font></li>
+</ol>
+
+<p><font><font>该顺序需要匹配一帧，因为屏幕在完成之前不会更新。</font><font>人们普遍接受每秒60帧是动画显示平滑的速率。</font><font>对于每秒60帧的速率，浏览器会以16.7毫秒的时间执行完整的流程。</font></font></p>
+
+<p><font><font>重要的是响应能力，浏览器​​并不总是执行每一步：</font></font></p>
+
+<ul>
+ <li><font><font><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS 动画</a> </font></font><font><font>更新页面，而无需运行任何 JavaScript。</font></font></li>
+ <li><font><font>并非所有的 CSS 属性更改都会导致重排。修改</font><font>可以改变对象的几何形状和位置的属性，例如 </font></font><code><a href="/en-US/docs/Web/CSS/width">width</a></code><font><font>，</font></font><code><a href="/en-US/docs/Web/CSS/display">display</a></code><font><font>，</font></font><code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code><font><font>，或 </font></font><code><a href="/en-US/docs/Web/CSS/top">top</a></code><font><font>，将引起回流。</font><font>但是，修改不会改变几何或位置的属性，例如 </font></font><code><a href="/en-US/docs/Web/CSS/color">color</a> </code><font><font>或 </font></font><code><a href="/en-US/docs/Web/CSS/opacity">opacity</a> </code><font><font>不会。</font></font></li>
+ <li><font><font>并非所有 CSS 属性更改都会导致重新绘制。</font><font>特别是，如果使用该</font></font><code><a href="/en-US/docs/Web/CSS/transform">transform</a> </code><font><font>属性</font><font>为元素设置动画效果</font><font>，则浏览器将为已转换的元素使用单独的图层，并且在元素移动时甚至不必重绘：元素的新位置在组合中处理。</font></font></li>
+</ul>
+
+<p><font><font>该</font></font><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties"><font><font>动画效果的 CSS 属性</font></font></a><font><font>介绍了如何为不同的CSS属性设置动画进而赋予不同的性能结果，与瀑布流如何能够帮助发出信号。</font></font></p>
+
+<h3 id="阻塞_JavaScript"><font><font>阻塞 JavaScript</font></font></h3>
+
+<p><font><font>默认情况下，站点的 JavaScript 在与浏览器用于布局更新，重绘，DOM 事件等相同的线程中执行。</font><font>这意味着长时间运行的 JavaScript 函数可能会导致无响应（无效）：动画可能不平滑，或者该网站甚至可能会冻结。</font></font></p>
+
+<p><font><font>同时使用帧速率工具和瀑布流，很容易看到长时间运行的 JavaScript 引起响应问题的时间。</font><font>在下面的屏幕截图中，我们放大了导致帧频下降的 JS 函数：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10973/perf-js-blocking-waterfall.png" style="display: block; height: 432px; margin-left: auto; margin-right: auto; width: 1128px;"></p>
+
+<p><font><font>在</font></font><font><font><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">密集的 JavaScript</a> </font></font><font><font>文章显示了瀑布流如何突出造成长期的 JavaScript 函数响应的问题，以及如何使用异步方法来保持主线程响应。</font></font></p>
+
+<h3 id="昂贵的绘制"><font><font>昂贵的绘制</font></font></h3>
+
+<p><font><font>某些绘画效果（例如 </font></font><code><a href="/en-US/docs/Web/CSS/box-shadow">box-shadow</a></code><font><font>）可能很昂贵，尤其是在浏览器必须在每一帧中计算它们的过渡中应用它们时。</font><font>如果您看到帧频下降，尤其是在图形密集型操作和转换期间，请检查瀑布流是否有长绿色标记。</font></font></p>
+
+<h3 id="垃圾回收"><font><font>垃圾回收</font></font></h3>
+
+<p><font><font>瀑布流中的红色标记表示垃圾回收（GC）事件，其中 </font></font><font><font><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> </font></font><font><font>（Firefox 中的 JavaScript 引擎）遍历堆寻找不再可及的内存并随后释放它。</font><font>GC 与性能相关，因为它在运行时必须暂停 JavaScript 引擎，以便程序暂停并且完全无响应。</font></font></p>
+
+<p><font><font>为了减少暂停的时间，SpiderMonkey 实现了</font></font><em><font><font>增量 GC</font></font></em><font><font>：这意味着它可以以相当小的增量执行垃圾回收，让程序在两者之间运行。</font><font>但有时候，它需要执行完整的非增量回收，程序必须等待它完成。</font></font></p>
+
+<ul>
+</ul>
+
+<p><font><font>在试图避免 GC 事件，尤其是非增量 GC 事件时，明智的做法是不尝试针对JavaScript 引擎的特定实现进行优化。</font><font>SpiderMonkey 使用一套复杂的启发式方法来确定何时需要 GC，何时需要非增量 GC。</font><font>一般来说，虽然：</font></font></p>
+
+<ul>
+ <li><font><font>GC 在分配大量内存时需要</font></font></li>
+ <li><font><font>当内存分配速率足够高以至于 SpiderMonkey 在增量GC期间可能会耗尽内存时，通常需要非增量GC</font></font></li>
+</ul>
+
+<p><font><font>当瀑布流记录 GC 标记时，它表示：</font></font></p>
+
+<ul>
+ <li><font><font>GC 是否是增量式的</font></font></li>
+ <li><font><font>GC 执行的原因</font></font></li>
+ <li><font><font>如果 GC 是非递增的，则它是非递增的原因</font></font></li>
+ <li><font><font>从 Firefox 46 开始，如果 GC 事件是由分配压力引起的，则会显示一个链接，标记为“显示分配触发器”。</font><font>点击链接可查看导致此 GC 事件的分配配置文件。</font><font>有关</font><font>更多详细信息，</font><font>请参阅</font></font><font><font><a href="/en-US/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">分配和垃圾</a>回收</font></font><font><font>。</font></font></li>
+</ul>
+
+<h2 id="使用控制台_API_添加标记"><font><font>使用控制台 API 添加标记</font></font></h2>
+
+<p><font><font>两个标记直接由</font></font><font><font><a href="/en-US/docs/Web/API/Console">控制台 API</a> </font></font><font><font>调用</font><font>控制</font><font>：“控制台”和“时间戳”。</font></font></p>
+
+<h3 id="控制台标记"><font><font>控制台标记</font></font></h3>
+
+<p><font><font>这些使您可以标记录制的特定部分。</font></font></p>
+
+<p><font><font>要制作控制台标记，请</font></font><font><font>在该部分的开始处调用</font></font><code>console.time() </code><font><font>结尾处</font><font>调用</font></font><code>console.timeEnd()</code><font><font>。</font><font>这些函数带有一个用于命名该部分的参数。</font></font></p>
+
+<p><font><font>例如，假设我们有这样的代码：</font></font></p>
+</div>
+
+<pre class="brush: js notranslate">var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i &lt; iterations; i++) {
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c &lt;= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+
+  console.timeEnd("calculating...");
+
+  return primes;
+}</pre>
+
+<p><font><font>瀑布流的输出将如下所示：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10967/perf-console-time.png" style="display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1192px;"></p>
+
+<p><font><font>标记用您传递给的参数 </font></font><code>console.time() </code><font><font>进行标记，当您选择标记时，可以在右侧边栏中看到程序堆栈。</font></font></p>
+
+<h4 id="异步堆栈"><font><font>异步堆栈</font></font></h4>
+
+<p class="geckoVersionNote"><font><font>Firefox 中的新功能41。</font></font></p>
+
+<p><font><font>从 Firefox 41 开始，右侧侧边栏也会在结尾显示堆栈：即在 </font></font><code>console.timeEnd()</code><font><font>被调用时。</font><font>如果 </font></font><code>console.timeEnd() </code><font><font>从 a 的解析中被调用 </font></font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code><font><font>，它也会显示“（Async：Promise）”​​，在这个下面它将显示“异步堆栈”：也就是说，在承诺的地方调用堆栈。</font></font></p>
+
+<p><font><font>例如，考虑这样的代码：</font></font></p>
+
+<pre class="brush: js notranslate">var timerButton = document.getElementById("timer");
+timerButton.addEventListener("click", handleClick, false);
+
+function handleClick() {
+  console.time("timer");
+  runTimer(1000).then(timerFinished);
+}
+
+function timerFinished() {
+  console.timeEnd("timer");
+  console.log("ready!");
+}
+
+function runTimer(t) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve, t);
+  });
+}</pre>
+
+<p><font><font>瀑布流将显示一个标志物之间的期间 </font></font><code>time() </code><font><font>和 </font></font><code>timeEnd()</code><font><font>，如果你选择它，你会看到侧边栏的异步栈：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11179/async-stack.png" style="display: block; height: 378px; margin-left: auto; margin-right: auto; width: 352px;"></p>
+
+<h3 id="时间戳标记"><font><font>时间戳标记</font></font></h3>
+
+<p><font><font>时间戳使您可以在录制中标记一个瞬间。</font></font></p>
+
+<p><font><font>要制作时间戳记标记，请调用 </font></font><code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code><font><font>。</font><font>您可以传递参数来标记时间戳。</font></font></p>
+
+<p><font><font>例如，假设我们调整上面的代码以每循环 10 次迭代一次时间戳，并用迭代号标记：</font></font></p>
+
+<pre class="brush: js notranslate">var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i &lt; iterations; i++) {
+
+    if (i % 10 == 0) {
+      console.timeStamp(i.toString());
+    }
+
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c &lt;= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+  console.timeEnd("calculating...");
+  return primes;
+}</pre>
+
+<p><font><font>在瀑布现在你会看到这样的东西：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10971/perf-timestamp.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 1192px;"></p>
diff --git a/files/zh-cn/tools/profiler/index.html b/files/zh-cn/tools/profiler/index.html
new file mode 100644
index 0000000000..9e6dfbcb48
--- /dev/null
+++ b/files/zh-cn/tools/profiler/index.html
@@ -0,0 +1,139 @@
+---
+title: JavaScript Profiler
+slug: Tools/Profiler
+translation_of: Tools/Performance
+---
+<div>{{ToolsSidebar}}</div><p>使用Profiler工具找到你的JavaScript代码的瓶颈. Profiler会定期统计JavaScript样本的堆栈信息.</p>
+
+<p>你可以通过在Web Developer菜单下选择Profiler来启动它. 在Linux和OS X下，你可以在Tools菜单下找到Web Developer，而在windows下，Web Developer则在FIrefox菜单下.</p>
+
+<p>当Profiler被选择后，工具箱就会被打开.</p>
+
+<h2 id="抽样分析器"><a name="sampling-profilers">抽样分析器</a></h2>
+
+<p>JavaScript Profiler是一个抽样分析器. 这意味着它会定期对JavaScript引擎的状态取样， 并且记录取样时代码运行的堆栈信息. 统计学上, 我们运行可接受样本数量的函数，花费的时间相当于浏览器运行它的时间，所以你可以很好的从你的代码里找到瓶颈。<br>
+ <br>
+ <a name="profiling-example">例如，考虑这样一个程序:</a></p>
+
+<pre class="brush: js">function doSomething() {
+  var x = getTheValue();
+  x = x + 1;                   // -&gt; sample A
+  logTheValue(x);
+}
+
+function getTheValue() {
+  return 5;
+}
+
+function logTheValue(x) {
+ console.log(x);               // -&gt; sample B, sample C
+}
+
+doSomething();</pre>
+
+<p>Suppose we run this program with the profiler active, and in the time it takes to run, the profiler takes three samples, as indicated in the inline comments above.</p>
+
+<p>They're all taken from inside <code>doSomething()</code>, but the second two are inside the <code>logTheValue()</code> function called by <code>doSomething()</code>. So the profile would consist of three stack traces, like this:</p>
+
+<pre>Sample A: doSomething()
+Sample B: doSomething() &gt; logTheValue()
+Sample C: doSomething() &gt; logTheValue()</pre>
+
+<p>This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that <code>logTheValue()</code> is the bottleneck in our code.</p>
+
+<h2 id="Creating_a_profile">Creating a profile</h2>
+
+<p>点击探查器中的秒表按钮来开始记录。当探查器正在记录时，秒表按钮是高亮状态。当我们再一次点击秒表按钮时，记录将停止并保存为一个新的Profile:</p>
+
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p>
+
+<p>Once you've clicked "Stop", the new profile will open automatically:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>This pane's divided into two parts:</p>
+
+<ul>
+ <li>The left-hand side lists all the profiles you've captured and allows you to load each one. Just above this there are two buttons: the <em>stopwatch</em> button allows you to record a new profile while the <em>Import...</em> button allows you to import previously saved data. When profile is selected, you can save its data as a JSON file by clicking the <em>Save</em> button.</li>
+ <li>The right-hand side displays the currently loaded profile.</li>
+</ul>
+
+<h2 id="Analyzing_a_profile">Analyzing a profile</h2>
+
+<p>The profile is split into two parts:</p>
+
+<ul>
+ <li>the <a href="#profile-timeline" title="#profile-timeline">profile timeline</a></li>
+ <li>the <a href="#profile-details" title="#profile-details">profile details</a></li>
+</ul>
+
+<h3 id="Profile_timeline"><a name="profile-timeline">Profile timeline</a></h3>
+
+<p>The profile timeline occupies the top part of the profile display:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">The horizontal axis is time, and the vertical axis is call stack size at that sample. Call stack represents the amount of active functions at the time when the sample was taken.</p>
+
+<p>Red samples along the chart indicate the browser was unresponsive during that time, and a user would notice pauses in animations and responsiveness. If a profile has red samples, consider breaking this code up into several events, and look into using <a href="/en-US/docs/Web/API/window.requestAnimationFrame" title="/en-US/docs/Web/API/window.requestAnimationFrame">requestAnimationFrame</a> and <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Workers</a>.</p>
+
+<p>You can examine a specific range within the profile by clicking and dragging inside the timeline:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>A new button then appears above the timeline labeled "Sample Range [AAA, BBB]". Clicking that button zooms the profile, and the details view underneath it, to that timeslice:</p>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Profile_details"><a name="profile-details">Profile details</a></h3>
+
+<p>The profile details occupy the bottom part of the profile display:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">When you first open a new sample, the sample pane contains a single row labeled "(total)", as in the screenshot above. If you click the arrow next to "(total)", you'll see a list of all the top-level functions which appear in a sample.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p>
+
+<p><strong>Running time</strong> shows the total number of samples in which this function appeared<a href="#footnote-1"><sup>1</sup></a>, followed by the percentage of all samples in the profile in which this function appeared. The first row above shows that there were 2021 samples in the entire profile, and the second row shows that 1914, or 94.7%, of them were inside the <code>detectImage()</code> function.</p>
+
+<p><strong>Self</strong> shows the number of samples in which the sample was taken while executing this function itself, and not a function it was calling. In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, <code>doSomething()</code> would have a <strong>Running time</strong> of 3 (samples A, B, and C), but a <strong>Self</strong> value of 1 (sample A).</p>
+
+<p>The third column gives the name of the function along with the filename and line number (for local functions) or basename and domain name (for remote functions). Functions in gray are built-in browser functions: functions in black represent JavaScript loaded by the page. If you hover the mouse over a row you'll see an arrow to the right of the function's identifier: click the arrow and you'll be taken to the function source.</p>
+
+<h3 id="Expanding_the_call_tree">Expanding the call tree</h3>
+
+<p>In a given row, if there are any samples taken while we were in a function called by this function (that is, if <strong>Running Time</strong> is greater than <strong>Self</strong> for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.</p>
+
+<p>In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, the fully-expanded call tree would look like this:</p>
+
+<table class="standard-table" style="height: 100px; width: 378px;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><strong>Running Time</strong></td>
+   <td style="text-align: center;"><strong>Self</strong></td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">3            100%</td>
+   <td style="text-align: center;">1</td>
+   <td style="text-align: center;">doSomething()</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">2              67%</td>
+   <td style="text-align: center;">2</td>
+   <td style="text-align: center;">logTheValue()</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>To take a more realistic example: in the screenshot below, looking at the second row we can see that 1914 samples were taken inside the <code>detectImage()</code> function. But all of them were taken in functions called by <code>detectImage()</code> (the <strong>Self</strong> cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>This tells us that 6 samples were taken when we were actually executing <code>detectAtScale(), </code>12 when we were executing <code>getRect()</code> and so on.</p>
+
+<h2 id="Footnotes">Footnotes</h2>
+
+<ol>
+ <li><a name="footnote-1">If the function is called multiple times from different sources, it will be represented multiple times in the Profiler output. So generic functions like <code>forEach</code> will appear multiple times in the call tree.</a></li>
+</ol>
+
+<p> </p>
diff --git a/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html
new file mode 100644
index 0000000000..13f27d0a4a
--- /dev/null
+++ b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html
@@ -0,0 +1,38 @@
+---
+title: Debugging Firefox for Android with WebIDE
+slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone
+---
+<div>{{ToolsSidebar}}</div><p>This article describes how to connect the <a href="/en-US/docs/Tools">Firefox Developer Tools</a> to Firefox for Android from Firefox 36 onwards.</p>
+<p>It's been possible for a long time to connect the Firefox Developer Tools to Firefox for Android so you can debug your mobile website. Until now, though, this was a fairly complex and error-prone process. From Firefox 36 we've made the process much simpler: in particular, you don't need to deal directly with the <a href="http://developer.android.com/tools/help/adb.html">adb</a> tool at all. Now you connect using  <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>, which takes care of setting up adb behind the scenes.</p>
+<div class="note">
+ <p>For this to work, you need at least Firefox 36 on the desktop and Firefox 35 on the mobile device. If you need to use an earlier version, see the older instructions for <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connecting the developer tools to Firefox for Android</a>.</p>
+</div>
+<p> </p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/9011/remote-debugging-overview-fx36.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device.</p>
+<h2 id="Prerequisites">Prerequisites</h2>
+<p>First, you'll need:</p>
+<ul>
+ <li>a desktop or laptop computer with Firefox 36 or higher running on it</li>
+ <li>an Android device <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable of running Firefox for Android</a> with Firefox for Android 35 or higher running on it</li>
+ <li>a USB cable to connect the two devices</li>
+</ul>
+<h3 id="ADB_Helper">ADB Helper</h3>
+<p>Your desktop Firefox also needs to have the ADB Helper add-on, version 0.7.1 or higher. This should be installed for you automatically the first time you open WebIDE. To check the version, type <code>about:addons</code> into the browser's address bar and you should see ADB listed.</p>
+<p>If you don't have ADB Helper version 0.7.1 or higher, select "Manage Extra Components" from the "Projects" menu, and you'll see the "Extra Components" window, which will contain an entry for ADB Helper:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/9021/extra-components.png" style="display: block; margin-left: auto; margin-right: auto;">Click "uninstall" then "install", and you should now have the latest version.</p>
+<h3 id="Setting_up_the_Android_device">Setting up the Android device</h3>
+<p>First, enable USB debugging by following <a class="external external-icon" href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">steps 2 and 3 of this link only</a>.</p>
+<p>Next, enable remote debugging in Firefox for Android. Open the browser, open its menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>The browser might display a notification reminding you to set up port forwarding, which you can ignore.</p>
+<h2 id="Connecting">Connecting</h2>
+<p>Connect the Android device to the desktop with the USB cable, open <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>, and open the <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">"Runtimes" menu</a>. You will see Firefox for Android listed as a debugging target under "USB DEVICES":</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/9013/remote-debugging-android-runtime.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>Select it. On the Android device, you'll now see a warning message:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/9031/incoming-warning.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>Click OK. Now click the "Open App" menu in WebIDE. You'll see a list of all the tabs open on the device:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/9015/remote-debugging-android-open-tabs.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>Select a tab to attach the developer tools to it:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/9029/remote-debugging-android-attached.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>Now you should be able to use all the Firefox developer tools that support remote debugging. See the page on <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging</a> for more details.</p>
diff --git a/files/zh-cn/tools/remote_debugging/firefox_for_android/index.html b/files/zh-cn/tools/remote_debugging/firefox_for_android/index.html
new file mode 100644
index 0000000000..72b03dd937
--- /dev/null
+++ b/files/zh-cn/tools/remote_debugging/firefox_for_android/index.html
@@ -0,0 +1,84 @@
+---
+title: 远程调试安卓版Firefox浏览器
+slug: Tools/Remote_Debugging/Firefox_for_Android
+translation_of: Tools/Remote_Debugging/Firefox_for_Android
+---
+<div>{{ToolsSidebar}}</div><p>本文将介绍通过usb连接对<a href="/en-US/docs/Mozilla/Firefox_for_Android">安卓版Firefox</a>进行远程调试的方法</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>本文分成两个部分：第一部分为“前期准备”，属于只需要设置一次的内容，第二部分为“连接”，属于每次连接设备都需要做的工作。</p>
+<h2 id="前期准备">前期准备</h2>
+<p>首先，你需要：</p>
+<ul>
+ <li>一台安装了Firefox 15及更高版本的台式机或笔记本</li>
+ <li>一台运行着<a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">安卓版Firefox</a>  15及更高版本的Android设备</li>
+ <li>一条能够连接两台设备的USB线</li>
+</ul>
+<h3 id="配置ADB工具">配置ADB工具</h3>
+<p>接下来，你需要使用 <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> 命令行工具来使两台设备相互通信。</p>
+<h4 class="note" id="配置Android设备">配置Android设备</h4>
+<ul>
+ <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">开启USB调试 (详细步骤位于链接内容的第二章节)</a>。</li>
+ <li>通过USB连接Android设备与电脑。</li>
+</ul>
+<h4 class="note" id="配置电脑">配置电脑</h4>
+<ul>
+ <li>安装设备相对应的 <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK（软件开发工具包）</a> 。</li>
+ <li>通过Android SDK安装 <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a>。</li>
+ <li>将Android Platform Tools 中的adb工具安装在 Android SDK的安装目录中的"platform-tools" 目录，请确保"platform-tools" 目录位于此路径下。</li>
+</ul>
+<p>检查ADB的工作状态, 打开电脑的cmd命令提示符并输入如下命令:</p>
+<pre>adb devices</pre>
+<p>你应当看到如下输出提示:</p>
+<pre>List of devices attached
+51800F220F01564 device
+</pre>
+<p>(其中的十六进制字符串将会有所不同.)</p>
+<p>如果您的情况与上文符， 说明您已成功配置<code>adb</code> 工具并且成功与安卓设备连接。</p>
+<h3 id="启用远程调试">启用远程调试</h3>
+<p>接下来, 你需要在安卓设备与电脑之间开启远程调试。</p>
+<h4 id="安卓版Firefox_24_及更早的版本">安卓版Firefox 24 及更早的版本</h4>
+<p>要在设备上启用远程调试，你需要将<code>devtools.debugger.remote-enable</code> 选项设置为 <code>true（开启）</code>.</p>
+<p> 进入安卓版Firefox浏览器的<code>about（关于）:config（配置）</code> 选项, 在搜索框中输入 "devtools" 并点击搜索键，你将看到所有关于devtools的选项. 找到关于 <code>devtools.debugger.remote-enabled</code> 的选项, 并按下 "Toggle（切换）".</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h4 class="note" id="安卓版Firefox_25_及更高版本">安卓版Firefox 25 及更高版本</h4>
+<p>在安卓版Firefox 25 及更高版本中,拥有一个开启远程调试的菜单项，打开菜单, 选择 "Settings（设置）", 接下来选择"Developer tools（开发工具）" (在某些安卓设备中，你需要选择"More（更多）"后才能看到"Settings（设置）"). 选中 "Remote debugging（远程调试）" 的复选框（即打勾）:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>浏览器将会显示一个通知，提示您配置转发端口，我们将在稍后进行此步骤</p>
+<h4 id="电脑方面">电脑方面</h4>
+<p>在电脑上，远程调试需要在工具箱的设置中启用。 <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">打开工具箱</a>, 在其 <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar（工具栏）</a>中单机“setting”（设置）选项,并选中有关"Enable remote debugging" （开启远程调试）的 <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">设置 </a>选项（）:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<div class="Note">
+  如果您使用Firefox 27及更高版本，你需要重启浏览器来使设置生效。</div>
+<p>然后你将会看到web开发(Web Developer) 中多出一个标有"Connect...（连接...）"的新选项:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h2 id="连接">连接</h2>
+<p>现在你可以将远程调试工具与安卓设备连接，如果您还没有做好某些准备工作的话，请首先用usb线将安卓设备与电脑相连</p>
+<h4 class="note" id="电脑方面_2">电脑方面</h4>
+<p>对于安卓版Firefox 35及更高版本，请进入cmd命令提示符，并输入:</p>
+<pre>adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket</pre>
+&lt;&gt;p对于其他类型的安卓版Firefox浏览器, 代码中的 org.mozilla.firefox 部分需要参照下文进行更改:<p></p>
+
+   <li>org.mozilla.firefox_beta （用于beat测试版）</li>
+    <li>org.mozilla.fennec_aurora （用于Aurora极光版）</li>
+   <li>org.mozilla.fennec （用于nightly每夜版）</li>
+    <li>对于安卓版Firefox34及更早版本，请输入如下代码</li>
+    <pre>adb forward tcp:6000 tcp:6000</pre>
+<p>(如果你已经修改了Android设备使用的调试端口值，则需要相应地调整输入代码中的端口值)</p>
+<p>对于Firefox OS, 请输入如下命令符:</p>
+<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+<p>你每次使用usb线将物理桌面与安卓设备连接时都需要输入此命令。</p>
+<p>然后进入Firefox中的 Web Developer (Web开发菜单)，并且选择"Connect...(连接...）"。你将会看到如下页面:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">除非您已经修改了端口值，否则请选择6000，然后按“connecting(连接)”按钮。</p>
+<h4 class="note" id="安卓设备方面">安卓设备方面</h4>
+<p>接下来您会在安卓设备上看到如下的对话框，要求您确认连接</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">请按下“OK”。桌面会等待几秒钟来使您确认此对话框：如果出现超时（time out），只需在桌面的对话框中再次按下“连接”按钮后重复上述操作即可。</p>
+<h4 class="note" id="电脑方面_3">电脑方面</h4>
+<p>接下来，电脑将会显示如下界面:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">这是在询问调试的对象是正在运行的网页内容还是是浏览器本身的代码</p>
+<ul>
+ <li>你将在每个打开的选项卡下看到“Available remote tabs(可用的远程选项卡)”一项，点击它将会给相应选项卡中的网页内容附加调试工具，如果你想调试某个网页内容，请选择对应的内容选项卡。</li>
+ <li>你将看到“Available remote processes(可用远程进程)”选项：这是浏览器本身的进程。如果您需要调试的浏览器的代码，请选择此选项。</li>
+</ul>
+<p>让我们选择附加到mozilla.org网站。该工具箱将打开一独立窗口，连接到安卓版Firefox浏览器正与Mozilla.org连接的选项卡（如下图）:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>这个工具箱与其所含的工具，在与安卓设备连接时，其工作原理与调试方法与本地连接时的相同。<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/zh-cn/tools/remote_debugging/index.html b/files/zh-cn/tools/remote_debugging/index.html
new file mode 100644
index 0000000000..9ce762b8f4
--- /dev/null
+++ b/files/zh-cn/tools/remote_debugging/index.html
@@ -0,0 +1,47 @@
+---
+title: Remote Debugging
+slug: Tools/Remote_Debugging
+tags:
+  - Tools
+  - 环境
+  - 远程调试
+translation_of: Tools/Remote_Debugging
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>您可以使用<a href="/zh-CN/docs/Tools">Firefox开发者工具</a>在桌面上来远程调试在同一设备上的不同浏览器或一个完全不同的设备上的 Web 站点或者是 Web app。其他浏览器可能是在同一设备上的工具或在不同的设备上，比如使用 USB 连接手机。</p>
+
+<p>连接开发人员的工具的详细说明会在运行时特定说明</p>
+
+<h2 id="Gecko-based_环境">Gecko-based 环境</h2>
+
+<p>首先，你可以用开发者工具连接 Gecko-based 环境，诸如 Firefox Desktop, Firefox for Android, Firefox OS, and Thunderbird。</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">Firefox Desktop</a></li>
+ <li>Firefox for Android
+  <ul>
+   <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">over USB</a></li>
+   <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">over WiFi</a></li>
+  </ul>
+ </li>
+ <li>Firefox OS
+  <ul>
+   <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_USB">over USB</a></li>
+   <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">over WiFi</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li>
+</ul>
+
+<h2 id="其他环境">其他环境</h2>
+
+<p>试运行的 <a href="/en-US/docs/Tools/Valence">Valence</a> 扩展附件能让你调试在非 Gecko 环境下的 Web 站点，诸如 Google Chrome Desktop, Chrome on Android, and Safari on iOS 。</p>
+
+<p>Valence 在 <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a> 中默认启用。</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Valence">Chrome for Android</a></li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging/Chrome_Desktop">Chrome Desktop</a></li>
+ <li><a href="/en-US/docs/Tools/Valence">Safari on iOS</a></li>
+</ul>
diff --git a/files/zh-cn/tools/responsive_design_view/index.html b/files/zh-cn/tools/responsive_design_view/index.html
new file mode 100644
index 0000000000..b0ea0712a4
--- /dev/null
+++ b/files/zh-cn/tools/responsive_design_view/index.html
@@ -0,0 +1,83 @@
+---
+title: 响应式设计视图
+slug: Tools/Responsive_Design_View
+translation_of: Tools/Responsive_Design_Mode
+---
+<div>{{ToolsSidebar}}</div><p><a href="/zh-CN/docs/Web_Development/响应式_Web_设计">响应式设计</a>采用不同的屏幕尺寸来呈现在各种设备（例如移动电话或者平板电脑）下的可视情况。响应式设计视图使您可以很容易地看到您的网站或者网站app在不同屏幕尺寸下的外观。</p>
+
+<p>{{EmbedYouTube("LBcE72sG2s8")}}</p>
+
+<p>下面的截屏是在328*480分辨率下展示的一个维基百科移动版页面。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png">响应式设计视图使用非常方便，您可以快速和精确地改变展示区域的大小。</p>
+
+<p>当然，您可以改变浏览器窗口本身的大小。但是如果把浏览器窗口变小，其他的浏览器内容也会相应变小，可能会使得浏览器界面变得不那么好用了。</p>
+
+<p>当你打开响应式视图，你可以继续正常地进行浏览。While the Responsive Design View is enabled, you can continue browsing as you normally would in the resized content area.</p>
+
+<h2 id="打开和关闭">打开和关闭</h2>
+
+<p>有两个方法打开响应式视图：</p>
+
+<ul>
+ <li>在火狐浏览器菜单（或者工具栏菜单-如果您选择了显示菜单，或者是您在使用Mac OS X）下的Web开发者子菜单下选择“响应式视图”；</li>
+ <li>点击工具箱工具栏里的“响应式设计模式”按钮</li>
+</ul>
+
+<p>有三个方法关闭响应式视图</p>
+
+<ul>
+ <li>再次选择菜单里的“响应式设计视图”</li>
+ <li>按键盘上的Esc键</li>
+ <li>点击左上角的“关闭”按钮</li>
+</ul>
+
+<h2 id="改变大小">改变大小</h2>
+
+<p>有两个方法改变内容区域的大小：</p>
+
+<ul>
+ <li>使用<a href="#select-size">“选择大小”按钮</a></li>
+ <li>点击和拖放内容区域右边和下方，或者是右下角的控件</li>
+</ul>
+
+<p>如果您使用拖放的方式改变大小，可以按住Control键（Mac OS X下用Cmd键）来减缓改变的速度，可以更精确地控制大小。</p>
+
+<div style="overflow: hidden;">
+<h2 id="响应式视图控件">响应式视图控件</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6139/responsive-design-view-controls.png" style="display: block; height: 356px; margin-left: auto; margin-right: auto; width: 545px;">在响应式视图窗口的顶部有五个控件：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Close</strong></td>
+   <td>关闭响应式视图，回到正常浏览模式</td>
+  </tr>
+  <tr>
+   <td><strong><a name="select-size">Select size</a></strong></td>
+   <td>从预设的分辨率组合内选择，或者自定义分辨率</td>
+  </tr>
+  <tr>
+   <td><strong>Portrait/Landscape</strong></td>
+   <td>选择屏幕的水平或者垂直模式</td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>Simulate touch events</strong></p>
+   </td>
+   <td>
+    <p>打开/关闭模拟触摸事件，鼠标事件将被模拟为<a href="/zh-CN/docs/Web/Guide/API/DOM/Events/Touch_events">触摸事件</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>Take screenshot</strong></p>
+   </td>
+   <td>内容区域的截屏，截屏内容保存到火狐的默认下载位置</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/zh-cn/tools/rulers/index.html b/files/zh-cn/tools/rulers/index.html
new file mode 100644
index 0000000000..619e8372a1
--- /dev/null
+++ b/files/zh-cn/tools/rulers/index.html
@@ -0,0 +1,26 @@
+---
+title: 标尺
+slug: Tools/Rulers
+translation_of: Tools/Rulers
+---
+<div>{{ToolsSidebar}}</div><p class="geckoVersionNote">Firefox 40 加入.</p>
+
+<p>从Firefox 40开始，你能在网页上添加横向和纵向的标尺了：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11181/rulers.png" style="display: block; height: 555px; margin-left: auto; margin-right: auto; width: 700px;">标尺的单位是像素。</p>
+
+<p>有两种方式显示或隐藏标尺。</p>
+
+<ul>
+ <li>
+  <p class="brush: bash">在开发者工具(可使用 <code>shift+F2</code> 激活)条上输入<code> rulers </code>指令。</p>
+ </li>
+ <li>在快捷工具栏显示一个专有的按钮。不过这个默认按钮是隐藏的，你可以在<a href="/en-US/docs/Tools/Tools_Toolbox#Settings">设置</a>页面的“切换页面上的标尺”选项激活它。</li>
+</ul>
+
+<p>使用须知：</p>
+
+<ul>
+ <li>每个页面<strong>都要点击按钮</strong>并<strong>刷新</strong>之后才能使用。</li>
+ <li>这个功能并没有永久固定成为标准。</li>
+</ul>
diff --git a/files/zh-cn/tools/scratchpad/index.html b/files/zh-cn/tools/scratchpad/index.html
new file mode 100644
index 0000000000..ecfae26051
--- /dev/null
+++ b/files/zh-cn/tools/scratchpad/index.html
@@ -0,0 +1,118 @@
+---
+title: Scratchpad
+slug: Tools/Scratchpad
+tags:
+  - Scratchpad
+  - 工具
+  - 网页开发
+  - 网页开发：工具
+translation_of: Archive/Tools/Scratchpad
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Scratchpad 使用JavaScript去提供一种实验环境。你能编写，执行代码，并且查看代码和Web页面交互的结果</p>
+
+<p>和被设计为一次只能执行单行命<a class="toggler" href="https://developer.mozilla.org/zh-CN/docs/Tools/Scratchpad#">更多工具</a>令的<a href="/zh-CN/Tools/Web_Console" title="en/Using the Web Console"> Web Console</a> 不同的是， Scratchpad 让你可以编辑大段的Javascript代码, 然后就取决于你希望如何输出，有多种方式执行这些代码。</p>
+
+<p>{{EmbedYouTube("Pt7DZACyClM")}}</p>
+
+<h2 id="使用"><strong>使用</strong></h2>
+
+<h3 id="在单独窗口中打开Scratchpad"><strong>在单独窗口中打开Scratchpad</strong></h3>
+
+<p>有几种不同的方式可以在独立窗口中打开Scratchpad</p>
+
+<ul>
+ <li>按下<kbd>Shift</kbd> + <kbd>F4</kbd>, 开启Scratchpad窗口，或是从Web Developer 菜单 (在OS X 和Linux 中是Tools菜单的子菜单) 中选择Scratchpad，开启的Scratchpad包含一个提供如何使用Scratchpad的帮助信息的注释。从这里你能直接开始书写代码。</li>
+ <li>点击扳手图标 (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), 你可以在主工具栏或者汉堡菜单 (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">)找到, 然后选择"Scratchpad".</li>
+</ul>
+
+<p>这都能在单独窗口中打开Scratchpad。</p>
+
+<h3 id="从工具箱中打开Scratchpad">从工具箱中打开Scratchpad</h3>
+
+<div class="geckoVersionNote">New in Firefox 47.</div>
+
+<p>从Firefox 47起，你能从<a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>中打开Scratchpad。首先你需要在<a href="https://developer.mozilla.org/zh-CN/docs/Tools/Tools_Toolbox#Settings_2">设置</a>的"Default Firefox Developer Tools"部分里选中"Scratchpad"。</p>
+
+<p>现在你应该可以在Toolbox中使用Scratchpad了，还有其他工具，如页面检查器和Web控制台。这在<a href="/zh-CN/docs/Tools/Web_Console/Split_console">拆分控制台模式</a>下特别有用：您可以使用Scratchpad作为持久性，多行编辑器，或者控制台来与页面进行交互。</p>
+
+<h3 id="编辑"><strong>编辑</strong></h3>
+
+<p>Scratchpad 窗口看起来如下图 (在OS X中菜单条在屏幕顶部)</p>
+
+<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p>
+
+<p>如果想了解编辑器本身或者有用的键盘快捷键，请查看 <a href="/zh-CN/Tools/Using_the_Source_Editor" title="Using the Source Editor">Using the Source Editor</a></p>
+
+<p>File菜单提供 Javascript 代码的保存和加载，以便以后你能反复使用这些代码。</p>
+
+<h4 id="代码补完">代码补完</h4>
+
+<p>Scratchpad 使用<a href="http://ternjs.net/">tern code analysis engine</a> 提供自动补完建议并使用弹出窗口显示当前符号的关于信息。使用 Control + Space 便可以呼出自动补完。如果是为了显示弹出信息， 在Firefox 32中使用<kbd>Shift</kbd> + <kbd>Space</kbd>。</p>
+
+<p>例如，键入<kbd>d</kbd>, 然后按下<kbd>Control</kbd> + <kbd>Space</kbd>。 你可以看到自动补完的弹框，类似如下</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">每个显示在建议之前的图标表明了类型，当前高亮显示的会弹出更多的信息，使用<kbd>↑</kbd> 或 <kbd>↓</kbd>箭头切换选项并使用<kbd>Enter</kbd> 或 <kbd>Tab</kbd>来选择高亮的选项。</p>
+
+<h4 id="內连文档">內连文档</h4>
+
+<p>当鼠标位于某个标识符上时，通过按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd> 进行显示内连文档的弹框. 举个例子, 当你输入 <code>document</code>.<code>addEventListener</code>, 人后按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>, 你将会看到该方法的语法摘要以及一段简介:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;">这个"[docs]"链接指向该标志的MDN文档</p>
+
+<h3 id="Executing">Executing</h3>
+
+<p class="note">当你写好了你的代码后，选中你想要的代码来运行。如果你没有选中任何代码，整个窗口的代码都会被执行。选择你想要的运行方式，可以通过顶部的按钮、运行菜单，或者上下文菜单。代码会在当前选中的Tab范围内被执行。你在函数外声明的变量会被加到这个标签栏的全局对象中</p>
+
+<p>这里有4个可用的选项：</p>
+
+<h4 id="Run">Run</h4>
+
+<p>当你选择Run选项，选中的代码会被执行。这是用来执行那些只是操纵页面内容而不需要返回结果的函数或者其他代码的。</p>
+
+<h4 id="Inspect">Inspect</h4>
+
+<p>Inspect选项会像Run选项一样执行代码，但是当代码返回时会打开一个对象检查器让你验证返回值</p>
+
+<p>例如，当你敲入这段代码</p>
+
+<pre>window
+</pre>
+
+<p>然后选择Inspect，对象检查器就会显示如下：</p>
+
+<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p>
+
+<h4 id="Display">Display</h4>
+
+<p>Display选项执行选中的代码，然后直接将结果作为一个注解插入到你的Sratchpad编辑窗口，所以你可以把它当作一个<a href="http://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a></p>
+
+<h4 id="Reload_And_Run">Reload And Run</h4>
+
+<p>Reload And Run选项只在执行菜单可用，它首先重新加载页面，然后当页面加载完毕执行代码。这在比较古老的运行环境中比较有用。</p>
+
+<h2 id="在浏览器上下文中运行Scratchpad">在浏览器上下文中运行Scratchpad</h2>
+
+<p>你可以在整个浏览器的上下文环境运行Sratchpad，而不只是在指定的网页中。这在你使用Firefox工作或开发插件时很有用。要使用这个请在<a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Developer Tool Settings</a>中确认允许chrome跟插件调试。设置完后环境菜单会有个浏览器选项。选中它的时候，你的作用域就是整个浏览器而不只是页面范围了，从下面的测试中可以看出一些全局变量。</p>
+
+<pre class="brush: js">window
+/*
+[object ChromeWindow]
+*/
+
+gBrowser
+/*
+[object XULElement]
+*/</pre>
+
+<p>Scratchpad的执行环境在该状态下将被设置为browser：当代码段的第一行为<br>
+ <code>// -sp-context: browser</code></p>
+
+<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>
+
+<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p>
+
+<h3 id="Source_editor_shortcuts">Source editor shortcuts</h3>
+
+<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
diff --git a/files/zh-cn/tools/settings/index.html b/files/zh-cn/tools/settings/index.html
new file mode 100644
index 0000000000..a862585645
--- /dev/null
+++ b/files/zh-cn/tools/settings/index.html
@@ -0,0 +1,135 @@
+---
+title: Settings
+slug: Tools/Settings
+translation_of: Tools/Settings
+---
+<div>{{ToolsSidebar}}</div><h2 id="打开设置">打开设置</h2>
+
+<p>查看工具箱选项面板, 打开任何的开发工具:</p>
+
+<ul>
+ <li>either click the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/13158/settings-icon.png" style="display: inline-block; height: 25px; width: 24px;">) in the Toolbox toolbar:<img alt="" src="https://mdn.mozillademos.org/files/13176/settings-show-icon.png" style="display: block; height: 632px; margin-left: auto; margin-right: auto; width: 890px;"></li>
+ <li>or press <kbd>F1</kbd> (new in Firefox 43) to toggle between the active tool and the Settings pane</li>
+ <li>or press <kbd>Ctrl/Cmd</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> to toggle between the active tool and the Settings pane</li>
+</ul>
+
+<p>The Settings pane looks something like this:</p>
+
+<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/13154/devtools-settings-shadowed.png" style="display: block; height: 1726px; margin-left: auto; margin-right: auto; width: 816px;"></p>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3>
+
+<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p>
+
+<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3>
+
+<p>This group of checkboxes determines which tools get <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">an icon in the Toolbox's toolbar</a>.</p>
+
+<h3 id="Choose_DevTools_theme">Choose DevTools theme</h3>
+
+<p>This enables you to choose one of three different themes.</p>
+
+<p>There's a light theme, which is the default:</p>
+
+<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/13172/theme-light-shadowed.png" style="display: block; height: 317px; margin-left: auto; margin-right: auto; width: 890px;"></p>
+
+<p>A dark theme (the default on <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p>
+
+<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/13168/theme-dark.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 875px;"></p>
+
+<p class="geckoVersionNote">New in Firefox 48</p>
+
+<p>There's also a Firebug theme that looks like the <a href="https://getfirebug.com/">Firebug extension</a>, letting you feel at home if you're used to Firebug:</p>
+
+<p><img alt="Firebug theme for DevTools" src="https://mdn.mozillademos.org/files/13170/theme-firebug-shadowed.png" style="display: block; height: 318px; margin-left: auto; margin-right: auto; width: 890px;"></p>
+
+<h3 id="Common_preferences">Common preferences</h3>
+
+<p>Settings that apply to more than one tool. There's just one of these:</p>
+
+<dl>
+ <dt><em>Enable persistent logs</em></dt>
+ <dd>A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</dd>
+</dl>
+
+<h3 id="Inspector">Inspector</h3>
+
+<dl>
+ <dt><em>Show browser styles</em></dt>
+ <dd> A setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</dd>
+ <dt><em>Truncate DOM attributes</em> (new in Firefox 47)</dt>
+ <dd>By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".</dd>
+ <dt><em>Default color unit</em></dt>
+ <dd>A setting to control how colors are represented in the inspector:
+ <ul>
+  <li>Hex</li>
+  <li>HSL(A)</li>
+  <li>RGB(A)</li>
+  <li>color name</li>
+  <li>As authored (new in Firefox 44).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Web_Console">Web Console</h3>
+
+<dl>
+ <dt><em>Enable timestamps</em></dt>
+ <dd>Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.</dd>
+</dl>
+
+<h3 id="Style_Editor">Style Editor</h3>
+
+<dl>
+ <dt><em>Show original sources</em></dt>
+ <dd>When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</dd>
+ <dt><em>Autocomplete CSS</em></dt>
+ <dd>Enable the Style Editor to offer autocomplete suggestions.</dd>
+</dl>
+
+<h3 id="JavaScript_Profiler">JavaScript Profiler</h3>
+
+<dl>
+ <dt><em>Show Gecko platform data</em></dt>
+ <dd>A setting to control whether or not profiles should include Gecko platform symbols.</dd>
+</dl>
+
+<h3 id="Editor_Preferences">Editor Preferences</h3>
+
+<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+
+<dl>
+ <dt><em>Detect indentation</em></dt>
+ <dd>Auto-indent new lines based on the current indentation.</dd>
+ <dt><em>Autoclose brackets</em></dt>
+ <dt> </dt>
+ <dt><em>Indent using spaces</em></dt>
+ <dt> </dt>
+ <dt><em>Tab size</em></dt>
+ <dt> </dt>
+ <dt><em>Keybindings</em></dt>
+ <dd>Choose the default CodeMirror keybindings, or keybindings from one of several popular editors:
+ <ul>
+  <li>Vim</li>
+  <li>Emacs</li>
+  <li>Sublime Text</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Advanced_settings">Advanced settings</h3>
+
+<dl>
+ <dt><em>Disable cache</em></dt>
+ <dd>Disable the browser cache to simulate first-load performance. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed.</dd>
+ <dt><em>Disable JavaScript</em></dt>
+ <dd>Reload the current tab with JavaScript disabled.</dd>
+ <dt><em>Enable Service Workers over HTTP</em></dt>
+ <dd>Enable Service Worker registrations from insecure websites.</dd>
+ <dt><em>Enable browser chrome and add-on debugging toolboxes</em></dt>
+ <dd>Enable you to use developer tools in the context of the browser itself, and not only web content.</dd>
+ <dt><em>Enable remote debugging</em></dt>
+ <dd>Enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a>.</dd>
+</dl>
diff --git a/files/zh-cn/tools/shader_editor/index.html b/files/zh-cn/tools/shader_editor/index.html
new file mode 100644
index 0000000000..ec23028fc9
--- /dev/null
+++ b/files/zh-cn/tools/shader_editor/index.html
@@ -0,0 +1,58 @@
+---
+title: 着色编辑器
+slug: Tools/Shader_Editor
+translation_of: Tools/Shader_Editor
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>着色器编辑器使您可以查看和编辑<a href="/en-US/docs/Web/WebGL">WebGL</a>使用的顶点和片段着色器。</p>
+
+<p>{{EmbedYouTube("hnoKqFuJhu0")}}</p>
+
+<p>WebGL是一种JavaScript API，用于在不使用插件的情况下在浏览器中呈现交互式3D图形和2D图形。使用WebGL，您可以提供2个名为"着色器"的程序，这些程序在<a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">OpenGL渲染管道</a>的适当阶段调用：<a href="https://www.opengl.org/wiki/Vertex_Shader">顶点着色器</a>，提供要绘制的每个顶点的坐标;以及<a href="https://www.opengl.org/wiki/Fragment_Shader">片段着色器</a>，为每个像素提供颜色被绘制。<br>
+ <br>
+ 这些着色器是用OpenGL着色语言或<a href="https://www.opengl.org/documentation/glsl/">GLSL</a>编写的。在WebGL中，它们可以通过多种方式包含在页面中：作为JavaScript源代码中的硬编码文本，使用&lt;script&gt;标记包含的单独文件，或者作为纯文本从服务器检索。然后在页面中运行的JavaScript代码使用WebGL API将它们发送以进行编译，并且它们在设备的GPU上执行。</p>
+
+<p>使用着色器编辑器，您可以检查和编辑顶点和片段着色器的源。</p>
+
+<p>这是另一个截屏视频，展示了如何将着色器编辑器用于复杂的应用程序(在本例中为<a href="http://www.unrealengine.com/html5/">虚幻引擎</a>演示)：</p>
+
+<p>{{EmbedYouTube("YBErisxQkPQ")}}</p>
+
+<h2 id="打开着色器编辑器">打开着色器编辑器</h2>
+
+<p>默认情况下禁用着色器编辑器。要启用它，请打开<a href="/en-US/docs/Tools_Toolbox#Settings">工具箱设置，</a>然后选中"默认Firefox开发人员工具"项中的"着色器编辑器"。您现在将看到"着色器编辑器"出现在工具栏中。单击它，打开着色器编辑器。<br>
+ <br>
+ 首先，您只会看到一个空白窗口，其中有一个按钮，要求您重新加载页面：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>首先，加载一个创建WebGL上下文并将程序加载到其中的页面。以下屏幕截图来自<a href="http://www.unrealengine.com/html5/">虚幻引擎</a>演示。</p>
+
+<p>您现在将看到一个窗口分为三个窗格：左侧所有GLSL程序的列表，中间当前所选程序的顶点着色器，右侧当前所选程序的片段着色器：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="管理程序">管理程序</h2>
+
+<p>左侧窗格列出了WebGL上下文当前使用的所有程序。如果将鼠标悬停在列表中的某个条目上，该程序绘制的几何图形将以红色突出显示：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">如果单击程序条目左侧的眼球图标，则该程序将被禁用。这对于聚焦某些着色器或隐藏重叠几何体非常有用：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">如果单击该条目，其顶点和片段着色器将显示在其他两个窗格中，您可以编辑它们。</p>
+
+<h2 id="编辑着色器">编辑着色器</h2>
+
+<p>中间和右侧窗格显示当前所选程序的顶点和片段着色器。<br>
+ <br>
+ 您可以编辑这些程序，并在下次重绘WebGL上下文时查看结果(例如，在下一个动画帧中)。例如，您可以修改颜色：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">编辑器突出显示代码中的语法错误：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">如果将鼠标悬停在包含错误的行旁边显示的十字形上，您将看到有关该问题的更多详细信息：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/style_editor/index.html b/files/zh-cn/tools/style_editor/index.html
new file mode 100644
index 0000000000..dfca5bb2ed
--- /dev/null
+++ b/files/zh-cn/tools/style_editor/index.html
@@ -0,0 +1,186 @@
+---
+title: Style Editor
+slug: Tools/Style_Editor
+translation_of: Tools/Style_Editor
+---
+<div>{{ToolsSidebar}}</div><p>样式编辑器使你能够：</p>
+
+<ul>
+ <li>查看和编辑所有页面相关的样式表</li>
+ <li>从 scratch创建新的样式表并添加到页面中</li>
+ <li>引入已经存在的样式表并把它们添加到页面中</li>
+</ul>
+
+<p>{{EmbedYouTube("7839qc55r7o")}}</p>
+
+<p>打开样式编辑器可以在 在 "Web Developer" 菜单中 选择“Style Editor” 选项。(“Web Develope”在Mac 系统上是“Tool”菜单的子菜单). <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> 就会出现在浏览器窗口的底部, 此时样式编辑器已经被激活:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>样式编辑器分为三个主要部分：</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Style_Editor#The_style_sheet_pane">左侧的样式表窗格</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Style_Editor#The_editor_pane">编辑器在右边</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Style_Editor#The_media_sidebar">媒体边栏.</a></li>
+</ul>
+
+<h2 id="样式表窗格">样式表窗格</h2>
+
+<p>左侧的样式表面板列出了目前页面用到的所有样式. 你可以点击样式名称左侧的眼球图标来快速切换样式是否生效. 你可以点击样式名称右下角的保存(Save)按钮来保存你在本地的电脑上作出的任何改动.</p>
+
+<h2 id="编辑面板">编辑面板</h2>
+
+<p>右边的就是编辑面板. 这里你可以阅读和编辑你选中的样式表. 你作出的任何改动都会在页面中立即生效. 这使得试验、修改、验证改动都变的非常容易。.一旦得到了满意的改动, 你可以点击样式面板样式表名称上的保存按钮在本地保存一份副本.</p>
+
+<p>编辑器会标出行数，提供语法高亮，以方便你阅读CSS代码. 同时，编辑器也支持一些<a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">键盘快捷键</a>.</p>
+
+<p>The Style Editor automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.</p>
+
+<h3 id="自动补全">自动补全</h3>
+
+<div class="geckoVersionNote">
+<p>自动补全是 Firefox 29 的全新功能.</p>
+</div>
+
+<p>自 Firefox 29 以后, 样式编辑器支持自动补全. 保持输入，编辑器会给出建议列表.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">你可以在 <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings(样式编辑器设置)</a> 中关闭自动补全功能.</p>
+
+<h2 id="The_media_sidebar_媒体查询侧边栏">The media sidebar 媒体查询侧边栏</h2>
+
+<p>从Firefox 33 开始，当当前样式包含<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> rules</a>媒体查询规则的时候，样式编辑器在右侧会显示一个媒体查询侧边栏。侧边栏列出了所有的媒体查询和一个可以连接到源文件的源码处的链接。点击一个媒体查询会跳到对应的定义样式处。当前没有应用到的媒体查询样式是灰色的。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">媒体侧边栏适合与响应式设计视图一起使用，创建和调试响应式布局。</p>
+
+<p>{{EmbedYouTube("aVUXmvLSwoM")}}</p>
+
+<p>自Firefox 46起，if an <code>@media</code> rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the Responsive Design View:</p>
+
+<p>{{EmbedYouTube("XeocxoW2NYY")}}</p>
+
+<h2 id="创建和导入样式表">创建和导入样式表</h2>
+
+<p>通过点击工具条上的新建按钮可以新建一个样式文表。然后就可以在编辑器中编辑样式，实时查看新样式的效果，这和编辑其他已经加载进来的样式表一样。</p>
+
+<p>可以通过点击导入按钮从本地磁盘导入一个样式文件应用到当前的网页中。</p>
+
+<h2 id="Source_map_support">Source map support</h2>
+
+<div class="geckoVersionNote">
+<p>CSS source map support is a new feature in Firefox 29.</p>
+</div>
+
+<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p>
+
+<p>Web developers often create CSS files using a preprocessor like <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, or <a href="http://learnboost.github.io/stylus/">Stylus</a>. These tools generate CSS files from a richer and more expressive syntax. If you do this, being able to see and edit the generated CSS is not so useful, because the code you maintain is the preprocessor syntax, not the generated CSS. So you'd need to edit the generated CSS, then manually work out how to reapply that to the original source.</p>
+
+<p>Source maps enable the tools to map back from the generated CSS to the original syntax, so they can display, and allow you to edit, files in the original syntax. From Firefox 29 onwards, the Style Editor can understand CSS source maps.</p>
+
+<p>This means that if you use, for example, Sass, then the Style Editor will show you, and allow you to edit, Sass files, rather than the CSS that is generated from them:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">For this to work, you must:</p>
+
+<ul>
+ <li>use a CSS preprocessor that understands the <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. Currently this means the <a href="http://davidwalsh.name/future-sass">3.3.0 prerelease version of Sass</a>, or the <a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less</a>. Other preprocessors are actively working on adding support, or considering it.</li>
+ <li>actually instruct the preprocessor to generate a source map, for example by passing the <code>--sourcemap</code> argument to the Sass command-line tool</li>
+ <li>use Firefox 29 or later</li>
+</ul>
+
+<h3 id="Viewing_original_sources_查看样式源码">Viewing original sources 查看样式源码</h3>
+
+<p>Now, if you check "Show original sources" in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, the links next to CSS rules in the <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a> will link to the original sources in the Style Editor.</p>
+
+<p>如果在样式编辑器设置中勾上"Show original sources" ，</p>
+
+<h3 id="Editing_original_sources_编辑源码">Editing original sources 编辑源码</h3>
+
+<p>可以在样式编辑器编辑样式源码，并且可以立即看到修改样式应用的效果。需要两个步骤达到这样的目的：</p>
+
+<p>首先，set up your preprocessor so it watches the original source and automatically regenerates the CSS when the source changes. With Sass you can do this simply by passing the <code>--watch</code> option:</p>
+
+<pre>sass index.scss:index.css --sourcemap --watch</pre>
+
+<p>然后，点击文件边上的"Save"以保存并覆盖Style编辑器中的源码。</p>
+
+<p>修改样式源码文件的CSS样式之后，样式会被重新生成，可以立即看到修改后的效果。</p>
+
+<h2 id="Keyboard_shortcuts_键盘快捷键">Keyboard shortcuts 键盘快捷键</h2>
+
+<h3 id="Source_editor_shortcuts_源码编辑快捷键">Source editor shortcuts 源码编辑快捷键</h3>
+
+<p>{{ Page ("zh-CN/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<p>{{ languages( { "zh": "zh-CN/Tools/Style_Editor"} ) }}</p>
+
+<h2 id="Subnav">Subnav </h2>
+
+<ol>
+ <li><a href="#">Creating</a>
+
+  <ol>
+   <li><a href="/zh-CN/docs/Tools/Scratchpad">Scratchpad</a></li>
+   <li><a href="/zh-CN/docs/Tools/Style_Editor">Style Editor</a></li>
+   <li><a href="/zh-CN/docs/Tools/Shader_Editor">Shader Editor</a></li>
+   <li><a href="/zh-CN/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Debugging</a>
+  <ol>
+   <li><a href="/zh-CN/docs/Tools/Tools_Toolbox">工具箱</a></li>
+   <li><a href="/zh-CN/docs/Tools/Page_Inspector">页面查看器</a></li>
+   <li><a href="/zh-CN/docs/Tools/Web_Console">Web 控制台</a></li>
+   <li><a href="/zh-CN/docs/Tools/Debugger">调试器</a></li>
+   <li><a href="/zh-CN/docs/Tools/Network_Monitor">Network Monitor</a></li>
+   <li><a href="/zh-CN/docs/Tools/Storage_Inspector">Storage Inspector</a></li>
+   <li><a href="/zh-CN/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></li>
+   <li><a href="/zh-CN/docs/Tools/GCLI">Developer Toolbar</a></li>
+   <li><a href="/zh-CN/docs/Tools/3D_View">3D View</a></li>
+   <li><a href="/zh-CN/docs/Tools/Eyedropper">Eyedropper</a></li>
+   <li><a href="/zh-CN/docs/Tools/about:debugging">about:debugging</a></li>
+   <li><a href="/zh-CN/docs/tools/Working_with_iframes">Selecting iframes</a></li>
+   <li><a href="/zh-CN/docs/Tools/View_source">View Source</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Mobile</a>
+  <ol>
+   <li><a href="/zh-CN/docs/Tools/Responsive_Design_View">响应式设计视图</a></li>
+   <li><a href="/zh-CN/docs/Tools/WebIDE">WebIDE</a></li>
+   <li><a href="/zh-CN/docs/Tools/Remote_Debugging/Firefox_for_Android">Firefox for Android</a></li>
+  </ol>
+ </li>
+ <li><a href="#">性能</a>
+  <ol>
+   <li><a href="/zh-CN/docs/Tools/Performance">性能工具</a></li>
+   <li><a href="/zh-CN/docs/Tools/Memory">Memory</a></li>
+   <li><a href="/zh-CN/docs/Tools/Performance/Frame_rate">Frame rate graph</a></li>
+   <li><a href="/zh-CN/docs/Tools/Performance/Waterfall">Waterfall</a></li>
+   <li><a href="/zh-CN/docs/Tools/Performance/Call_Tree">Call Tree</a></li>
+   <li><a href="/zh-CN/docs/Tools/Performance/Flame_Chart">Flame Chart</a></li>
+   <li><a href="/zh-CN/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
+   <li><a href="/zh-CN/docs/Tools/Web_Console/Console_messages#Reflow_events">Reflow Event Logging</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Debugging the browser</a>
+  <ol>
+   <li><a href="/zh-CN/docs/Tools/Browser_Console" title="浏览器控制器">浏览器控制器</a></li>
+   <li><a href="/zh-CN/docs/Tools/Browser_Toolbox" title="浏览器工具箱">浏览器工具箱</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Extending the devtools</a>
+  <ol>
+   <li><a href="/zh-CN/docs/Tools/Adding_a_panel_to_the_toolbox">Adding a panel to the toolbox</a></li>
+   <li><a href="/zh-CN/docs/Tools/Example_add-ons">Example devtools add-ons</a></li>
+   <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></li>
+   <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol_Stream_Transport">Stream Transport</a></li>
+   <li><a href="/zh-CN/docs/Tools/Editor">Source Editor</a></li>
+   <li><a href="/zh-CN/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></li>
+   <li><a href="/zh-CN/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></li>
+  </ol>
+ </li>
+ <li><a href="/zh-CN/docs/Tools/Settings">Settings</a></li>
+ <li><a href="/zh-CN/docs/Tools/Tips">Tips</a></li>
+ <li><a href="/zh-CN/docs/Tools/Keyboard_shortcuts">Keyboard shortcuts</a></li>
+ <li><a href="/zh-CN/docs/Tools/Release_notes">Release notes</a></li>
+</ol>
diff --git a/files/zh-cn/tools/tools_toolbox/index.html b/files/zh-cn/tools/tools_toolbox/index.html
new file mode 100644
index 0000000000..b54074b7cf
--- /dev/null
+++ b/files/zh-cn/tools/tools_toolbox/index.html
@@ -0,0 +1,167 @@
+---
+title: 工具箱
+slug: Tools/Tools_Toolbox
+translation_of: Tools/Tools_Toolbox
+---
+<div>{{ToolsSidebar}}</div><p>该工具箱集中提供了大部分开发工具并构建到了 Firefox 中。</p>
+
+<p>你可以从 Web 开发者菜单（OS X 和 Linux 在“工具”菜单中，Windows 系统在“Firefox”菜单下）中选择“切换工具”打开它。或通过已激活的任何工具（如：调试器、查看器）切换打开。另外你可以按快捷键打开，Ctrl + Shift + I （Windows 和 Linux）、 Cmd + Opt + I （ OS X）。</p>
+
+<p>默认情况下，工具箱窗口停靠在 Firefox 底边，但你可以根据自己喜好独立出来。下图为停靠在 Firefox 中的样子：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">窗口本身分为两个部分：顶部工具栏和下面的主面板：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="工具栏"><a id="Toolbar" name="Toolbar">工具栏</a></h2>
+
+<p>该工具栏包含几个控制部分：激活特定工具、停靠/独立窗口、关闭窗口。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="节点选择器（Node_picker）">节点选择器（Node picker）</h3>
+
+<p>在最左边有一个按钮来激活节点选择器。允许您从页面中选择一个元素进行查看。查看“<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Select_an_element">选择元素</a>”。</p>
+
+<h3 id="工具箱托管的工具（Toolbox-hosted_tools）">工具箱托管的工具（Toolbox-hosted tools）</h3>
+
+<p>然后有一组标签按钮，允许您在工具箱中的不同工具之间切换。其中可能包括了以下工具：</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Web_Console" title="Web_Console">Web 控制台</a></li>
+ <li><a href="/zh-CN/docs/Tools/Debugger" title="Debugger">JavaScript 调试器</a></li>
+ <li><a href="/zh-CN/docs/Tools/Page_Inspector" title="Page_Inspector">页面查看器</a></li>
+ <li><a href="/zh-CN/docs/Tools/Style_Editor" title="Style_Editor">样式编辑器</a></li>
+ <li><a href="/zh-CN/docs/Tools/Profiler" title="Profiling_with_the_Built-in_Profiler">JavaScript 性能分析器</a></li>
+ <li><a href="/zh-CN/docs/Tools/Network_Monitor" title="Profiling_with_the_Built-in_Profiler">网络监视器</a></li>
+</ul>
+
+<p>注意：并不是所有集成的工具总是会完整的在这里列出：只有实际可用的工具才会在相应的情况下显示出来（例如，不是所有的工具都支持远程调试，所以如果调试目标不在当前 Firefox 中的实例，就不会显示所有的工具）。</p>
+
+<p> </p>
+
+<h3 id="附加工具（Extra_tools）">附加工具（Extra tools）</h3>
+
+<p>接下来有一组按钮，可以从<a href="#Settings">开发者工具箱选项</a>添加或删除。在默认情况下这组按钮包含：</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Web_Console#The_split_console">切换分离式控制台</a></li>
+ <li><a href="/zh-CN/docs/Tools/Responsive_Design_View">响应式设计模式</a></li>
+</ul>
+
+<p>在默认情况下，以下工具不包括在工具栏中，但是你可以从<a href="#Settings">设置</a>中将它们添加进来：</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Tools/Paint_Flashing_Tool">高亮重绘的区域</a></li>
+ <li><a href="zh-CN/docs/Tools/Page_Inspector/3D_view">3D 视图</a></li>
+ <li><a href="/zh-CN/docs/Tools/Scratchpad">代码草稿纸</a></li>
+ <li><a href="/zh-CN/docs/Tools/Eyedropper">从页面中抓取一种颜色</a></li>
+ <li>进行整页截图： Firefox 32 新增。对一个完整的 web 页面进行截图并将它保存在您的下载目录</li>
+ <li><a href="/zh-CN/docs/tools/Working_with_iframes">选择一个 iframe 作为当前的目标文档</a>：Firefox 34 新增。</li>
+</ul>
+
+<h3 id="工具箱的控制（Toolbox_controls）">工具箱的控制（Toolbox controls）</h3>
+
+<p>最后的一组按钮了：</p>
+
+<ul>
+ <li>关闭窗口</li>
+ <li>在停靠在浏览器底部和侧边之间切换</li>
+ <li>在独立窗口和附加在浏览器窗口中显示之间切换</li>
+ <li>访问<a href="#Settings">开发者工具箱选项</a></li>
+</ul>
+
+<h2 id="选项"><a name="Settings">选项</a></h2>
+
+<p>单击“选项”按钮（<img alt="" src="https://mdn.mozillademos.org/files/8623/settings-cog-small.png" style="display: inline-block; height: 22px; width: 30px;">）允许您访问工具箱本身和它所承载工具的设置项：</p>
+
+<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/10411/devtools-settings.png" style="display: block; height: 669px; margin-left: auto; margin-right: auto; width: 644px;"></p>
+
+<h3 id="默认的_Firefox_开发者工具">默认的 Firefox 开发者工具</h3>
+
+<p>通过启用这组复选框决定了哪些工具显示在工具箱中。新工具通常已经包实装在 Firefox 中但默认不启用。</p>
+
+<h3 id="可用的工具箱按钮">可用的工具箱按钮</h3>
+
+<p>这组复选框决定“附加工具”<a href="#Toolbar">工具栏</a>中显示哪些按钮。默认启用节点选择器、切换分离式控制台和响应式设计模式。</p>
+
+<p>Firefox 32 添加了一个按钮用于完成网页的截图，默认情况不启用。</p>
+
+<h3 id="选择开发者工具箱主题">选择开发者工具箱主题</h3>
+
+<p>允许您在亮色和暗色主题之间进行切换：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6933/light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/6931/dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="常用首选项">常用首选项</h3>
+
+<p>该设置适用于多个工具。其中只有一个选项：</p>
+
+<ul>
+ <li>启用持续日志：如果您启用此选项，Web 控制台将不会在您导航到新页面时清除已输出内容</li>
+</ul>
+
+<h3 id="查看器">查看器</h3>
+
+<ul>
+ <li>控制是否显示浏览器样式：a setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. 该设置是在Firefox 32新增的。Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</li>
+ <li>默认颜色单元：设置查看器的表现颜色
+  <ul>
+   <li>Hex</li>
+   <li>HSL(A)</li>
+   <li>RGB(A)</li>
+   <li>颜色名</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Web_控制台">Web 控制台</h3>
+
+<ul>
+ <li>启用时间戳：控制 Web 控制台是否显示时间戳。从 Firefox 28 开始 Web 控制台默认为隐藏时间戳。</li>
+</ul>
+
+<h3 id="样式编辑器">样式编辑器</h3>
+
+<ul>
+ <li>显示原始来源：当使用 CSS 预处理器支持源地图，这使得样式编辑器显示原始预处理器资源，而不是生成的 CSS。<a href="/zh-CN/docs/Tools/Style_Editor#Source_map_support">了解更多关于样式编辑器支持 CSS source maps</a>。选中与此项，<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">页面查看器的规则视图还将提供原始来源的链接</a>。</li>
+ <li>自动补全 CSS：使拥有样式编辑器提供自动补全建议功能。</li>
+</ul>
+
+<h3 id="JavaScript_分析器">JavaScript 分析器</h3>
+
+<ul>
+ <li><em>显示 Gecko </em>平台数据：该设置用来控制配置文件是否应该包括 Gecko 平台符号表。</li>
+</ul>
+
+<h3 id="编辑器首选项">编辑器首选项</h3>
+
+<p><a href="http://codemirror.net/">CodeMirror</a> 源代码编辑器偏好设置， 它包括在 Firefox 和几个开发人员所使用的工具，包括<a href="/zh-CN/docs/Tools/Scratchpad">代码草稿纸</a>和<a href="/zh-CN/docs/Tools/Style_Editor">样式编辑器</a>。</p>
+
+<ul>
+ <li>检测缩进：基于当前内容进行新行自动缩进</li>
+ <li>自动关闭括号</li>
+ <li>使用空格缩进</li>
+ <li><em>缩进尺寸</em></li>
+ <li>快捷键绑定：选择默认 CodeMirror 快捷键或几种流行编辑器的快捷键
+  <ul>
+   <li>Vim</li>
+   <li>Emacs</li>
+   <li>Sublime Text</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="高级设置">高级设置</h3>
+
+<ul>
+ <li>禁用缓存：禁用浏览器缓存来模拟首次加载性能。从 Firefox 33 起该设置被加入进来，意味着如果它被开启，打开工具箱时缓存将被禁用。当工具箱关闭时缓存将被重新启用。</li>
+ <li>禁用 JavaScript：重新加载当前标签页，并禁用 JavaScript</li>
+ <li>使服务通过HTTP工作：enable Service Worker registrations from insecure websites</li>
+ <li>启用 chrome 及附加组件调试 （Firefox 38.0.5b3 及以下)）或 启用 chrome 及附加组件调试工具箱（Firefox 40.0 a2 及以上）：使您能够使用开发工具调试浏览器环境，不仅仅只是 Web 内容</li>
+ <li>启用远程调试：允许开发者工具<a href="/zh-CN/docs/Tools/Remote_Debugging">调试远端 Firefox 实例</a></li>
+</ul>
+
+<h2 id="Main_Pane">Main Pane</h2>
+
+<p>The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.</p>
diff --git a/files/zh-cn/tools/using_the_source_editor/index.html b/files/zh-cn/tools/using_the_source_editor/index.html
new file mode 100644
index 0000000000..c343df0749
--- /dev/null
+++ b/files/zh-cn/tools/using_the_source_editor/index.html
@@ -0,0 +1,92 @@
+---
+title: 使用源代码编辑器
+slug: Tools/Using_the_Source_Editor
+translation_of: tools/Keyboard_shortcuts#Source_editor
+---
+<div>{{ToolsSidebar}}</div><p>源代码编辑器是一个编辑器组件,由源editor.jsm的Java Script代码模块的提供,这是共享的几个开发工具,包括暂存器和样式编辑器。它也可以被使用的Firefox扩展。本文说明如何使用编辑器来编辑文本。.</p>
+<h2 id="Keyboard_commands" name="Keyboard_commands">键盘命令</h2>
+<p>这些都是标准命令的快捷键;注意，某些附加产品，他们可能会有所不同。但火狐使用的总是这些。.</p>
+<div class="note">
+  <strong>注：</strong>在Mac OS X,使用Command键来代替控制键.</div>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th class="header">功能</th>
+      <th class="header">键盘</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>选择所有</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>A</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>复制</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>C</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>查找</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>F</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>查找下一个</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>G</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>跳转行</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>L</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>重做</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>Shift</kbd>-<kbd>Z</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>粘贴</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>V</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>剪切</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>X</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>恢复</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>Z</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>行缩进(s)</td>
+      <td><kbd>Tab</kbd></td>
+    </tr>
+    <tr>
+      <td>取消行缩进</td>
+      <td><kbd><kbd>Shift</kbd>-<kbd>Tab</kbd></kbd></td>
+    </tr>
+    <tr>
+      <td>移动行(s) 上</td>
+      <td><kbd><kbd>Alt</kbd>-<kbd>↑</kbd></kbd><br>
+        (<kbd><kbd>Ctrl</kbd>-<kbd>Option</kbd>-<kbd>↑</kbd></kbd> on Mac OS X)</td>
+    </tr>
+    <tr>
+      <td>移动行(s) 下</td>
+      <td><kbd><kbd>Alt</kbd>-<kbd>↓</kbd></kbd><br>
+        (<kbd><kbd>Ctrl</kbd>-<kbd>Option</kbd>-<kbd>↓</kbd></kbd> on Mac OS X)</td>
+    </tr>
+    <tr>
+      <td>切换注释选择</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>/</kbd></kbd> {{fx_minversion_inline("14.0")}}</td>
+    </tr>
+    <tr>
+      <td>Move to bracket opening</td>
+      <td><kbd><kbd>Ctrl</kbd>-<kbd>[</kbd></kbd> {{fx_minversion_inline("14.0")}}</td>
+    </tr>
+    <tr>
+      <td>Move to bracket closing</td>
+      <td><kbd><kbd>Ctlr</kbd>-<kbd>]</kbd></kbd> {{fx_minversion_inline("14.0")}}</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="See_also" name="See_also">参阅</h2>
+<ul>
+  <li><a href="/en-US/docs/Tools">工具</a></li>
+  <li><a href="/en-US/docs/Tools/Scratchpad">暂存</a></li>
+  <li><a href="/en-US/docs/Tools/Style_Editor">编辑样式</a></li>
+</ul>
diff --git a/files/zh-cn/tools/web_console/helpers/index.html b/files/zh-cn/tools/web_console/helpers/index.html
new file mode 100644
index 0000000000..d8a52db1d6
--- /dev/null
+++ b/files/zh-cn/tools/web_console/helpers/index.html
@@ -0,0 +1,125 @@
+---
+title: Web控制台帮助
+slug: Tools/Web_Console/Helpers
+translation_of: Tools/Web_Console/Helpers
+---
+<div>{{ToolsSidebar}}</div>
+
+<h2 id="命令列表">命令列表</h2>
+
+<p>由Web控制台提供的JavaScript命令行工具中包含了一些内置的帮助性函数，它们可以用来简化一些特定任务。</p>
+
+<dl>
+ <dt><code>$(selector, element)</code></dt>
+ <dd>使用 <code>selector</code> 值查找一个CSS选择器，返回 <code>element</code> 元素后代中第一个匹配的节点。如果未指定，则 <code>element</code> 默认为 <code>document</code>。相当于 {{ domxref("document.querySelector()") }} 或者调用该页面的 $ 函数（在它存在的前提下）。</dd>
+ <dd>参考 <a href="https://wiki.developer.mozilla.org/en-US/docs/Archive/Add-ons/Code_snippets/QuerySelector">QuerySelector code snippet</a>。</dd>
+ <dt><code>$$(selector, element)</code></dt>
+ <dd>使用 <code>selector</code> 值查找一个CSS选择器，返回 <code>element</code> 元素后代中所有匹配的节点组成的数组。如果未指定，则 <code>element</code> 默认为 <code>document</code>。它类似于 {{ domxref("document.querySelectorAll()") }}，但是返回值是数组，而不是 {{ domxref("NodeList") }}。</dd>
+ <dt><code>$0</code></dt>
+ <dd>当前页面中，正在检查的元素。</dd>
+ <dt><code>$_</code></dt>
+ <dd>存储在控制台命令行中执行的上一个表达式的结果。例如，如果输入"2+2"，回车键之后再输入"$_"，按下回车键后控制台将输出4。</dd>
+ <dt><code>$x(xpath, element, resultType)</code></dt>
+ <dd>求出 <code>element</code> 上下文中 <a href="/en-US/docs/XPath">XPath</a>（<code>xpath</code>）表达式的值并返回一个包含所有匹配节点的数组。如果未指定，则 <code>element</code> 默认为 <code>document</code>。<code>resultType</code> 参数指定返回结果的类型，它可能是一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XPathResult#Constants">XPathResult constant</a> 类型或者是一个相应的字符串：<code>"number"</code>，<code>"string"</code>，<code>"bool"</code>，<code>"node"</code>，<code>"nodes"</code>；如果未提供该参数，则使用 <code>ANY_TYPE</code>。</dd>
+ <dt><code>:block</code></dt>
+ <dd>（从Firefox 80版本开始可用）后跟一个未引用的字符串，阻止URL中包含该字符串的请求。在 <strong><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Network_Monitor">Network Monitor</a> </strong>中，该字符串会显示在 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list#Blocking_specific_URLs">Request Blocking sidebar</a> 中并被选中。如果需要取消阻止，就用 <code>:unblock</code>。</dd>
+ <dt><code>cd()</code> {{deprecated_inline("gecko74")}}</dt>
+ <dd>将JavaScript执行上下文切换到该页面上一个不同的iframe框架。该函数接受多种不同方法来确认具体要切换到哪一个框架。</dd>
+ <dd>详情请查看 <a href="/en-US/docs/Tools/Web_Console#Working_with_iframes">working with iframes</a>。</dd>
+ <dt><code>clear()</code></dt>
+ <dd>清除控制台输出区域。</dd>
+ <dt><code>clearHistory()</code></dt>
+ <dd>就像一个普通的命令行一样，控制台命令行记住你曾经输入的命令（<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console#Command_history">remembers the commands you've typed</a>）。使用该函数来清除控制台的键入命令历史记录。</dd>
+ <dt> <code>copy()</code></dt>
+ <dd>将其中的参数部分复制到剪贴板。如果参数是一个字符串，则复制它的字面内容。如果参数是一个DOM节点，则复制它的 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML">outerHTML</a></code> 。否则，就针对该参数调用 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify </a></code>方法，然后将结果复制到剪贴板。</dd>
+ <dt><code>help()</code> {{Deprecated_Inline(62)}}</dt>
+ <dt><code>:help</code> {{Gecko_MinVersion_Inline(62)}}</dt>
+ <dd>显示帮助文本。事实上，在经过一个令人愉快的递归后，会把你带到这个页面。</dd>
+ <dt><code>inspect()</code></dt>
+ <dd>提供一个对象，为它生成一份 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console/Rich_output">rich output</a>。一旦选择了输出区域中的对象，就可以使用键盘上的箭头按键来浏览对象详情。</dd>
+ <dt><code>keys()</code></dt>
+ <dd>提供一个对象，返回它所有的键（或属性名）。这是 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a> 的简写。</dd>
+ <dt><code>pprint()</code> {{Obsolete_Inline(74)}}</dt>
+ <dd>以一种可读的方式格式化指定值。这在转储对象或者数组内容时非常有用。</dd>
+ <dt><code>:screenshot</code></dt>
+ <dd>使用给定的文件名创建当前页面的屏幕快照。如果没有提供文件名，图片文件将用以下格式命名：</dd>
+ <dd><code>Screen Shot yyy-mm-dd at hh.mm.ss.png</code></dd>
+ <dd>这个命令有如下可选参数：</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>命令</th>
+    <th>类型</th>
+    <th>描述</th>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--clipboard</code></td>
+    <td>boolean</td>
+    <td>如果指明，该参数将使屏幕快照复制到剪贴板。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--delay</code></td>
+    <td>number</td>
+    <td>在创建屏幕快照之前延迟等待的秒数。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--dpr</code></td>
+    <td>number</td>
+    <td>创建屏幕快照时使用的设备像素比率。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--file</code></td>
+    <td>boolean</td>
+    <td>如果指明，屏幕快照将保存到文件里，即便其它选项（例如：<code>--clipboard</code>）也存在。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--filename</code></td>
+    <td>string</td>
+    <td>用来保存屏幕快照的文件名。这个文件有一个".png"扩展名。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--fullpage</code></td>
+    <td>boolean</td>
+    <td>如果指明，整个网页将被保存。有了这个参数，即使是超出了当前窗口边界的页面部分也会包含在屏幕快照里。当使用这一参数时，"-fullpage"字样会被追加到文件名中。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--selector</code></td>
+    <td>string</td>
+    <td>指定一个单一元素的CSS选择器。当提供这一参数时，只有这个元素才会被包含在屏幕快照中。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>:unblock</code></dt>
+ <dd>（从Firefox 80版本开始可用）后跟一个未引用的字符串，取消阻止URL中包含该字符串的请求。在 <strong><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Network_Monitor">Network Monitor</a> </strong>中，该字符串会被从 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list#Blocking_specific_URLs">Request Blocking sidebar</a> 中移除。如果该字符串之前未被阻止，也不会抛出错误信息。</dd>
+ <dt><code>values()</code></dt>
+ <dd>提供一个对象，返回它所有的值。与 <code>keys()</code> 是伙伴函数。</dd>
+</dl>
+
+<p>请参照 <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">Console API</a> 获取更多关于该内容的详细信息。</p>
+
+<h2 id="变量">变量</h2>
+
+<dl>
+ <dt>temp<em>N</em></dt>
+ <dd>查看器中的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use in Console">Use in Console</a> 选项（选中任意一个元素，右键菜单中有该选项）为节点生成了一个变量例如 <code>temp0</code>，<code>temp1</code>，<code>temp2</code> 等等来引用该节点。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="查看DOM节点的内容">查看DOM节点的内容</h3>
+
+<p>假如你有一个DOM节点叫做"title"。事实上，你正在阅读的这个页面恰好有一个，所以你可以打开Web控制台，尝试下面的内容。</p>
+
+<p>让我们先来看看调用 <code>$()</code> 和 <code>inspect()</code> 方法之后返回节点的内容：</p>
+
+<pre class="notranslate"><code>inspect($("#title"))</code></pre>
+
+<p>这会自动生成该对象的富表示形式（rich output），为你显示匹配CSS选择器 <code>"#title"</code> 的节点内容，当然就是拥有 <code>"title"</code> 的ID的元素啦。你可以使用键盘的上下方向键来浏览输出的内容，右方向键用来展开一个项目，而左方向键是折叠一个项目。</p>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/Console">console</a> </li>
+</ul>
diff --git a/files/zh-cn/tools/web_console/index.html b/files/zh-cn/tools/web_console/index.html
new file mode 100644
index 0000000000..a870af701e
--- /dev/null
+++ b/files/zh-cn/tools/web_console/index.html
@@ -0,0 +1,45 @@
+---
+title: Web 控制台
+slug: Tools/Web_Console
+tags:
+  - web控制台
+  - 工具
+  - 指导
+  - 网站开发
+  - 网站开发工具
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Web 控制台:</p>
+
+<ol>
+ <li>可以查看与当前网页相关的日志信息: 所有的网络请求，JavaScript， CSS，和安全相关的错误与警告信息，还包括页面上 JavaScript 代码运行时产生的错误、警告及相关信息.</li>
+ <li>可以激活你和网页之间的交互, 使你可以在当前网页上下文中执行一些 JavaScript 表达式.</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">打开控制台</a></dt>
+ <dd>开始使用控制台</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter">命令行编译器</a></dt>
+ <dd>使用控制台和网页交互。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Split_console">分离控制台</a></dt>
+ <dd>把控制台分离出来，放在其它工具旁边</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages">控制台消息</a></dt>
+ <dd>控制台打印出的详细日志</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Rich_output">丰富的输出</a></dt>
+ <dd>查看控制台中输入的对象打印出来的信息</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">快捷键</a></dt>
+ <dd>快捷引用</dd>
+</dl>
+</div>
+</div>
diff --git a/files/zh-cn/tools/web_console/invoke_getters_from_autocomplete/index.html b/files/zh-cn/tools/web_console/invoke_getters_from_autocomplete/index.html
new file mode 100644
index 0000000000..a4866d0a0d
--- /dev/null
+++ b/files/zh-cn/tools/web_console/invoke_getters_from_autocomplete/index.html
@@ -0,0 +1,6 @@
+---
+title: 自动调用getters访问器
+slug: Tools/Web_Console/Invoke_getters_from_autocomplete
+translation_of: Tools/Web_Console/Invoke_getters_from_autocomplete
+---
+<p>{{draft}}</p>
diff --git a/files/zh-cn/tools/webide/index.html b/files/zh-cn/tools/webide/index.html
new file mode 100644
index 0000000000..3dc19db451
--- /dev/null
+++ b/files/zh-cn/tools/webide/index.html
@@ -0,0 +1,271 @@
+---
+title: WebIDE
+slug: Tools/WebIDE
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/WebIDE
+---
+<div>{{ToolsSidebar}}</div><div class="summary">
+<p>WebIDE是 <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a> 的替代开发工具。 像App Manager一样，WebIDE能够使你在<a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS模拟器</a> 或者真实的Firefox OS设备中运行 <a href="/en-US/Firefox_OS">Firefox OS</a> 应用程序。</p>
+
+<p>无论如何，WebIDE也为你创建和开发Firefox OS程序提供一个编辑环境， 包括具备编辑和存储你的应用程序所有文件的树形视图，并且提供两个应用程序模板来帮助你开始。</p>
+</div>
+
+<p>要使用WebIDE，你首先需要安装<a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">一个或者多个运行环境</a> 。运行环境是你运行和调试应用程序的地方，运行环境可以是通过USB接口链接到电脑的Firefox OS设备，也可能是安装到电脑中的Firefox OS模拟器。</p>
+
+<p>接下来你可以<a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps"> 创建一个app，或者打开已有的app</a>。 如果你正要创建一个新的app，你可以从一个包含目录结构以及你需要的最小样板文件的模板开始。或者从一个更完整的能够展现如何使用特权API的模板开始。WebIDE使用树形结构来显示你的app文件，并且可以使用WebIDE内建的代码编辑器来编辑和存储你的代码文件。当然你不必非要使用内建的编辑器，你完全能够不使用WebIDE来开发你的app，仅仅使用他来调试你的app。</p>
+
+<p>最后，<a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">你能够在运行环境中安装和运行你的app</a>，并且打开常用的开发工具套件 -- <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> 等来检测和修改正在运行的app。</p>
+
+<p>使用WebIDE来开发和调试程序，你需要的所用东西就是Firefox 33或者更新的版本。为了在一个实际设备上测试，你需要Firefox OS 1.2 或者更新版本，还需要一条USB线。</p>
+
+<p>如果你针对的Firefox OS是1.2 或者更新版本的话， 你只能使用WebIDE调试程序。</p>
+
+<h2 id="打开WebIDE">打开WebIDE</h2>
+
+<p>在Web开发者菜单上点击WebIDE就能打开WebIDE界面， 你也能够使用快捷键 Shift + F8来启动WebIDE：<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">你可以在左边下拉菜单"Open App"中打开已有的apps，或者创建一个新的app， 在右边的下拉菜单 "Select Runtime" 中选择一个运行环境或者安装新的运行环境。</p>
+
+<p>中间的按钮分别是 运行，停止，和调试功能：他们仅仅在你打开了一个应用并选择了一个运行环境时才是可用的。</p>
+
+<h2 id="安装运行环境">安装运行环境</h2>
+
+<p>在 "Select Runtime" 下拉菜单里，运行环境分为三个类型：</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: 通过USB链接的Firefox OS设备</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: 已经安装的Firefox OS模拟器</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect to the WebIDE using an arbitrary name and port.</li>
+</ul>
+
+<p>在第一次使用时，你可能不会看到任何运行环境：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">这部分余下的内容将描述如何安装运行环境。</p>
+
+<h3 id="链接一个Firefox_OS设备">链接一个Firefox OS设备</h3>
+
+<p>在这之前，有一些设置你需要完成：</p>
+
+<ul>
+ <li><strong>检查你设备的Firefox OS版本：确认你的设备运行的是Firefox OS1.2/Boot2Gecko, 或者更高版本。为了检查Firefox OS版本，进入Settings &gt; Device Information &gt;<code> Software。如果你没有足够高的版本OS，在</code></strong> <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> 中找到你的设备，并按照如下指令来升级。</li>
+ <li><strong>启用远程调试：</strong>进入 Settings &gt; <code>Device information &gt; More information &gt; Developer</code>.
+  <ul>
+  </ul>
+
+  <ul>
+   <li>FirefoxOS 1.3 及更早版本：选择 "Remote Debugging" 。</li>
+   <li>Firefox OS 1.4 及更新版本: "Remote Debugging" 询问你要启用 ADB，ADB and DevTools还是DevTools，选择ADB and DevTools。</li>
+  </ul>
+ </li>
+ <li><strong>禁用锁屏:</strong> 进入 Settings &gt; <code>Screen Lock</code> 取消选择 <code>Lock Screen</code>， 因为当设备锁屏时，设备连接就丢失了，意味着设备不再可以用于调试了。</li>
+ <li><strong>如果你想要调试认证的app，包括内建的app，请参考：</strong><a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">调试认证的app</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Linux系统:</strong></p>
+
+<ul>
+ <li>增加一个 udev规则文件，按照<a class="external-icon external" href="http://developer.android.com/tools/device.html#setting-up">安装设置Android设备指南</a>中的第3步的说明。Geeksphone分配使用的idVendor是05c6， 并且在<a class="external-icon external" href="http://developer.android.com/tools/device.html#VendorIds">这一页</a>中有列出其他厂商的idVendor值。</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Windows 系统:</strong></p>
+
+<ul>
+ <li>你需要根据<a class="external-icon external" href="http://developer.android.com/tools/device.html#setting-up">安装设置Android设备指南</a>中的第三步来安装驱动程序，可以在<a class="external-icon external" href="http://downloads.geeksphone.com/">Geeksphone </a>网站上找到Geeksphone设备的驱动程序。Windows 8在默认情况下不能够安装未签名的驱动程序，可以参考 <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"如何在Window 8上安装未签名的驱动"</a>。</li>
+ <li>如果上面所有的方法都不能让WebIDE找到你的设备的话，你或许不得不编辑<a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182"> adb_usb.ini</a>。</li>
+</ul>
+</div>
+
+<p>如果有其他的Android设备连接到你的计算机，断开他们。现在你可以使用USB线连接你的设备到计算机， 你应该可以在“USB DEVICE” 下看到你的设备了:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p>
+
+<p>如果你仍然没有看到你的设备，请看 <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">故障排除</a> 页面。</p>
+
+<h3 id="添加模拟器">添加模拟器</h3>
+
+<p><span style="line-height: 1.5;"><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS 模拟器</a>是Firefox OS更高层次的版本，他模拟一个Firefox OS设备， 但是运行在计算机桌面上。模拟器运行在一个与类似Firefox OS设备同样大小的窗体中，他包括Firefox OS用户界面，内建apps，并且模拟了很多Firefox OS设备APIs。</span></p>
+
+<p><span style="line-height: 1.5;">这意味着在许多情况下，你没有必要使用真实的设备来测试和调试你的应用。</span></p>
+
+<p>模拟器是比较大的，所以没有集成到Firefox浏览器中，而是作为Firefox的一个附加组件 <a href="/en-US/Add-ons">附加组件</a>。如果你在“Select Runtime”中点击 "Install Simulator" ，你会去到一个能够安装各种版本Firefox OS模拟器的页面，如下图：<img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">你能够安装你想要的所有模拟器，耐心点，既然模拟器是比较大的，这可能需要花上好几分钟来下载。一旦你已经安装了一些模拟器，你可以关闭“Extra Componets” 窗口， 你安装的模拟器将会显示在“Select Runtime”下拉菜单上面:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">要进一步了解模拟器, 请看他的 <a href="/en-US/docs/Tools/Firefox_OS_Simulator">文档页面 </a> 。</p>
+
+<h3 id="自定义运行环境">自定义运行环境</h3>
+
+<p>使用自定义运行环境，你能够使用任意的主机名和端口来链接远程设备。</p>
+
+<p>在表面之下, Firefox OS设备和Android设备使用一个叫 Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a> 的程序来连接到电脑桌面。默认情况下，WebIDE使用附件组件 ADB Help： 这简化了让你安装 ADB 和设置转发端口以便Firefox桌面工具能够与设备交换信息的过程。</p>
+
+<p>在大多数情况下这是方便的，但有时候你可能想要单独运行ADB，例如： 你或许需要在命令行上直接运行ADB。在这种情形下，你需要通过命令 <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> 来指定一个主机和端口来连接到你的设备。<br>
+ <br>
+ 如果你想用WebIDE来像上面一样手动连接的话， 你应该<a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">禁止ADB Helper附件组件</a>，并且使用定制的运行环境，输入主机名和端口号，那也是你要传给adb forward命令的参数。</p>
+
+<p>ADB Helper 目前仍然不支持连接到Android的Firefox， 所以如果你想要连接WebIDE到你的Android Firefox, 你需要设置你自己的转发端口，并使用定制的运行环境。查看<a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">更多有关使用ADB连接到Android Firefox</a> 。</p>
+
+<h2 id="选择运行环境">选择运行环境</h2>
+
+<p>一旦你设置好了运行环境， 你就就可以使用 “Select Runtime” 来选择你要使用他们。</p>
+
+<ul>
+ <li>如果选择模拟器，WebIDE会启动模拟器。If you select a Simulator, the WebIDE launches the Simulator.</li>
+ <li>如果你现在一个Firefox OS 设备，在设备上会有一个对话框要求你按 “OK” 来证实你希望链接到WebIDE。</li>
+</ul>
+
+<p>这是在WebIDE工具栏中间的 “ play ” 按钮就可以使用了， 点击它会在当前的运行环境中安装并运行app。</p>
+
+<h3 id="运行环境动态">运行环境动态</h3>
+
+<p>当一个运行环境被选中后，下拉菜单下面有三个额外的菜单项：</p>
+
+<ul>
+ <li><strong>Runtime Info</strong>: 当前运行环境的信息</li>
+ <li><strong>Permissions Table</strong>: 当前运行环境的  <a href="/en-US/Apps/Build/App_permissions">app permissions</a> 概览, 每个API和每个<a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a> 是否允许访问(✓)，禁止(✗)， 或者用户是否被提示(!)。</li>
+ <li><strong>Screenshot</strong>: 从运行环境中截屏</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p>
+
+<h2 id="创建和打开app">创建和打开app</h2>
+
+<p>在左边下拉菜单 "Open App" 中有三个菜单项：“New App..." , "Open Packaged App... " "Open Hosted App", 分别对应 创建一个新的app， 打开一个打包的app， 打开一个主机上的app 。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
+
+<h3 id="创建一个新的app">创建一个新的app</h3>
+
+<p>选择 "New App..." 来创建一个新的app， 你会看到如下图的对话框提供两个app模板供你选择： "Privileged Empty App" 和 "Privileged App".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
+
+<p>两个模板都来自Mozilla的  <a href="https://github.com/mozilla/mortar">app模板收集 </a>，为你提供了程序初始的基本结构。"Privileged App" 模板为你演示了app如何使用权限来装载跨域的远程内容。</p>
+
+<p>一旦你选择了一个模板，你需要命名这个app并选择一个目录来存储这些模板文件，然后你的新app就在<a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">项目编辑器</a>中打开了。</p>
+
+<h3 id="开启一个包装的app">开启一个包装的app</h3>
+
+<p>选择 "Open Packaged App..." 来打开一个 <a href="/en-US/Marketplace/Options/Packaged_apps">包装好的app</a>。WebIDE会要求你选择包含 app的<a href="/en-US/Apps/Build/Manifest">manifest</a> 目录， 并且WebIDE会在 <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a> 中打开app。</p>
+
+<h3 id="开启一个主机上的app">开启一个主机上的app</h3>
+
+<p>你可以选择 "Open Hosted App..." 来开启一个 <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a> 。你需要输入一个URL，他链接到app的<a href="/en-US/Apps/Build/Manifest">manifest</a> ，同样app会在 <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>中打开。</p>
+
+<h2 id="编辑app">编辑app</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a> 为app提供了一个编辑环境，它的左边是app中所有文件的一个树形视图，你能够使用右键中菜单来够添加和删除文件，右边是文件的编辑窗口。</p>
+
+<h3 id="app概要页面">app概要页面</h3>
+
+<p>当第一次开启或创建app时， 编辑器的编辑窗口会显示app的概要信息页面，如下图所示：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
+
+<p>当你需要回到这个页面时， 你可以通过点击左边视图中的根目录。</p>
+
+<h3 id="Manifest验证">Manifest验证</h3>
+
+<p>WebIDE会自动地检查manifest一些特定的通用问题，如果发现了问题的话，WebIDE会在app的概要页面上显示app是无效的并描述发现的问题：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p>
+
+<p>当然，你也能够在项目编辑器中将 <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> 编辑修改正确。</p>
+
+<h3 id="源代码编辑器The_source_editor">源代码编辑器The source editor</h3>
+
+<p>WebIDE使用 <a href="http://codemirror.net/">CodeMirror</a> 源代码编辑器</p>
+
+<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<h4 id="代码补全功能">代码补全功能</h4>
+
+<p>当使用WebIDE编辑 CSS 和 JavaScript的代码时， 编辑器提供自动补全建议， 并且CSS自动补全的功能总是开启的。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">要开启JavaScript的自动补全功能，需要按 Ctrl + 空格键：<img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p>
+
+<h4 id="内联文档">内联文档</h4>
+
+<p>编辑器也可以为JavaScript代码显示内联文档。将光标停留在相应的符号上面，按Shift＋Space键可以看到包含文档内容的弹窗。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p>
+
+<p>如上图，点击在弹窗中的<code>[docs],</code>将会链接到符号的MDN页面。</p>
+
+<h4 id="存储文件">存储文件</h4>
+
+<p>你需要存储你的文件才能使修改生效，对于有变化而没有存储的文件，WebIDE会在文件名前面标记星号，你可以通过菜单上的保存功能或使用 Control + S键来存储文件（在Mac OS X系统上的快捷键是 Command + S）。</p>
+
+<h3 id="移除项目">移除项目</h3>
+
+<p>要从WebIDE移除一个app，到<a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app概要页面</a>并点击 "Remove Project" 。</p>
+
+<h2 id="运行与调试app">运行与调试app</h2>
+
+<p>当你准备好运行app时， 你需到<a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">从"Select Runtime" 下拉菜单中选择一个运行环境</a> 。如果你没有任何可用的运行环境，可以在 <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">安装运行环境</a> 章节中找到如何添加一个。</p>
+
+<p>现在，WebIDE 工具栏中的 "play" 按钮已经可以使用了， 点击它可以在选定的运行环境中安装并运行app。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">要调试app的话，点击 "Pause" 按钮， 会显示开发者工具箱<a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>，并连接了你的app：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">哪些工具可以使用依赖于你选择的运行环境， 但是至少有这些基本工具：<a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> 和 <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>。恰恰像在一个Web页面中一样，你在工具中所作的任何改变在app中都是可以立即可见的，但是能保存下来。 相反地，你在编辑窗口所作的改变可以保存到磁盘中，但是如果你不重启app的话是不会看到改变的。</p>
+
+<h3 id="调试认证的应用程序_(包括主进程)">调试认证的应用程序 (包括主进程)</h3>
+
+<p>你能够针对模拟器、b2g桌面、或者一个真实设备运行调试器。</p>
+
+<p>当选择了一个运行环境的同时，如果你点击app下拉菜单，你不仅可看到你的app，还可以看到运行环境中的所有app。你可以使用模拟器来调试他们，包括<a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">认证的应用程序</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p>
+
+<p><br>
+ 无论如何，要在一个真实的设备上调试认证的应用程序：</p>
+
+<ul>
+ <li>设备必须是运行Firefox OS 1.2以上版本的开发构建系统</li>
+ <li>你必须启用认证应用程序调试</li>
+</ul>
+
+<p>要启用认证应用程序调试需要连接到运行环境，然后在WebIDE主菜单 “Runtime” 中选择“<code>Runtime Info</code>” ， 如果你看到 <code>"DevTools restricted privileges: yes</code>"，意味着认证应用程序不能被调试。启用路径可能随着你针对的调试设备不同而不同：</p>
+
+<ul>
+ <li>真实设备
+  <ul>
+   <li>如果设备能够被root，点击<code>"request higher privileges"</code> 启用认证应用程序调试 ，Firefox OS将会重启，你或许需要再次在'Select Runtime' 中选择你的运行设备 。</li>
+  </ul>
+ </li>
+ <li>模拟器
+  <ul>
+   <li>模拟器默认已经启用认证应用程序调试</li>
+  </ul>
+ </li>
+ <li>B2G 桌面
+  <ul>
+   <li>在连接之前手动编辑B2G桌面客户端的配置<a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> 来启用认证应用程序调试</li>
+  </ul>
+ </li>
+</ul>
+
+<p>现在，你可以在WebIDE里面看到设备上所有的认证应用程序（B2G 桌面客户端或许需要重启一遍）。</p>
+
+<h2 id="监视执行性能">监视执行性能</h2>
+
+<p>如果你对你的应用程序的执行性能有兴趣的话，有几个办法可以测量他们对WebIDE的运行环境的影响:</p>
+
+<ul>
+ <li>WebIDE的 <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> 提供了一个非常好设备性能视图，这能够帮助你发现问题，例如：一个应用程序突然过度占用内存（内存泄露）。</li>
+ <li>工具 <a href="/docs/Tools/Profiler">Profiler</a> 提供了另外一个分析单个应用程序详细足迹的方法， 这个对于你调查已知的性能问题非常有用。</li>
+</ul>
+
+<h2 id="故障排除">故障排除</h2>
+
+<p>如果你在使用WebIDE时有任何问题， 请查阅 <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">故障排除</a> 页面.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/webide/monitor/index.html b/files/zh-cn/tools/webide/monitor/index.html
new file mode 100644
index 0000000000..5a650a572d
--- /dev/null
+++ b/files/zh-cn/tools/webide/monitor/index.html
@@ -0,0 +1,158 @@
+---
+title: Monitor
+slug: Tools/WebIDE/Monitor
+translation_of: Archive/WebIDE/Monitor
+---
+<div>{{ToolsSidebar}}</div><div class="summary">
+<p>The WebIDE Monitor is a general-purpose data tool designed to help you track the performance of <a href="/en-US/Firefox_OS">Firefox OS</a> apps and devices.</p>
+</div>
+
+<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="height: 464px; width: 800px;"></p>
+
+<p>The Monitor is able to display live, interactive graphs to visualize time series.</p>
+
+<h2 id="Available_graphs">Available graphs</h2>
+
+<p>The Monitor comes with several different graphs. They usually show up once WebIDE is connected to a Firefox OS runtime.</p>
+
+<h3 id="Unique_Set_Size">Unique Set Size</h3>
+
+<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="height: 310px; width: 879px;"></p>
+
+<p>This graph shows the memory footprint of all Firefox OS processes over time. If you are interested in the memory consumption of a Firefox OS app, launch it, and the private memory used by its process will be displayed here.</p>
+
+<h2 id="Displaying_your_own_data">Displaying your own data</h2>
+
+<p>It's relatively easy to display any kind of data in the Monitor, because it accepts loosely-formatted updates from many different sources.</p>
+
+<h3 id="From_a_Firefox_OS_device">From a Firefox OS device</h3>
+
+<p>You can send data from a connected device by sending observer notifications.</p>
+
+<p>Note: If you would like to do this in a <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app">certified app</a>, please follow <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">these instructions</a>.</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p>
+
+<p>You can send data from any JS code with chrome privileges. Here is a complete example measuring the run time of some JS code:</p>
+
+<p><code>const Services = require('Services');<br>
+ <br>
+ var start = Date.now();<br>
+ // code to benchmark<br>
+ var stop = Date.now();<br>
+ <br>
+ var data = { graph: 'Performance', myFeature: stop-start, time: stop }</code><code>;<br>
+ Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</code></p>
+
+<h4 id="C">C++</h4>
+
+<p><code>observerService-&gt;NotifyObservers(nullptr, "devtools-monitor-update", data);</code></p>
+
+<p>You can send data from anywhere in Gecko. Here is a complete example measuring the run time of some code:</p>
+
+<p><code>#include &lt;time.h&gt;<br>
+ #include "nsPrintfCString.h"<br>
+ #include "nsIObserverService.h"<br>
+ <br>
+ clock_t start = clock();<br>
+ // code to benchmark<br>
+ clock_t stop = clock();<br>
+ double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);<br>
+ <br>
+ nsCOMPtr&lt;nsIObserverService&gt; observerService = services::GetObserverService();<br>
+ if (observerService) {<br>
+   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);<br>
+   nsAutoString data = NS_ConvertUTF8toUTF16(str);<br>
+   observerService-&gt;NotifyObservers(nullptr, "devtools-monitor-update", data.get());<br>
+ }</code></p>
+
+<h3 id="From_your_computer">From your computer</h3>
+
+<p>You can easily send data to the Monitor over a WebSockets server. This can be useful if you're writing a Firefox extension, a command-line tool or a web service.</p>
+
+<p>By default, the Monitor looks for a server running on the port 9000 of you computer. You can change this by updating the <code>devtools.webide.monitorWebSocketURL</code> preference.</p>
+
+<p>You can even make it accept data from your local network, or from anywhere on the Internet.</p>
+
+<h4 id="Node.js">Node.js</h4>
+
+<p><code>TODO</code></p>
+
+<h4 id="Python">Python</h4>
+
+<p><code>TODO</code></p>
+
+<h3 id="Supported_formats">Supported formats</h3>
+
+<p>The Monitor accepts data in the form of JSON objects that generally look like this:</p>
+
+<p><code>{</code><br>
+ <code>  "graph": "myGraph",<br>
+   "curve": "myCurve",<br>
+   "value": 42,<br>
+   "time": 1234567890<br>
+ }</code></p>
+
+<p>That format is meant to be very flexible. If a specified graph or curve doesn't exist, it will be created automatically.</p>
+
+<h4 id="Arbitrary_names">Arbitrary names</h4>
+
+<p>Unrecognized entries will be considered as curve name and value.</p>
+
+<p>The smallest data packet you can send is something like:</p>
+
+<p><code>{ "myCurve": 42 }</code></p>
+
+<p>This will add a data point to "myCurve" in a graph with no name. The missing <code>time</code> will default to when the Monitor received the packet.</p>
+
+<p>For better precision, it's probably better to always specify a <code>timestamp</code> for your data:</p>
+
+<p><code>{<br>
+   "current": 60,</code><br>
+ <code>  "voltage": 500,<br>
+   <code>"time": 1234567890</code><br>
+ }</code></p>
+
+<h4 id="Multiple_values">Multiple values</h4>
+
+<p>In a single update, you can send data for multiple curves:</p>
+
+<p><code>{<br>
+   "graph": "myGraph",<br>
+   "myCurve1": 50,<br>
+   "myCurve2": 300,<br>
+   "myCurve3": 9000,<br>
+   "time": 1234567890<br>
+ }</code></p>
+
+<p>Or several data points for a single curve:</p>
+
+<p><code>{<br>
+   "graph": "myGraph",<br>
+   "curve": "myCurve",<br>
+   "values": [<br>
+     { "time": 1234567890, "value": 42 },<br>
+     { "time": 1234567981, "value": 51 }<br>
+   ]<br>
+ }</code></p>
+
+<h4 id="Multiple_updates">Multiple updates</h4>
+
+<p>And you can also send multiple data updates as an Array:</p>
+
+<p><code>[<br>
+   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },<br>
+   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }<br>
+ ]</code></p>
+
+<h4 id="Punctual_events">Punctual events</h4>
+
+<p>To mark special events in a graph with a vertical bar, add an <code>event</code> key to your update:</p>
+
+<p><code>{<br>
+   "graph": "myGraph",<br>
+   "event": "myEvent",<br>
+   "time": 1234567980<br>
+ }</code></p>
diff --git a/files/zh-cn/tools/webide/opening_webide/index.html b/files/zh-cn/tools/webide/opening_webide/index.html
new file mode 100644
index 0000000000..5ca53cf1ac
--- /dev/null
+++ b/files/zh-cn/tools/webide/opening_webide/index.html
@@ -0,0 +1,26 @@
+---
+title: Opening WebIDE
+slug: Tools/WebIDE/Opening_WebIDE
+translation_of: Archive/WebIDE/Opening_WebIDE
+---
+<div>{{ToolsSidebar}}</div><p>有三种方式打开WebIDE:</p>
+
+<ul>
+ <li>路由到浏览器Tools&gt;Web Developer菜单,点击<em>WebIDE</em> 选项进入.</li>
+ <li>使用键盘快捷键 <em>Shift + F8</em>.</li>
+ <li>点击Firefox工具栏专用的图标.如果你使用 <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>版本的Firefox的话他会默认存在, 并且在Firefox 版本大于 <a href="/en-US/Firefox/Releases/36">version 36</a> 上,只要你曾经打开过WebIDE的话,他会出现在工具栏:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p>
+
+<p>下面是WebIDE的样子:<img alt="" src="https://mdn.mozillademos.org/files/12147/webide.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">在左边的侧边栏你可以打开已经存在的项目,或者创建新的项目.而在右边的侧边栏你可以选择一个运行环境或者<a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">新安装一个运行环境</a>.</p>
+
+<p>中间的按钮分别是:运行,停止和调试app:他们只有在你打开一个项目并且选择了运行环境是才可以使用.</p>
+
+<p>在WebIDE中你可以使用通用的快捷键(在OS X中用Command代替Control)改变字体的大小:</p>
+
+<ul>
+ <li><code>Ctrl +</code> 增大字体的大小.</li>
+ <li><code>Ctrl -</code> 减小字体的大小.</li>
+ <li><code>Ctrl 0</code> 设置字体大小为默认值.</li>
+</ul>
diff --git a/files/zh-cn/tools/webide/问题排除/index.html b/files/zh-cn/tools/webide/问题排除/index.html
new file mode 100644
index 0000000000..4bb1d714d8
--- /dev/null
+++ b/files/zh-cn/tools/webide/问题排除/index.html
@@ -0,0 +1,53 @@
+---
+title: WebIDE 问题排除
+slug: Tools/WebIDE/问题排除
+translation_of: Archive/WebIDE/Troubleshooting
+---
+<div>{{ToolsSidebar}}</div><h2 id="使用USB连接Firefox_for_Android">使用USB连接Firefox for Android</h2>
+
+<p>如果你试着连接一个Android设备上的Firefox实例，但并没有成功。你可以尝试下面的解决方法：</p>
+
+<ul>
+ <li>检查你设备上Firefox的版本，确认你的设备运行的是Firefox  36或更高，因为低于此版本的话，WebIDE将不能自动侦测到设备。当然，如果你当前运行的版本确实低于要求的最低版本，你可以选择更新你的浏览器（推荐），你也可以选择手动开启端口转发并且连接到这个设备开启的端口（参考文档：<a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remote debugging on Firefox for Android</a>）</li>
+ <li>确认你是否在设备的Firefox中开启了远程调试功能，<code>Firefox &gt; Menu &gt; Settings &gt; Advanced &gt; Remote debugging via USB</code></li>
+ <li>确认设备是否开启USB调试（因为不同的机型设置方式不同，此处不予详细步骤）</li>
+ <li>如果你在WebIDE内仍然没有看到你的设备，尝试以下操作
+  <ul>
+   <li>拔下USB数据线并关闭<code>Remote debugging via USB</code>选项</li>
+   <li>重新插上USB数据线，重新打开Firefox并开启<code>Remote debugging via USB</code>选项</li>
+   <li>再次连接WebIDE</li>
+  </ul>
+ </li>
+ <li>确认你连接你的Firefox OS设备到你的电脑上的同时没有其他Android电话设备也连接到电脑上面。</li>
+ <li>使用你电脑上不同的USB接口。</li>
+ <li>更换USB线， 电话附带的USB线通常质量比较差，可能导致连接失败。</li>
+ <li>尝试使用更短的USB线。</li>
+ <li>在Settings中重复禁用和启用 Remote Debugging 功能，并且尝试多次插拔USB线。</li>
+ <li>如果你禁用 <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes"> ADB Addon Helper</a>, 看看你还是否能成功地运行命令 adb forward ？</li>
+ <li>如果你使用的是Linux系统，确认你已经增加了udev规则文件。在<a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">安装设置Android设备指南</a>中的第3步有记录说明。Geeksphone分配使用的idVendor是05c6， 并且在<a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">这一页</a>中有列出其他厂商的idVendor值。</li>
+ <li>如果你电脑使用的是Windows系统:
+  <ul>
+   <li>你需要根据<a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">安装设置Android设备指南</a>中的第三步来安装驱动程序，可以在<a class="external external-icon" href="http://downloads.geeksphone.com/">Geeksphone </a>网站上找到Geeksphone设备的驱动程序。Windows 8在默认情况下不能够安装未签名的驱动程序，可以参考 <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"如何在Windows 8上安装未签名的驱动"</a>。</li>
+   <li>如果上面所有的方法都不能让WebIDE找到你的设备的话，你或许不得不编辑<a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182"> adb_usb.ini</a>.</li>
+  </ul>
+ </li>
+ <li>如果你是EasyTether的用户，尝试卸载或者禁用EasyTether： <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li>
+</ul>
+
+<h2 id="调试认证的应用">调试认证的应用</h2>
+
+<p>如果你想要调试认证的app，包括内建的app，请参考：<a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">调试认证的app</a>。</p>
+
+<h2 id="启用日志功能">启用日志功能</h2>
+
+<p>你也可以启用详细日志功能来收集诊断信息：</p>
+
+<ol start="1" style="list-style-type: decimal;">
+ <li>访问 <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, 增加一个新的配置： <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>, 将其值设置为a<code>ll,</code></span></span><span class="message"><span class="content"><code>并设置</code></span></span>extensions.adbhelper@mozilla.org.debug<span class="message"><span class="content"><code>为True。</code></span></span></li>
+ <li>在<a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">插件管理器</a>中禁用 ADB Helper add-on，然后在启用。</li>
+ <li>打开<a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">浏览器控制台</a> 现在你可以看到带adb前缀的控制台信息，如果这个信息对你来说没有任何用处，<a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">请寻求帮助</a> 。</li>
+</ol>
+
+<h2 id="获取帮助">获取帮助</h2>
+
+<p>你也可以去 <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">IRC的devtools房间</a> ， 我们会尝试提供帮助。</p>
diff --git a/files/zh-cn/tools/web音频编辑器/index.html b/files/zh-cn/tools/web音频编辑器/index.html
new file mode 100644
index 0000000000..cc5c8bd4f7
--- /dev/null
+++ b/files/zh-cn/tools/web音频编辑器/index.html
@@ -0,0 +1,38 @@
+---
+title: Web 音频编辑器
+slug: Tools/Web音频编辑器
+tags:
+  - 工具
+translation_of: Tools/Web_Audio_Editor
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+ <p>Web 音频编辑器在 Firefox 32 推出。</p>
+</div>
+<p>开发者通过 <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a> 可以创建 {{domxref ("AudioContext", "audio context")}}。在该上下文环境中，开发者可以构建多个 {{domxref ("AudioNode", "audio nodes")}}，它们包括:</p>
+<ul>
+ <li>提供 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API#Defining_audio_sources">音源</a> 的节点，例如振荡器（ an oscillator） 或者数据缓冲源（a data buffer source）</li>
+ <li>提供进行 <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">音频变换</a> 的节点，例如延时和增益</li>
+ <li>提供指定 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API#Defining_audio_destinations">音频流输出端</a>，例如扬声器</li>
+</ul>
+<p>每个节点可能没有也可能具有多个 可以配置它们的行为的 {{domxref ("AudioParam")}} 属性。例如，{{domxref ("GainNode")}} 这个节点拥有一个 <code>gain</code> 属性，而 {{domxref ("OscillatorNode")}} 节点则拥有 <code>frequency</code> 和<code>detune</code> 两个属性。</p>
+<p>开发者可以在图像中连接每个节点，而整个图像则定义了音频流的行为。</p>
+<p>Web 音频编辑器检测创建于页面中的音频上下文环境，然后提供一个可视化的图像，从高可视化角度帮助您查看 Web 音频编辑器的操作，也使您能够确认每一个节点都以您的语预期连接在一起。然后您可以检测并编辑每一个图像中的节点 <code>AudioParam</code> 属性。部分不是 <code>AudioParam</code> 的属性也会显示出来<span style="line-height: 1.5;">，如 </span><code style="font-style: normal; line-height: 1.5;">OscillatorNode 的</code><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">type</code><span style="line-height: 1.5;"> 属性，您同样可以编辑这些属性。</span></p>
+<p>这个工具仍然处于实验阶段。如果您发现了问题，欢迎您到 <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor">Bugzilla 提交这些问题</a>。如果您希望反馈信息或者提供新特征的建议，请您到 <a href="http://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas">ffdevtools.uservoice.com</a> 或者 <a href="http://twitter.com/firefoxdevtools">Twitter</a> 提交这些信息。</p>
+<h2 id="打开_Web_音频编辑器">打开 Web 音频编辑器</h2>
+<p>在 Firefox 32 的默认条件下 Web 音频编辑器并没启用，您可以打开 <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Settings_2">开发者工具</a> 然后勾选"Web 音频"来启用 Web 音频编辑器。现在，在 <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Toolbar">开发者工具栏</a> 那里会多出一个"Web音频“选项卡。点击这个选项卡，然后加载创建了音频上下文环境的页面。 这里有两个演示：</p>
+<ul>
+ <li><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>，它可以为麦克风声音应用不同的音频效果，同时提供一个可视化的图像预览结果</li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>，当您移动鼠标的时候，它可以改变正弦波的音调和音量</li>
+</ul>
+<h2 id="可视化图像">可视化图像</h2>
+<p>Web 音频编辑器现在可以显示一张加载完成后的音频上下文环境的图像。下图是 Violent Theremin 演示的图像：</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8815/web-audio-editor-graph.png" style="display: block; margin-left: auto; margin-right: auto;">你可以看到，它使用了三个节点：作为源输入的 {{domxref ("OscillatorNode")}} ，作为音量控制的 {{domxref ("GainNode")}}，以及作为音源输出的 {{domxref ("GainNode")}} 。</p>
+<h3 id="与_AudioParams_连接">与 AudioParams 连接</h3>
+<div class="geckoVersionNote">
+ <p>显示与 AudioParams 连接的功能在 Firefox 34 版本中推出。</p>
+</div>
+<p>我们使用了直线线条来显示节点与节点之间的连接。然而，如果你把一个节点<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioNode.connect%28AudioParam%29">连接到了另一个节点的 AudioParam</a>，那么这两个节点之间的连接将显示为一条虚线，并且标记了 AudioParam 的属性名称：<img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h2 id="检测与修改_AudioNodes">检测与修改 AudioNodes</h2>
+<p>如果你点击了一个节点，这个节点将被高亮，然后在右手边你将看到一个节点查看器。这个节点检查器列出了当前节点的 AudioParam 各个属性的值。例如，下图显示的是  OscillatorNode 节点:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8817/web-audio-editor-node.png" style="display: block; margin-left: auto; margin-right: auto;">当用户的鼠标左右移动的时候，Violent Theremin 会随之修改 frequency 参数，您可以在节点查看器中查看到新的参数值。但是，这个参数值并非实时更新：您必须再次点击节点，才能看到更新后的值。</p>
+<p>如果您在节点检查器中点击了某一个属性值，那么你就可以修改这个属性值：按下回车或者 Tab 键就可以使新的属性值立即生效。</p>
diff --git a/files/zh-cn/tools/working_with_iframes/index.html b/files/zh-cn/tools/working_with_iframes/index.html
new file mode 100644
index 0000000000..5ec789e983
--- /dev/null
+++ b/files/zh-cn/tools/working_with_iframes/index.html
@@ -0,0 +1,31 @@
+---
+title: Working with iframes
+slug: Tools/Working_with_iframes
+tags:
+  - Frames
+  - 工具
+  - 开发者工具
+  - 调试
+translation_of: Tools/Working_with_iframes
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="geckoVersionNote">
+<p>这是一项Firefox 34中的新功能。</p>
+</div>
+
+<p>从Firefox 34往后，你可以通过打开开发者工具来查看一个文档中的特定iframe。</p>
+
+<p>{{EmbedYouTube("Me9hjqd74m8")}}</p>
+
+<p>你将看到工具栏中有个按钮:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8547/frame-selection-button.png" style="display: block; margin-left: auto; margin-right: auto;">点击此按钮，你将看到一个弹出列表，此列表列出了文档中的所有iframe和文档本身。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8549/frame-selection-popup.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="note">
+<p>请注意为了查看这个弹出列表，你必须刷新页面或关闭再重新打开开发者工具。这个bug在 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1062233">bug 1062233</a>里记录.</p>
+</div>
+
+<p>如果你选择了列表中的某一项，工具箱中的所有工具（查看器、控制台、调试器等）将会只针对当前的iframe，而且这些工具将会表现的好像页面中的其他部分不存在一样。</p>
diff --git a/files/zh-cn/tools/不推荐的工具/index.html b/files/zh-cn/tools/不推荐的工具/index.html
new file mode 100644
index 0000000000..f7bb80e5bf
--- /dev/null
+++ b/files/zh-cn/tools/不推荐的工具/index.html
@@ -0,0 +1,122 @@
+---
+title: 不推荐的工具
+slug: Tools/不推荐的工具
+translation_of: Tools/Deprecated_tools
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>在devtools的开发过程中，我们添加了几个实验面板来尝试新的想法。并不是所有这些都被广泛采用，而且由于维护成本的原因，很少使用的面板最终被移除。</p>
+
+<p>我们已经创建了这个不推荐使用或删除的面板列表。此页记录不推荐使用的面板和跟踪其删除的错误。尽管这些面板已经被删除，但是您仍然可以访问旧代码，并且有其他的web扩展，您可以尝试获得类似的功能。</p>
+
+<p><br>
+ 当我们否决某个小组时，我们首先从社区获得反馈，以确定删除该小组的影响。一旦我们决定移除面板，我们将提供一条警告消息，最后，我们将从代码库中移除面板。</p>
+
+<p><br>
+ 尝试激活已弃用的面板时，可能会看到警告消息，如下图所示：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16546/devTool_settings_deprecated_notice.png" style="border: 1px solid black; display: block; height: 504px; margin: 0px auto; width: 2558px;"></p>
+
+<p>此外，如果打开其中一个工具的面板，您还将看到有关删除该工具的警告消息。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16544/deprecated_tool_notice.png" style="border: 1px solid black; display: block; height: 498px; margin: 0px auto; width: 2558px;"></p>
+
+<h2 id="草稿行">草稿行</h2>
+
+<p>从firefox 70开始，scratchpad将被弃用 ({{bug(1565380)}}).</p>
+
+<p>它将在将来被删除（目前版本号未知)  （{{bug(1519103)}}).</p>
+
+<h3 id="说明">说明</h3>
+
+<p>scratchpad提供了一个测试javascript代码的环境。您可以编写、运行和检查与网页交互的代码的结果。</p>
+
+<p><img alt="Screenshot of the Scratchpad window with a deprecation message" src="https://mdn.mozillademos.org/files/16859/Screen_Shot_2019-08-26_at_08.08.11.png" style="height: 1012px; width: 1282px;"></p>
+
+<h3 id="选择">选择</h3>
+
+<p>您可以在web控制台中编写多行javascript代码，使其类似于scratchpad。如果您在控制台中输入的javascript代码可以解释为多行语句的开头, <kbd>Enter</kbd> 在输入中添加新行，您可以使用 <kbd>Ctrl + Enter</kbd> (<kbd>Cmd + Enter</kbd> 在 macOS).</p>
+
+<p><img alt="Screenshot of the Webconsole multiline input, showing an evaluation with a Syntax Error and another, correct one." src="https://mdn.mozillademos.org/files/16860/Screen_Shot_2019-08-26_at_08.18.26.png" style="height: 1166px; width: 1864px;"></p>
+
+<p>在计算时，输入不会被清除，这使得在代码片段上快速排列成为可能。</p>
+
+<p><br>
+ 结果显示在控制台输出中，在输入的右侧，提供即时反馈。与scratchpad不同，错误在输出中以可扩展的stacktrace正确显示，这使得调试当前编写的代码更加容易。</p>
+
+<h2 id="WebIDE和连接页">WebIDE和连接页</h2>
+
+<p>WebIDE在Firefox 69中被弃用</p>
+
+<p>从 Firefox 70 弃用 ({{bug(1539451)}}).</p>
+
+<p>从 Firefox 71 删除 ({{bug(1539462)}}).</p>
+
+<h3 id="说明_2">说明</h3>
+
+<p>webide允许您将firefox开发工具连接到远程浏览器，比如firefox for android。它还旨在支持firefox操作系统的应用程序开发。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16613/WebIDE_68.png" style="display: block; height: 632px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="选择_2">选择</h3>
+
+<p>远程调试可在  “关于：从Firefox 68开始调试”  中找到。未移植到about的功能有：wifi调试，firefox for android，应用程序开发。已计划但尚未移植的功能：远程浏览器屏幕截图和编辑远程浏览器配置。有关邮件列表线程的更多详细信息。</p>
+
+<h2 id="Canvas_调试器">Canvas 调试器</h2>
+
+<p>Bugzilla 问题: {{bug(1403938)}}</p>
+
+<p>从Firefox 67删除</p>
+
+<h3 id="说明_3">说明</h3>
+
+<p>canvas调试器允许用户检查canvas元素并查看给定函数的调用频率。由于没有使用，它被弃用了。</p>
+
+<p><br>
+ 我们没有画布调试器的专用文档。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16543/canvas_tool.png" style="display: block; margin: 0 auto; width: 800px;"></p>
+
+<h3 id="Alternatives">Alternatives</h3>
+
+<p><a href="https://addons.mozilla.org/en-US/firefox/addon/spector-js/#&amp;gid=1&amp;pid=2" id="docs-internal-guid-836d1256-7fff-1e5e-9c9c-357ae6e43dba" style="text-decoration: none;"><u>Spector.js</u></a><span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span>是一个webextension，可以为这些特性提供3d说明文。</p>
+
+<h2 id="Web_Audio_editor（网络音频编辑器）">Web Audio editor（网络音频编辑器）</h2>
+
+<p>Bugzilla 问题: {{bug(1403944)}}</p>
+
+<p>从Firefox 67删除</p>
+
+<h3 id="说明_4">说明</h3>
+
+<p>web音频编辑器允许您检查在页面中构造的音频上下文，并提供其图形的可视化。这提供了其操作的高级视图，并使您能够确保所有节点都按预期方式连接。可以为图中的每个节点编辑audioparam属性。一些非AudioParam属性，如振荡节点的类型属性，也被显示和编辑。由于没有使用，它被弃用了。</p>
+
+<p><br>
+ 更多关于<a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16548/webAudio_tool.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p>
+
+<h3 id="选择_3">选择</h3>
+
+<p>替代方案包括 <a href="https://github.com/google/audion">AudioN</a> 和 <a href="https://github.com/spite/WebAudioExtension">https://github.com/spite/WebAudioExtension</a> web extensions.</p>
+
+<h2 id="Shader_editor">Shader editor</h2>
+
+<p>Bugzilla 问题: {{bug(1342237)}}</p>
+
+<p>从Firefox 67删除</p>
+
+<h3 id="说明_5">说明</h3>
+
+<p>The Shader Editor</p>
+
+<p>允许用户检查和编辑webgl顶点和片段着色器的源。由于使用和维护成本较低，已弃用。</p>
+
+<p><br>
+ 更多关于<a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16547/shaderEditor_tool.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 800px;"></p>
+
+<h3 id="Alternatives_2">Alternatives</h3>
+
+<p>此面板的另一个选择是此扩展：<a href="https://github.com/spite/ShaderEditorExtension">https://github.com/spite/ShaderEditorExtension</a>, 或 <a href="https://addons.mozilla.org/en-US/firefox/addon/spector-js/#&amp;gid=1&amp;pid=2">Spector.js</a> 还支持一个着色器编辑器，该编辑器需要一个库来使用着色器重载器挂钩。目前只有巴比伦图书馆。</p>
diff --git a/files/zh-cn/tools/存储查看器/index.html b/files/zh-cn/tools/存储查看器/index.html
new file mode 100644
index 0000000000..198d5d5b92
--- /dev/null
+++ b/files/zh-cn/tools/存储查看器/index.html
@@ -0,0 +1,186 @@
+---
+title: 存储查看器
+slug: Tools/存储查看器
+translation_of: Tools/Storage_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>存储查看器使你能够查看网页使用的多种存储类型。如今，它能够查看如下存储类型：</p>
+
+<ul>
+ <li><em>Cache缓存</em> — 使用缓存API创建的任何DOM缓存</li>
+ <li><em>Cookies</em> — 所有页面创建的cookies或页面中任何的iframes。还列出了<span id="result_box" lang="zh-CN"><span>作为网络呼叫响应的一部分创建的Cookie，但仅适用于工具打开时发生的响应</span></span></li>
+ <li><em>IndexedDB</em> — 所有页面创建的IndexedDB或或页面中任何的IndexedDB。<span id="result_box" lang="zh-CN"><span>其对象存储以及存储在这些对象库中的项目。</span></span></li>
+ <li><em>本地存储</em>— 所有页面创建<em>的本地存储</em>或页面中任何的iframes。</li>
+ <li><em>Session存储</em>—所有页面创建的Session或页面中任何的iframes。</li>
+</ul>
+
+<p><span id="result_box" lang="zh-CN"><span>目前，Storage Inspector仅为您提供存储的只读视图。</span> <span>但我们正努力让您在将来的版本中编辑存储内容。</span></span></p>
+
+<h2 id="打开存储查看器">打开存储查看器</h2>
+
+<p>你可以在火狐菜单面板（或工具菜单中显示菜单栏或在 Mac OS X 上）或在键盘上按Shift + F9的web开发者工具的子菜单上打开“存储查看器”</p>
+
+<p>工具箱显示在浏览器窗口的底部，当打开存储查看器，在工具箱中会被称为“存储”</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14247/1-storage-inspector-open.png" style="display: block; height: 846px; margin-left: auto; margin-right: auto; width: 1311px;"></p>
+
+<h2 id="存储查看器用户接口">存储查看器用户接口</h2>
+
+<p>存储查看器UI被分为三个主要部分：</p>
+
+<ul>
+ <li><a href="#storage-tree">存储树</a></li>
+ <li><a href="#table-widget">表部件</a></li>
+ <li><a href="#sidebar">侧边栏</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14249/2-storage-inspector-annotated.png" style="display: block; height: 858px; margin-left: auto; margin-right: auto; width: 1323px;"></p>
+
+<h3 id="存储树"><a name="storage-tree">存储树</a></h3>
+
+<p>存储树列出了存储查看器能够查看的所有存储类型:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14251/3-storage-types.png" style="display: block; height: 166px; margin-left: auto; margin-right: auto; width: 386px;"></p>
+
+<p>在每种类型下，对象都是按源组织。对于cache，协议不会区分源。对于IndexedDB或本地存储，源由协议与主机名组成。举个栗子，"http://mozilla.org" and "https://mozilla.org" 是两个不同的源，所有本地存储项不能在它们之间共享。</p>
+
+<p>在“缓存存储”下，对象按域名和cache的名称进行组织：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14253/4-cachestorage.png" style="display: block; height: 210px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>IndexedDB对象按源组织，然后按数据库名称，最后按对象存储名称：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14255/5-indexeddb.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>关于Cookies,本地存储和Session存储类型,层级结构它们只有一个级别, 因此存储项直接列在每个域名下</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14257/6-cookies.png" style="display: block; height: 598px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>你可以点击树中的每个项去扩展或折叠它的子项.树是活动的，所有如果添加一个新的源(例如通过添加iframes)，它将自动添加到每个存储类型中。</p>
+
+<p>点击一个树项目将在右侧的表部件显示所选项的具体信息。例如点击Cookies存储类型下的源，将会显示所有属于该域名下的cookies信息。</p>
+
+<h3 id="表部件"><a name="table-widget">表部件</a></h3>
+
+<p>表部件是列出与所选树项（不管是域名还是数据库）一致的所有项的位置。根据存储类型和树项的不同，表中的列数也会有所不同。</p>
+
+<p>所有表部件的列都可以调整大小的，你可以通过表头的内容-点击去隐藏和显示列和选择你想看到的列。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14259/7-col-selection.png" style="display: block; height: 594px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h3 id="搜索">搜索</h3>
+
+<p>在表部件的顶部有一个搜索框:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14261/8-search.png" style="display: block; height: 646px; margin-left: auto; margin-right: auto; width: 912px;"></p>
+
+<p>它将对表进行过滤，只显示与搜索项匹配的项。如果它们的任何字段(包括您隐藏的列的字段)包含搜索项。</p>
+
+<p>从火狐50版本之后, 你可以使用<kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac) 来显示搜索框.</p>
+
+<h3 id="添加和更新存储">添加和更新存储</h3>
+
+<p>在最新版本的火狐浏览器中，你还可以使用按钮去刷新当前查看到的存储类型视图，而且在适用情况下添加一个存储条目(你不能在IndexedDB或cache添加新的条目):<img alt="" src="https://mdn.mozillademos.org/files/15812/add-refresh-storage.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="侧边栏"><a name="sidebar">侧边栏</a></h3>
+
+<p>当你在存储表部件选择任何一行时，侧边栏就会显示所选行的详细信息。如果选中cookie，侧边栏将列出该cookie的所有详细信息</p>
+
+<p>侧边栏能够解析cookie的值或本地存储项或IndexedDB项，并且将其转换成有意义的对象而不仅仅是字符串。举个栗子:</p>
+
+<ul>
+ <li>一个JSON字符串比如 <code>'{"foo": "bar"}'</code>会以JSON对象显示 <code>{foo: "bar"}</code>.</li>
+ <li>一个包含键分隔符的字符串，例如 <code>"1~2~3~4"</code> 或 <code>"1=2=3=4"</code> 会显示成数组: <code>[1, 2, 3, 4]</code>.</li>
+ <li>一个包含键值对的字符串，比如<code>"ID=1234:foo=bar"</code> 会显示为JSON对象: <code>{ID:1234, foo: "bar"}</code>.</li>
+</ul>
+
+<p>还可以使用工具箱侧边栏顶部的搜索框过滤显示的值</p>
+
+<h2 id="Cache_存储">Cache 存储</h2>
+
+<p>在Cache存储类型下，你能够看到使用Cache API创建的任何DOM缓存的内容。如果你选择一个cache，你将看到该caches包含的资源列表。对应每个资源，你能看到如下信息：</p>
+
+<ul>
+ <li>资源的URL路径</li>
+ <li>获取请求的状态码</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14263/9-cachedstorage-details.png" style="display: block; height: 213px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h2 id="Cookies">Cookies</h2>
+
+<p>当你从存储树中选择Cookies存储类型的一个源时，会在表格小部件中列出该cookies的所有源。cookies表有以下列：</p>
+
+<ul>
+ <li><em>Name</em>— cookie的名称</li>
+ <li><em>Path </em>—  cookie的路径属性</li>
+ <li><em>Domain</em> — cookie的域</li>
+ <li><em>Expires on</em> — cookie过期时间，如果cookie是session, 此列的值将为session</li>
+ <li><em>Last accessed on</em> — 上次读取cookies的时间</li>
+ <li>Created on — cookie创建时间</li>
+ <li><em>Value</em> — cookie的值</li>
+ <li><em>HostOnly </em>— 这个cookie是不是一个域的cookie，如果是，域名以“.”为开头</li>
+ <li><em>Secure </em>— cookie是不是安全的</li>
+ <li><em>HttpOnly </em>— cookie是不是 HTTP only</li>
+ <li><em>同一站点</em> — <span id="result_box" lang="zh-CN"><span>这个cookie是同一站点的cookie吗？</span> <span>相同站点cookie允许服务器通过断言特定cookie应仅与同一可注册域发起的请求一起发送来减轻CSRF和信息泄漏攻击的风险。</span></span></li>
+</ul>
+
+<div class="note">
+<p><strong>提示</strong>: 有一些列不会默认显示 — 如果要改变部分列的显示,在已有的表格标题上单击鼠标右键/<kbd>Ctrl</kbd>-鼠标左键，而后使用生成的上下文菜单显示/隐藏列</p>
+</div>
+
+<p><span id="result_box" lang="zh-CN"><span>您可以通过双击表格小组件中的单元格内部并编辑它们包含的值来编辑cookie，并通过单击“加号”（+）按钮添加新的cookie，然后将生成的新行编辑为所需的值。</span><br>
+ <br>
+ <span>您还可以使用每行上下文菜单删除cookie：</span></span> <img alt="" src="https://mdn.mozillademos.org/files/14273/delete-cookies.png" style="display: block; height: 208px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h2 id="本地存储Session存储">本地存储/Session存储</h2>
+
+<p><span id="result_box" lang="zh-CN"><span>当选择与本地存储或会话存储相对应的源时，该表将列出与本地存储或会话存储相对应的所有项的名称和值。</span></span></p>
+
+<p><span lang="zh-CN"><span>您可以通过双击</span></span><a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a><span lang="zh-CN"><span>中的单元格内部并编辑它们包含的值来编辑本地和会话存储项：</span></span></p>
+
+<p>{{EmbedYouTube("oeQzhpoMByw")}}</p>
+
+<p><span id="result_box" lang="zh-CN"><span>您还可以使用上下文菜单删除本地存储和会话存储条目：</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14275/14-delete-localstorage.png" style="display: block; height: 444px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p><span id="result_box" lang="zh-CN"><span>最后，您可以通过单击“加号”（+）按钮添加新的存储项，然后将生成的新行编辑为所需的值。</span></span></p>
+
+<h2 id="IndexedDB">IndexedDB</h2>
+
+<p><span id="result_box" lang="zh-CN"><span>在存储树中的索引数据库存储类型中选择源时，该表列出了该源存在的所有数据库的详细信息。</span> <span>数据库具有以下详细信息：</span></span></p>
+
+<ul>
+ <li><em>Database Name</em> — 数据库名称</li>
+ <li><em>Storage</em> — <span id="result_box" lang="zh-CN"><span>为数据库指定的存储类型（Firefox 53中的新增功能）</span></span></li>
+ <li><em>Origin</em> — 数据库的源</li>
+ <li><em>Version</em> — <span id="result_box" lang="zh-CN"><span>数据库版本</span></span></li>
+ <li><em>Object Stores</em> — <span id="result_box" lang="zh-CN"><span>数据库中的对象存储数目</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="zh-CN"><span>在存储树中选择IndexedDB数据库时，表中列出了有关所有对象存储的详细信息。</span> <span>任何对象存储都具有以下详细信息：</span></span></p>
+
+<ul>
+ <li><em>Object Store Name</em> — 对象库的名称</li>
+ <li><em>Key</em> — 对象库的keyPath属性.</li>
+ <li><em>Auto Increment</em> — 是否启动自动增量</li>
+ <li><em>Indexes</em> — <span id="result_box" lang="zh-CN"><span>对象库中存在的索引数组，如下所示</span></span></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14265/10-indexeddb-details.png" style="display: block; height: 205px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p><span id="result_box" lang="zh-CN"><span>在存储树中选择对象库时，该对象库中的所有项都列在表中。</span> <span>所有项目都有一个键和一个与之关联的值。</span></span></p>
+
+<p><span id="result_box" lang="zh-CN"><span>从Firefox 49开始，您可以使用存储树视图中的上下文菜单删除IndexedDB数据库：</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14277/15-delete-database.png" style="display: block; height: 194px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p><span id="result_box" lang="zh-CN"><span>如果无法删除数据库（最常见的原因是仍存在与数据库的活动连接），则存储查看器中将显示一条警告消息：</span></span> <img alt="" src="https://mdn.mozillademos.org/files/14267/11-indexeddb-delete-warning.png" style="display: block; height: 255px; margin: 0px auto; width: 900px;"></p>
+
+<p><span id="result_box" lang="zh-CN"><span>从Firefox 50开始，您可以使用表格小部件中的上下文菜单删除对象库或特定项目中的所有项目：</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14279/16-delete-database-entries.png" style="display: block; height: 195px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p> </p>
diff --git a/files/zh-cn/tools/小技巧/index.html b/files/zh-cn/tools/小技巧/index.html
new file mode 100644
index 0000000000..c7a2cfc304
--- /dev/null
+++ b/files/zh-cn/tools/小技巧/index.html
@@ -0,0 +1,135 @@
+---
+title: 小技巧
+slug: Tools/小技巧
+tags:
+  - 开发工具
+  - 网络开发
+translation_of: Tools/Tips
+---
+<div>{{ToolsSidebar}}</div>
+
+<h2 id="常规">常规</h2>
+
+<p>截图:</p>
+
+<ul>
+ <li>页面截图: 点击截图按钮 (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">;需要在<a href="/en-US/docs/Tools/Tools_Toolbox#Extra_tools">工具箱</a>激活)。</li>
+ <li>视窗截图: 在<a href="/en-US/docs/Tools/Responsive_Design_Mode#Responsive_Design_Mode_controls">响应式设计视图模式</a>下点击截图按钮 (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">) 。</li>
+ <li>节点截图: 在查看器中右击节点并点击 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Screenshot Node">"节点截图"</a>。</li>
+ <li>通过 <a href="/en-US/docs/Tools/GCLI#Commands">Developer Toolbar command</a>: <code>screenshot [filename] [options]</code>.</li>
+</ul>
+
+<p>设置:</p>
+
+<ul>
+ <li>为开发者工具设置一个 <a href="/en-US/docs/Tools/Settings#Choose_DevTools_theme">主题</a> .</li>
+ <li><a href="/en-US/docs/Tools/Settings#Editor_Preferences">改变按键绑定</a> 为你所熟悉的其他编辑器，如 Vim, Emacs 或Sublime Text。</li>
+ <li>激活或取消不同的工具 (还有更多的工具!)。</li>
+</ul>
+
+<h2 id="页面查看器">页面查看器</h2>
+
+<p>在 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">标签视图</a>中:</p>
+
+<ul>
+ <li>选择节点并按下 <kbd>H</kbd> 键来隐藏/显示该节点。</li>
+ <li>选择节点并按下 <kbd>Backspace</kbd> 或 <kbd>Del</kbd> 键来删除该节点。</li>
+ <li>按住 <kbd>Alt</kbd> 键并点击该节点来展开该节点及其所有子节点。</li>
+ <li>点击最后一个 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">面包屑导航按钮</a>来使查看器页面滚动到该节点.</li>
+ <li>点击节点后面的“ev”图标 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">来查看所以绑定在该节点上的事件监听器</a>。</li>
+ <li>选择节点并按下 <kbd>S</kbd> 键来在页面中查看该节点 (也可以用过右击该节点并点击 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Scroll Into View">"画面滚动到节点"</a>)。</li>
+ <li>右击节点并点击 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">"在控制台中使用"</a> 来把该节点作为 <code>temp<var>N</var></code> 变量在 <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">命令行</a> 中使用。</li>
+</ul>
+
+<p>在<a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button"> 选择元素</a>时:</p>
+
+<ul>
+ <li>按住 <kbd>Shift</kbd> 并点击元素来选择节点并保持选择模式 (拾取模式不会取消).</li>
+ <li>使用 <kbd>←</kbd>/<kbd>→</kbd> 键来选择它的父/子元素 (如果它们很难被选择).</li>
+</ul>
+
+<p>在 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">规则视图</a>中:</p>
+
+<ul>
+ <li>点击选择器后的查看按钮 (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">)来使所有匹配的元素高亮显示。</li>
+ <li>点击<code>element{}</code> 规则后的查看按钮(<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">)来锁定当前元素的高亮显示。</li>
+ <li>右击任意属性并选择 "Show MDN Docs" 来 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">在MDN 文档中查看这个属性</a>。</li>
+ <li>点击被覆盖属性后的筛选按钮 (<img alt="" src="https://mdn.mozillademos.org/files/14187/filter.png" style="height: 19px; width: 18px;">)来 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">查找其他覆盖它的属性</a>。</li>
+ <li>右击属性的名称，值或者规则来复制该属性的名称，值，声明或者整个规则。</li>
+</ul>
+
+<h2 id="网页控制台">网页控制台</h2>
+
+<p>在所有面板:</p>
+
+<ul>
+ <li>按 <kbd>Esc</kbd> 键打开 <a href="/en-US/docs/Tools/Web_Console/Split_console">split console</a>; 用以调试页面以及审查节点。</li>
+</ul>
+
+<p><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">命令行</a>:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#$0">$0</a></code> 指令代表当前选择的节点。</li>
+ <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#$">$()</a></code> 是 {{domxref("document.querySelector()")}}的简写形式。</li>
+ <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#$$">$$()</a></code> 是{{domxref("document.querySelectorAll()")}}的简写形式。</li>
+ <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#copy">copy()</a></code> 复制所有属性作为文本。</li>
+ <li>右击节点并点击 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">"在控制台中使用"</a> 来把这个节点作为 <code><a href="/en-US/docs/Tools/Web_Console/Helpers#tempN">temp<em>N</em></a></code> 变量在命令行中使用.</li>
+ <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#cd">cd()</a></code> 切换JavaScript执行域到该页面的一个不同的iframe子页面。</li>
+ <li><code><a href="/en-US/docs/Web/API/Console/table">console.table()</a></code> 将表格数据作为表格输出（此句翻译需要校对）.</li>
+ <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#help">help()</a></code> 打开<a href="/zh-CN/docs/Tools/Web_Console/Helpers">Web控制台帮助</a>页面</li>
+</ul>
+
+<p>控制台输出:</p>
+
+<ul>
+ <li>点击输出元素后面的查看按钮 (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">)  来<a href="/en-US/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">在查看器中选中该元素</a> 。</li>
+ <li>点击勾选 <a href="/en-US/docs/Tools/Settings#Common_preferences">"持续日志"</a> 选项来使输出的信息在进入及离开网页后不被清除。</li>
+ <li>在设置面板点击勾选 <a href="/en-US/docs/Tools/Settings#Web_Console">"显示时间戳"</a> 选项来在输出信息前面显示时间戳。</li>
+</ul>
+
+<h2 id="调试">调试</h2>
+
+<ul>
+ <li>点击黑箱按钮 (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">)来在调试中跳过JavaScript库。</li>
+ <li>按下<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F</kbd> 组合键来在所有脚本搜索。</li>
+ <li>按下<kbd>Ctrl</kbd>+<kbd>D</kbd> 组合键来搜索函数的定义。</li>
+ <li>按下 <kbd>Ctrl</kbd>+<kbd>L</kbd> 组合键跳转到具体的行。</li>
+</ul>
+
+<h2 id="样式编辑器">样式编辑器</h2>
+
+<ul>
+ <li>点击样式表前的黑箱按钮 (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">) 来切换可见度。</li>
+ <li>在 <a href="/en-US/docs/Tools/Responsive_Design_Mode">响应式设计模式</a>下点击 <a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">@media </a>规则来切换模式。</li>
+ <li>点击导入按钮 (<img alt="Button to import a style sheet from the file system" src="https://mdn.mozillademos.org/files/14193/Import%20button.png" style="height: 18px; width: 18px;">)来导出样式表或者点击创建按钮(<img alt="Button to create a new style sheet" src="https://mdn.mozillademos.org/files/14195/Create%20style%20sheet%20button.png" style="height: 18px; width: 18px;">)创建一个新的样式表。</li>
+ <li>点击设置按钮并勾选 <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">"显示原始来源"</a> 来显示css预处理文件.</li>
+</ul>
+
+<h2 id="网络">网络</h2>
+
+<ul>
+ <li>点击启动性能分析按钮来 <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">比较初次缓存与没有缓存的页面加载</a> 。</li>
+ <li>选择一个请求并点击 <a href="/en-US/docs/Tools/Network_Monitor#Edit_and_Resend">"编辑与重发"</a>按钮来修改该请求的消息头并重新发送该请求。</li>
+ <li>点击勾选 <a href="/en-US/docs/Tools/Settings#Common_preferences">"持续日志"</a> 选项来使输出的信息在进入及离开网页后不被清除。</li>
+ <li>点击 <a href="/en-US/docs/Tools/Network_Monitor#Cause_column">"原因列表中的js图标 </a>来追踪这个请求的堆栈。</li>
+ <li>点击勾选 <a href="/en-US/docs/Tools/Settings#Advanced_settings">"禁用缓存"</a> 选项来在调试时禁止网页缓存。</li>
+</ul>
+
+<h2 id="存储">存储</h2>
+
+<ul>
+ <li>右击列表头打开下拉菜单来显示或隐藏列。</li>
+ <li>右击任意条目，点击“删除名字”来删除该条目或点击“删除全部”来删除全部条目。</li>
+ <li>选择一个条目并在侧边栏中查看解析的值。</li>
+</ul>
+
+<h2 id="开发者工具条">开发者工具条</h2>
+
+<ul>
+ <li>按下 <kbd>Shift</kbd> + <kbd>F2</kbd> 来打开 <a href="/en-US/docs/Tools/GCLI">Developer Toolbar (GCLI)</a>，使用命令来控制页面，开发者工具，浏览器以及其他。</li>
+ <li><code><a href="/en-US/docs/Tools/GCLI#Commands">help</a></code> 弹出所有可用的指令的清单。</li>
+ <li><code><a href="/en-US/docs/Tools/GCLI/Display_security_and_privacy_policies">security csp</a></code> 显示 <a href="/en-US/docs/Web/Security/CSP">Content Security Policy</a>（内容安全政策） 指定的安全特性 。</li>
+ <li><a href="/en-US/docs/Tools/GCLI#Commands"><code>pref show</code>, <code>pref set</code> and <code>pref reset</code></a> 显示，设置和重置浏览器偏好。</li>
+ <li><code><a href="/en-US/docs/Tools/GCLI#Commands">folder openprofile</a></code> 在文件管理器中显示当前的配置文件目录。</li>
+ <li><code><a href="/en-US/docs/Tools/GCLI#Commands">media emulate <var>media type</var></a></code> 模拟指定的媒体类型。</li>
+</ul>