Service Worker 调试有哪些常用方法和工具？

Chrome DevTools 是主战场：Application > Service Workers 面板可查看注册状态、更新、卸载；Sources 面板可打断点；Network 面板勾选 Bypass for network 绕过 SW。Console 里 self.addEventListener(fetch, e => console.log(e.request.url)) 打日志最直接。开发时勾选 Update on reload 避免手动等待激活。

追问

SW 更新后页面还是旧逻辑？

SW 更新走 install→wait→activate。wait 阶段等旧 SW 退出才激活。开发时勾选 Update on reload；生产用 skipWaiting()+clients.claim() 立即接管，但可能导致不兼容。推荐：显示提示让用户主动刷新。

如何模拟离线场景？

DevTools Network 选 Offline，或 Application > Service Workers 勾选 Offline。也可用 navigator.onLine 检测。注意：离线需要 SW 有缓存策略否则白屏。

SW 里 console.log 看不到？

SW 运行在独立线程，日志在 Sources > Service Worker 专用控制台。或在 Application > Service Workers 点 inspect 打开专用 DevTools。

缓存没命中怎么排查？

打印 caches.match(request) 结果：命中返回 Response，未命中 undefined。常见原因：URL 查询参数不一致、request method 不匹配（默认只匹配 GET）、vary 头导致缓存分裂。

生产环境如何监控 SW 异常？

self.addEventListener(error/unhandledrejection, ...) 捕获异常上报。关注注册失败率和缓存命中率。Workbox 的 workbox-google-analytics 可追踪离线 PV。