继 Firefox 44 中推出 Web 推送 之后，我们现在可以通过使用 Firefox 开发者版 47 提供的功能来开发和调试 Service Workers 和推送通知代码。

这是一个演示本文中所述功能的屏幕录制

或者，如果您更喜欢文本，请继续阅读！

about:debugging

Service Workers 的行为与普通 Web Workers 不完全相同，并且它们的生存周期也不同，因此我们无法在 DevTools 的“调试器”选项卡中与普通脚本一起显示它们。

相反，我们添加了一个新的仪表盘，它将收集所有已注册的 Service Workers 和共享 Workers，以及其他可调试的项目，例如附加组件。

因此，我们的调试冒险从访问以下地址开始about:debugging在一个新选项卡中，然后单击左侧的“Workers”选项卡。

或者，您可以通过转到“工具 ⇨ Web 开发者 ⇨ Service Workers”菜单，或单击工具栏菜单，然后选择“开发者”，最后选择“Service Workers”来访问此仪表盘。

仪表盘即时更新

我们第一次访问仪表盘时，“Service Workers”和“Shared Workers”部分下将显示“还没有”。当 Worker 注册时，这些部分将自动更新。显示的按钮将相应更改，如果 Worker 正在运行，则显示“推送”和“调试”，如果 Worker 已注册但处于非活动状态，则仅显示“启动”按钮。

试试看！在一个窗口中打开about:debugging，并在另一个窗口中导航到 此简单的 Service Worker 演示。Service Worker 将被注册并在“Service Workers”部分下显示。无需重新加载仪表盘！

调试 Service Workers

要调试 Service Worker，该 Worker 必须已经在运行。单击关联的“调试”按钮，或者如果 Worker 尚未运行，则“启动”它（只要它已注册，并且因此位于about:debugging仪表盘中）。

这将弹出一个新窗口，其中包含 Service Worker 的代码。在这里，您可以**执行所有您期望的常规调试操作**：设置断点、逐行执行、检查变量等。

推送通知

现在也可以通过在 Service Worker 的push事件的监听器中设置断点来调试使用 Web 推送 API 的代码。收到推送通知时，调试器将在断点处停止。

这非常方便，但有时通知可能会由于超出我们控制范围的原因而延迟，或者网络可能暂时无法访问。幸运的是，您仍然可以通过按下 Worker 上的“推送”按钮来测试依赖于推送事件的代码。

这将发送一个推送负载，进而几乎立即触发推送事件。您可以**缩短开发时间**，因为您无需等待服务器发送推送。

调试共享 Worker

还支持调试共享 Worker。最主要的区别在于它们将在about:debugging.

调试请求（和缓存请求）

您现在还可以区分 Worker 缓存的请求和普通网络请求。这些缓存请求在“已传输”列中显示为“Service Worker”，而不是显示传输的数据量。

可以通过在fetch事件监听器上设置断点来拦截和调试由 Service Workers 发起的请求。

当调试器在断点处停止时，我们可以通过查看变量列表中的事件对象来检查诸如请求的url、HTTP 标头等数据。

总结

希望这能提供对我们正在开发的新功能的良好概述。

MDN 上提供了 about:debugging 的参考文档。如果您想了解有关 Service Workers 的更多信息，您应该查看 使用 Service Workers 的指南，当然还有 Service Workers 菜谱，其中包含许多很棒的演示和示例。