在现代 Web 开发中，Service Worker 已成为实现离线缓存、推送通知和后台同步等核心功能的关键技术。然而，由于 Service Worker 运行在独立于页面的线程中，其错误信息往往不如常规 JavaScript 那样直观可见。许多开发者常因无法快速定位 Service Worker 的错误而苦恼。本文将以 Chromium 内核浏览器（如 Chrome 和 Edge）为例，详细讲解如何利用调试器查看并分析 Service Worker 错误。

一、打开 Service Worker 专属调试面板

Chromium 浏览器为 Service Worker 提供了独立的调试入口，而非混在普通控制台里。操作步骤如下：

  1. 在目标页面中按 F12（或右键点击“检查”）打开开发者工具。
  2. 切换到 “Application”（应用） 面板。
  3. 在左侧菜单中找到 “Service Workers” 子项（位于“Storage”类别下）。

此时，你将看到当前页面注册的所有 Service Worker 的状态信息，包括其安装、激活、运行状态以及作用域。该面板顶部还有几个关键开关：“Offline”（离线） 和 “Update on reload”（重新加载时更新），前者用于模拟无网络环境，后者可在每次刷新时强制更新 Service Worker。

二、实时查看错误日志

Service Worker 的任何 console 输出（包括 console.error、console.warn）并不会自动出现在“Console”面板中，除非你明确选择查看其上下文。正确做法是：

  • 在 Service Workers 面板中，点击当前正在运行的 Service Worker 的 “Inspect” 按钮。
  • 此时会弹出一个独立的开发者工具窗口，其标题显示为 Service Worker (sw.js)，该窗口的 Console 面板专属于这个 Service Worker 线程。

所有在该线程内抛出的错误、未捕获的异常、以及通过 console.log 打印的信息都会出现在这里。如果你在 Service Worker 的 install、activate 或 fetch 事件中写了 console.error(e)，就能在这个独立控制台中看到详细的堆栈信息。

三、利用“Network”面板追踪网络错误

许多 Service Worker 错误源于对 fetch 请求的拦截处理不当。例如，未正确返回 Response 对象，或缓存中找不到资源时没有降级策略。要定位这类问题，需要在 “Network”（网络） 面板中结合 Service Worker 的日志进行排查：

  1. 在普通页面的开发者工具中打开 Network 面板。
  2. 刷新页面，观察每个网络请求的“Initiator”（发起者）列。如果请求被 Service Worker 拦截，该列会显示 ServiceWorker 字样。
  3. 点击具体请求，切换到“Header”或“Timing”标签，可以看到 Service Worker 的处理时长及是否返回了错误响应（如 504 或 404）。

另外，在 Application 面板的 Service Workers 部分，勾选 “Show all” 可以查看所有域的 Service Worker，这对调试跨域场景特别有用。

四、监听 Service Worker 的生命周期事件

除了被动查看控制台，你还可以主动监听错误事件。在 Service Worker 代码中添加以下监听器，可将所有未捕获的错误打印到专用控制台：

self.addEventListener('error', function(e) {
  console.error('Service Worker 未捕获错误:', e.message, e.filename, e.lineno);
});

self.addEventListener('unhandledrejection', function(e) {
  console.error('未处理的 Promise 拒绝:', e.reason);
});

这些输出将出现在上文提到的独立控制台窗口中，帮助你锁定问题发生的具体行号。

五、使用“Update”按钮强制刷新

Service Worker 的缓存机制可能导致旧代码持续运行，即使你已经修改了脚本。调试时，建议在 Application 面板中点击 “Update” 按钮手动触发更新。如果更新失败，错误信息会直接显示在 Service Worker 状态栏下方（红色文字提示），常见原因包括文件语法错误或作用域不匹配。

六、实用技巧：结合“Breakpoints”逐步调试

如果你需要深入分析 Service Worker 中某个事件的执行流程，可以在独立调试窗口中切换到 “Sources”（源代码） 面板，找到你的 sw.js 文件，然后像调试普通 JavaScript 一样设置断点。当页面触发 fetch 或 install 事件时，执行流程会在断点处暂停，此时你可以查看作用域变量、调用栈、以及 event 对象的详细属性。

总结

在 Chromium 调试器中定位 Service Worker 错误并非难事，只需牢记三个关键入口：Application 面板的状态显示、Service Worker 专属控制台以及 Network 面板的拦截细节。对于复杂场景，结合事件监听和断点调试可以事半功倍。掌握这些方法后，你将能高效解决诸如“缓存未更新”、“请求无响应”等常见 Service Worker 问题，从而构建更健壮的渐进式 Web 应用。