about:debugging

如果你想在Firefox 68之前的版本中找到关于调试 页面(about:debugging) 的信息,请查看: about:debugging (before Firefox 68) 。 此文档适用于 Firefox 68 和之后的版本

声明:调试页面提供了空位,您可以将Firefox开发者工具附加到一些调试目标上。目前它支持目标三大类:无需重启的附加组件,选项卡,和workers。

打开调试页面

有2种方式打开调试:

  •  在firefox地址栏输入 "about:debugging"。
  • 点击右上角菜单栏按钮,选择Web开发者,点击远程调试

当调试页面打开时,在页面的左边,你会看到一个侧边栏,在其中有2个选项关于远程调试的设置。

设置
在设置选项配置以连接你的远程设备。
此火狐
包含你导入的临时扩展;已经安装在Firefox上的扩展;打开的选项卡;正在运行的service workers

设置

连接到远程设备

Firefox 支持通过USB调试安卓设备。

在连接之前:

  1. 在你的安卓设备上启用开发者选项。
  2. 在开发者选项中启用USB调试。
  3. 在安卓设备的 Firefox 中启用 USB 调试。
  4. 使用USB连接线将安卓设备连接到你的电脑。

如果调试页面的左侧没有显示你的设备,尝试点击“刷新设备”按钮。 如果你确认是按照以上步骤来连接但还是没有显示,看看 故障排除

要开始一个调试会话,首先打开你想要调试的页面并点击连接以打开连接你的设备。如果连接成功,你就可以点击你的设备名称,查看你设备上打开的选项卡信息。

这些选项卡详情和此火狐选项的详情类似,不同的是此火狐的选项显示的是你的电脑上面的信息,而这些选项卡显示的是你的远程设备中的。

注意:如果你的远程设备中的Firefox版本比你的电脑中的版本老,你会收到如下警告信息:

在以上图片中,有三个打开的选项卡: Network or cache RecipeNightly HomeAbout Nightly。要调试这三个选项卡的内容,点击它上面的" Inspect",点击之后,会打开一个有开发者工具的新选项卡。

在以上工具列表中,你可以看见连接的设备信息。包含你是通过USB连接到 Moto G(5) 上面的 Mozilla Firefox Nightly ,你正在调试的页面,和页面地址。

此火狐

此火狐选项结合了扩展的特征,选项卡,Workers 被分为以下几个部分:

临时扩展
显示你载入的临时扩展。
扩展
此部分显示你已经安装在Firefox上面的扩展。
Service Workers, Shared Workers, 和其他 Workers
此页面有三项,包含处理 Service Workers, Shared Workers,和其他 Workers。

内部扩展是否显示在这里取决于 devtools.aboutdebugging.showHiddenAddons 设置。 如果你需要显示这些扩展, 在地址栏输入 about:config 找到以上设置并将值设为 true

扩展

导入一个临时扩展

通过“载入临时附加组件...”按钮可以导入你本地磁盘上的附加组件。 点击按钮, 找到附加组件所在的目录并选择里面的manifest文件,完成之后将会显示在“临时扩展”选项下面。

你不必打包或者签名扩展,它会一直安装在上面,直到你重启Firefox。

这方法对比从XPI上面安装附加组件有一个很大的优势:

  • 当你修改了附加组建的代码时,不必重建XPI并且重新安装。
  • 你可以到导入一个不需要签名和不必禁用签名的附加组件。

一旦你导入临时扩展,你可以看到它的以下信息:

检查
在调试器中导入扩展。
重载
重新载入扩展。这功能很方便当你修改了扩展的时候。
移除
移除临时扩展。

扩展的其他信息也包含:

位置
你本地系统的扩展源码的所在位置
扩展 ID
分配给扩展的临时签名。
内部 UUID
分配给扩展的内部UUID。
Manifest URL
点击链接,扩展加载的 manifest 将在新选项卡打开。

更新临时扩展

如果你用这个方法安装了一个临时扩展,当你更新扩展的时候会发生什么?

  • 当你更改那些按需加载的文件,比如内容脚本或者弹出窗口,这些更改会被自动识别,并在下次加载内容脚本或者弹出窗口出现的时候显示。
  • 对于其他文件的更改,点击移除按钮旁边的重载按钮,它会做以下事情:

已安装的扩展

已经安装的扩展在下面的扩展列表选项下面,每个扩展你都会看到如下信息:

就像加载过的临时扩展一样, Manifest URL 旁边的链接将在新选项卡打开加载的 manifest 。

注意: 推荐使用浏览器工具箱而不是附加组件调试Web扩展。详见 Debugging WebExtensions

调试页面的附件组件部分列出了当前安装的所有web 扩展。旁边的 查看 按钮可以调试扩展。

注意:这个列表里面可能包含 Firefox自带的附加组件。

如果你点击 查看附加组件调试器 会打开一个新选项卡。

到 附加组件调试器 页面查看更多信息

Workers

Workers 页面显示你的 workers,有如下分类:

你可连接开发者工具到每个worker,并且发送通知给 service workers。

Service worker 状态

service workers 列表显示了每个service worker 的 生命周期 状态, 有三种可能的状态:

  • “注册中”: 涵盖了service worker到初始注册之间的所有状态,包含“安装中”,“激活中”,“等待中” 。
  • “运行中”: 当前正在运行的service worker,已经安装,激活,并且正在处理事件。
  • “已停止”: service worker 已经安装激活,但是空闲之后被终止。

这部分使用了一个简单的演示: https://serviceworke.rs/push-simple/.

注销 service workers

取消注册按钮 允许你“注销” service worker:

向 service workers 推送事件

要调试推送通知,你可以在 push event 监听器中设置一个断点。但是,你也可以调试本地推送通知而不需要服务器,点击推送按钮向service worker发送推送事件。

不兼容Service workers

如果浏览器配置不兼容service workers,在此火狐选项页的顶部会显示一个警告信息。此时service worker将不可用或者被调试。

如果 about:config 里面的 dom.serviceWorkers.enable 设置成 false 那么Service workers 将不可用。