initial commit

2 files changed, 429 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>