path: root/files/zh-cn/tools/about_colon_debugging/index.html

---
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="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/zh-CN/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>