调试 Service Worker 并非易事。您需要处理所有这些事项之间的生命周期、更新、缓存和交互。幸运的是,正如 Workbox 使 Service Worker 的开发更简单,它也会通过其信息性日志记录让调试变得更容易。本页将介绍一些可用的调试工具,以及 Workbox 的日志记录功能的工作原理和配置方式。
可用的问题排查工具
在开发 Service Worker 时,浏览器中有大量工具可用于进行调试和问题排查。以下资源可帮助您开始使用您所选的浏览器。
Chrome 和 Edge
Chrome(以及基于 Blink 引擎的最新版 Edge)拥有一套强大的开发者工具。本文档前面提到了其中一些工具(尤其是 Chrome 开发者工具中的工具),但还有更多其他内容值得您去探索:
Firefox
Firefox 用户可以参考以下资源:
Safari
Safari 目前拥有一组较为有限的开发者工具,用于调试 Service Worker。您可以通过以下资源了解详情:
Workbox 日志记录
Workbox 对开发者体验的重大改进是信息日志记录。启用日志记录功能后,Workbox 会以独特的功能方式记录几乎所有活动。
Workbox 的开发 build 默认开启日志记录功能,而正式版 build 会关闭日志记录功能。在开发 build 和正式版 build 之间切换时,需要执行的步骤有所不同,具体取决于您是创建自定义 Workbox 软件包,还是通过 workbox-sw
使用预捆绑副本。
有或没有捆绑器
Bundler 是一种工具,用于从各个模块获取代码并创建可在浏览器中运行的 JavaScript 输出。使用捆绑器时,您还可以使用捆绑器专用的 Workbox 插件(例如 workbox-webpack-plugin
)来帮助进行预缓存,或者您可能只是捆绑了 Workbox 运行时缓存逻辑。无论使用哪种方式,在捆绑器的配置中设置生产模式都会影响 Workbox 的日志记录:
- 在 webpack 中,
mode
配置选项可以设置为'production'
或'development'
。workbox-webpack-plugin
将根据此值使用 Workbox 中的正式版或开发版日志记录。 - 对于 Rollup,
rollup-plugin-workbox
接受mode
配置选项,该选项也会影响 Workbox 是否将任何内容记录到控制台。如果您在没有 Workbox 专用插件的情况下使用 Rollup,则需要配置@rollup/plugin-replace
以将process.env.NODE_ENV
替换为'development'
或'production'
。
假设在开发过程中必须覆盖默认日志记录行为。在这种情况下,您可以借助捆绑器的相应 Workbox 插件,在其配置中硬编码用于调试日志的偏好设置。例如,您可以通过 GenerateSW
方法的 workbox-webpack-plugin
的 mode
选项来停用 Workbox 中的日志记录功能。
不使用捆绑器
虽然捆绑器很棒,但并非每个项目都需要它们。如果您发现自己想要将 Workbox 添加到不使用捆绑器的项目中,那么适合使用 workbox-sw
。
workbox-sw
模块简化了其他 Workbox 模块的加载(例如,workbox-routing
、workbox-precaching
等)。它加载开发软件包还是正式版软件包取决于用于访问 Web 应用的网址。默认情况下,如果您的 Web 应用在 http://localhost
上运行,workbox-sw
会加载开发版 Workbox,在其他时间加载正式版。
您可以通过调用 Workbox 的 setConfig
方法将 debug
选项设置为 true
来替换默认行为:
// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');
// This must come before any other workbox.* methods.
workbox.setConfig({
debug: true
});
// Now use workbox.routing.*, workbox.precaching.*, etc.
在任何工作流中关闭开发 build 的日志记录
无论您是否使用捆绑器,都可以通过将 true
分配给 Service Worker 中的一个特殊 self.__WB_DISABLE_DEV_LOGS
变量来关闭所有开发 build 中的日志记录功能:
//
self.__WB_DISABLE_DEV_LOGS = true;
// The rest of your Workbox service worker code goes here
这种方法的一个优点是,它完全独立于捆绑器配置,无论您是直接使用 workbox-sw
,还是依赖捆绑器为您打包由 Workbox 提供支持的 Service Worker,它都适用。
更多信息
如果您仍无法理清存在缺陷的 Service Worker 中发生的情况,并且日志记录是不够的,请尝试使用 workbox
标记在 Stack Overflow 上发帖提问。如果您在那里找不到答案,请提交 GitHub 问题(请先阅读贡献准则)。这不仅可让广大开发者阅读并回答您的问题,而且您的问题的答案对于日后遇到相同情况的用户也可以有所帮助。