首先启动带远程调试端口的Chrome实例，再在VS Code中配置launch.json并设置断点，通过F5启动调试，结合Chrome DevTools的Application面板查看Service Worker状态、缓存及离线行为，确保源码映射准确以实现高效调试。
调试 Service Worker 和渐进式 Web 应用（PWA）在开发过程中非常关键，因为它们涉及离线行为、资源缓存和后台消息处理等复杂逻辑。VS Code 配合 Chrome DevTools 和合适的配置，可以高效完成这项任务。
启用 Chrome 调试支持
要在 VS Code 中调试 Service Worker，需通过调试协议连接到运行中的 Chrome 实例。这需要启动一个可调试的 Chrome 浏览器进程。
- 关闭所有正在运行的 Chrome 实例，或使用独立用户配置启动调试模式
- 使用命令行启动 Chrome，并开启远程调试端口：
chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
- 打开你的 PWA 页面，确保 Service Worker 已注册
配置 VS Code 的 launch.json
在项目根目录下的 .vscode/launch.json 中添加 Chrome 调试配置。
- 安装 Debugger for Chrome 扩展（由 Microsoft 提供）
- 创建或修改 launch.json，加入以下配置：
{ "type": "chrome", "request": "launch", "name": "Launch PWA with Debug", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "sourceMaps": true, "smartStep": true, "skipFiles": [ "", "**/node_modules/**" ] } - 保存后，按 F5 启动调试会话，VS Code 将自动打开页面并附加调试器
调试 Service Worker 本身
Service Worker 运行在独立上下文中，不会直接出现在主页面的调试面板中，但可通过以下方式查看和断点调试。
- 在 Chrome 地址栏访问 chrome://serviceworker-internals 查看注册状态
- 打开 DevTools → Application → Service Workers 查看生命周期和缓存存储
- 在 VS Code 中打开 Service Worker 文件（如 sw.js 或 service-worker.js）
- 在代码中设置断点，刷新页面或触发 fetch 事件时，断点将被命中（需确保 source map 正确映射）
- 使用 self.addEventListener('fetch', ...) 等事件监听代码中插入 debugger 语句辅助定位
验证 PWA 功能与离线行为
除了代码级调试，还需验证 PWA 的实际表现是否符合预期。
- 使用 Lighthouse 在 DevTools 中审计 PWA 指标（安装性、离线支持等）
- 在 Application → Storage 中清除数据后重新注册 Service Worker
- 在 Network 标签中启用 “Offline” 模拟完全离线环境，观察页面加载行为
- 检查 Cache Storage 中是否正确缓存了静态资源和路由
