ServiceWorker调试需确保其已激活并控制页面，在fetch监听器中设debugger或行断点，且请求匹配作用域；开发时启用Update on reload、Skip waiting，并用skipWaiting与clients.claim强制更新。
在 ServiceWorker 中打断点调试请求拦截，核心是让浏览器 DevTools 能停在你写的 fetch 事件监听器内部。由于 ServiceWorker 运行在独立线程且生命周期特殊，直接加 debugger 或点击行号设断点有时不生效，需配合正确时机和配置。
确保 ServiceWorker 已激活并控制页面
只有被当前页面“受控”（controlled）的 ServiceWorker 才会处理该页面的请求。检查方式：
- 打开 DevTools → Application → Service Workers，确认状态为 “Activated and is running”
- 勾选 “Update on reload” 和 “Skip waiting”（开发时避免旧 SW 缓存干扰）
- 刷新页面后，在 “Clients” 下看到你的页面 URL，说明已受控
在 fetch 事件监听器中加 debugger 或行断点
在 ServiceWorker 脚本（如 sw.js）中，把 debugger 放在 event.respondWith(...) 内部逻辑开头处，例如：
self.addEventListener('fetch', event => {
debugger; // ✅ 这里会触发断点（前提是 SW 已激活且请求匹配）
console.log('Intercepted:', event.request.url);
event.respondWith(fetch(event.request));
});
或直接在 DevTools 的 Sources 面板中，找到加载的 sw.js 文件，点击行号左侧设断点（需确保文件已正确 sourcemap 或未压缩）。
Customer Service Reply
下载
客服回复模板。售前咨询、售后处理、退换货、投诉回复、好评引导、升级处理、行业FAQ、满意度挽回。Customer service reply templates for pre-sale, after-sale, returns, complaints, escalation, FAQ generation, s...
立即学习“Java免费学习笔记（深入）”；
触发断点的请求必须匹配当前 SW 作用域
ServiceWorker 只能拦截同源、且路径在 scope 内的请求（默认为注册路径所在目录）。常见问题：
- 注册时用了
navigator.serviceWorker.register('sw.js', { scope: '/app/' })，但请求地址是/api/data→ 不会触发 - 页面在
https://example.com/sub/，但 SW 注册在根路径/sw.js→ 默认 scope 是/sub/，可能漏掉资源 - 静态资源（如
.js、.css）若被强缓存或预加载，可能绕过 fetch 事件 → 尝试用无痕窗口或禁用缓存（Network → Disable cache）重新加载
使用 skipWaiting + clients.claim 确保新 SW 立即生效
开发中常因旧 SW 占据控制权导致断点不触发。可在 SW 安装阶段主动跳过等待并声明控制权：
self.addEventListener('install', event => {
event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
这样每次更新 SW 后，刷新即可立即启用新版，避免调试旧逻辑。
