MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Debugging

本文描述的方法适用于Firefox 50及更高的版本。如果你需要使用早期版本的Firefox,请参考这篇文章 debugging WebExtensions before Firefox 50.

这篇文章解释了如何使用Firefox开发者工具来调试 WebExtensions.

一个 WebExtension 可以包含几个不同的部分 — background scripts,popups,options pages,content scripts — 每个部分的调试流程都略微不同。本文中,每个部分都占用了一个大的章节,每个章节都可以独立阅读.。我们先介绍附加组件调试器,你将用它调试你大多数的附加组件程序。

附加组件调试器

在这篇文章的大部分地方,我们将使用附加组件调试器。为了打开附加组件调试器:

  • 访问 “about:debugging”
  • 勾选复选框 “启用附加组件调试”
  • 点击你的附加组件旁边的 “调试” 按钮
  • 在警告窗口中点击“确认”。

你将会看到一个新打开的窗口。Firefox的主窗口会切换到前台,所以你需要点击新打开的窗口,并把它拖到前面。

这个新窗口有时被称为 “工具箱(toolbox)”, 它包含了我们将要使用的调试工具。它有一个选项卡式的界面:顶部有一排选项卡,允许你在不同的工具间切换:

在这篇文章中我们将使用三个调试工具:

  • 控制台:这里显示由附加组件记录的日志以及浏览器运行附加组件时记录的错误信息。它也提供一个命令行工具,允许你在在附加组件的环境中执行javaScript脚本。
  • 调试器:它允许你在你的附加组件的javaScript脚本中设置断点和观察点,检查和修改它内部的状态。
  • 查看器:它允许你检查和修改构成附加组件页面的HTML和CSS。

调试 background scripts

本章节的例子使用了示例附加组件 “notify-link-clicks-l10n”。如果你想跟着一起做,你可以在 webextensions-examples 中找到这个示例。

Background scripts 在附加组件的生命周期内都保持在加载状态.。它们被加载在一个不可见的 “background page”中:默认情况下是一个空HTML文档,不过你也可以指定为你自己的HTML内容,通过使用 “background" key in "manifest.json”

你可以使用附加组件调试器来调试 background scripts。

在附加组件调试器的控制台中你可以查看日志输出,包括你自己的background scripts中调用的 console.log() 以及任何浏览器运行它们时上报的错误。注意,目前控制台显示所有浏览器上报的错误,不只是和你的附加组件代码相关的错误。

例如, 示例附加组件 notify-link-clicks-i18n ,当 background script 收到来自 content scripts 的消息后,会记录下来:

使用控制台工具的命令行,你可以访问和修改由你的background scripts创建的对象。

例如,我们调用 notify() 函数,它定义在附加组件的background script中:

如果你切换到调试器工具,你将看到附加组件中所有的background scripts。你可以设置断点,单步执行,做一些你期望能够在调试器中做的事.

如果你在调试器工具内按下 Escape 键,toolbox将被拆分,底部的部分被控制台占用。当遇到一个断点时,你可以使用控制台修改程序的状态。更多信息查看 Split console

调试 options pages

Options pages 是附加组件开发者提供的一些HTML页面,它们包含了附加组件的配置。它们通常在附加组件管理器中的 iframe 中显示。(访问“about:addons”来查看附加组件管理器)。

为了调试 options pages:

任何它包含的JacaScript源码都会列在调试器中:

这个视频使用了名为 favourite-colour 的示例 WebExtension.

你也会在附加组件调试器的控制台里看到所有由你代码记录的消息。

你也可以使用附加组件调试器来调试HTML和CSS。首先,你需要将工具指向主机配置页面的iframe。这样做: 打开配置页面,点击下面截图中高亮的图标,并且在下拉列表中选择options page:

现在切换到查看器,你将被允许检查和编辑这个页面的HTML及CSS。

调试popups

Popups 是附加到浏览器或页面的弹出窗口。它指定一个HTML文件,可以包含CSS和JavaScript来定义样式和行为。 当popup可访问的时候, 你可以使用 附加组件调试器 来调试它的源码。

popups存在一个问题,当popup被打开后你点击了popup以外的地方,popup就会关闭并且它的代码就被卸载了。很显然,这使得它们难以被调试。为了停止这个行为,点击下图附件组件调试器中高亮的按钮:

现在,当你打开一个popup,它会一直保持打开状态,直到你按下了Escape键。

注意,这个改变同样被应用在了浏览器内建的popups,比如汉堡包按钮(),它也和附件组件的popups一样。

同样注意,这个改变是持久的,即便是浏览器重启后依然有效。 我们正在努力的修复这个BUG bug 1251658,但是你也可以在关闭浏览器工具箱前再点击那个按钮来允许自动隐藏功能。

在内部,这个按钮只是切换了 ui.popup.disable_autohide 的偏好设置,你可以在 about:config中手动修改它。

当popup被打开后,它的 JavaScript 代码会在调试器中列出。你可以设置断点并且修改程序的状态:

这个视频使用了 beastify 的示例 WebExtension。

你也可以使用附加组件调试器来调试popup's的HTML和CSS。首先,你需要将调试工具指向popup页面。为此:打开popup,然后点击下图中高亮的按钮并且在下拉列表中选择对应的popup的页面:

现在切换到查看器,你将被允许测试和编辑popup的HTML和CSS:

调试content scripts

你可以使用附加组件调试器去调试background pages,options pages 和 popups。然而,你不能使用它去调试content scripts。这是因为,在多进程Firefox浏览器中,content scripts 运行在不同的进程中。

为了调试附加在一个网页的 content scripts,使用这个网页的web开发者工具:

  • 选择Firefox菜单中打开web开发者子菜单,然后选择 "Toggle Tools"(或者工具按钮,如果你有显示菜单栏或者是在Mac OS X中)
  • 或者按下快捷键 CtrlShiftI (CommandOptionI 如果是OS X) 。

默认的,工具将显示在在浏览器tab页面的底部,用于表示它是附加在该tab页面的。你也可以看到content scripts中通过console.log()打印的内容。你也可以在调试器中看到content scripts的列表,你可以设置断点,单步调试等等。

这个视频使用了 notify-link-clicks-i18n 的示例 WebExtension.

如果开发者工具还没有完全打开content scripts就被注入了,有时候content scripts不会被列在调试器中。如果遇到这个问题,在开发者工具打开的状态下重新加载这个页面应该就可以解决。

文档标签和贡献者

标签: 
 此页面的贡献者: WEKEYSHIT
 最后编辑者: WEKEYSHIT,