必须使用 Chrome 开发者工具 Application 面板实时追踪 Service Worker 生命周期：查看注册状态、install/waiting/active 阶段；勾选 Update on reload 并 Skip waiting 强制触发全流程；启用 Offline 模式验证缓存拦截；通过 Cache Storage 检查 precache 内容；用 chrome://serviceworker-internals/ 查看全局实例与独立调试。
你需要在开发或测试网页时实时观察 Service Worker 的注册状态、安装进度、激活时机及离线请求拦截行为，必须借助 Chrome 浏览器内置的调试能力直接追踪其完整生命周期。
进入 Application 面板查看注册与当前状态
Application 面板是专为 PWA 和后台脚本设计的调试入口，其中 Service Workers 节点可实时反映当前页面注册的 worker 实例、脚本路径、控制范围及所处阶段（installing / waiting / active）。
在目标网页中右键空白处，选择“检查”，或按 Ctrl+Shift+I（Windows/Linux）/Cmd+Option+I（macOS）打开开发者工具。
点击顶部导航栏中的 Application 选项卡。
在左侧边栏中展开 Service Workers 节点，右侧将列出已注册实例。若无任何条目，说明该页面未注册 Service Worker；若显示 installing 状态，表示脚本正在下载并执行 install 事件；【waiting 状态说明新版本已安装但尚未接管页面，需手动跳过等待或关闭所有同源标签页才能激活】。
强制触发 install → activate 全流程
启用 Update on reload 后，浏览器每次重载都会忽略缓存版本，主动拉取并尝试安装新 Service Worker 脚本，从而复现从注册到激活的完整链路。
方法一：通过面板勾选触发
1. 在 Application > Service Workers 面板中，勾选 Update on reload 复选框。
2. 若当前页面已被旧版 Service Worker 控制，先点击右侧对应实例的 Skip waiting 按钮。
3. 按下 Ctrl+R（Windows/Linux）或 Cmd+R（macOS）刷新页面，观察状态栏中 worker 状态依次变为 installing → waiting → activating → active。
方法二：通过 chrome://serviceworker-internals/ 辅助验证
1. 新开标签页，访问 chrome://serviceworker-internals/
2. 找到对应 origin 的条目，点击右侧的 Unregister 按钮清除旧实例。
3. 回到原页面刷新，此时会强制走全新注册流程，避免 waiting 卡死干扰判断。
切换 Offline 模式验证缓存与 fetch 拦截效果
离线状态下，已激活的 Service Worker 将接管所有 fetch 请求；若页面仍能加载关键资源，说明 install 阶段已成功缓存指定 URL 列表，且 fetch 事件监听器正确响应。
在 Application 面板中，勾选 Offline 复选框。
刷新页面，立即切换到 Console 面板，确认无 net::ERR_INTERNET_DISCONNECTED 报错；同时观察 Network 面板中 HTML、CSS、JS 等主资源的 Status 列是否显示为 (from cache) —— 【若出现 (from disk cache) 或 (from memory cache)，说明未被 Service Worker 控制，而是走了浏览器默认缓存，需检查 fetch 事件监听逻辑】。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
取消勾选 Offline，回到在线状态，在 Network 面板顶部筛选器中输入 service-worker.js，检查其响应头是否包含 Content-Type: application/javascript 且状态码为 200 —— 这能确认脚本本身未被错误缓存或拦截。
执行 Cache API 检查实际缓存内容
仅看页面是否加载成功还不够，必须确认缓存存储的内容是否符合预期，比如缓存了哪些 URL、是否包含过期版本、是否存在重复键。
在 Application > Cache Storage 面板中，左侧会列出所有已创建的 Cache 对象（如 `my-cache-v1`），点击任一缓存名称，右侧将展示其内所有已存键值对。
逐个展开每个缓存项，核对 Request URL 是否为你在 install 事件中 precache 的资源路径，Response Headers 中的 Date 和 Cache-Control 字段可辅助判断新鲜度。
在 Console 面板中，可直接执行以下命令遍历当前作用域下的所有缓存：await caches.keys().then(keys => console.table(keys))
再用 await caches.open('my-cache-v1').then(cache => cache.keys()).then(keys => console.table(keys)) 查看具体缓存内容。
使用 chrome://serviceworker-internals/ 查看全局实例
这是 Chrome 提供的底层管理页，不依赖当前页面上下文，可查看所有 origin 下注册的 Service Worker 实例及其运行时状态，适合排查跨标签页控制异常或冗余实例残留问题。
新开标签页，地址栏输入 chrome://serviceworker-internals/ 并回车。
找到目标网站对应的 origin 行，注意观察 “Status” 列：running 表示正在执行事件（如 fetch）、stopped 表示空闲、terminated 表示已被系统回收。
点击右侧 “Inspect” 按钮，可单独打开该 Service Worker 的独立 DevTools 窗口，此时 Console 中的日志完全来自 worker 上下文，不受页面 JS 干扰——【此处可精准捕获 self.skipWaiting() 或 event.waitUntil() 抛出的未处理 Promise 拒绝错误】。
