火狐浏览器中如何通过控制台调试Service Worker缓存问题？

当你在火狐浏览器中发现页面加载旧版JS、CSS或HTML，控制台却无报错，Network面板显示资源来自service worker而非网络——这基本可以断定，Service Worker的缓存逻辑已经接管了请求，但并没有按预期更新。问题不大，但处理起来确实有点绕：必须绕过图形界面，直接通过控制台验证缓存状态、触发更新，甚至手动删除缓存条目。

具体步骤其实很清晰，跟着走就行。

确认当前激活的Service Worker脚本路径

打开目标页面，按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）调出开发者工具，切换到“控制台”（Console）标签页，输入以下命令并回车：

na vigator.serviceWorker.controller?.scriptURL

如果返回 null，说明当前页面根本没有被任何Service Worker控制；如果返回像 "https://example.com/sw.js?ts=1718923456" 这样的路径，记下来——这是后续验证缓存是否匹配的关键。注意：如果路径里没有时间戳或版本号，很可能服务端部署时压根没更新sw.js文件本身，那样再怎么刷新也没用。

列出所有已打开的Cache Storage名称

Service Worker的缓存内容存放在跟HTTP磁盘缓存完全独立的Cache Storage里，不手动枚举根本找不到问题在哪。在控制台中执行：

caches.keys().then(keys => console.table(keys))

输出结果是一个表格，列出所有缓存名，例如 "precache-v1"、"runtime-cache-202606" 或 "sw-offline-fallback"。重点关注那些包含 precache、v[数字]、offline、fallback 之类的名称——它们极有可能是导致资源滞留的元凶。

检查指定缓存中是否包含目标资源

假设你怀疑 main.css 没更新，并且从上一步得知缓存名为 precache-v1，那就执行：

caches.open('precache-v1').then(cache => cache.match('/main.css')).then(r => console.log(r ? '✅ 已缓存' : '❌ 未命中'))

如果返回 ✅ 已缓存，还需要进一步确认响应体内容是不是最新版：

caches.open('precache-v1').then(cache => cache.match('/main.css')).then(r => r?.text().then(text => console.log(text.substring(0, 200))))

这样会打印出缓存中CSS文件的前200个字符。拿它跟线上最新版源码对比一下——如果明显是旧的（比如注释里写着"v1.2"，而线上已经到"v1.3"），那就坐实了缓存没更新。

强制删除某缓存并验证结果

确认问题缓存后，可以直接清空它，不需要重启浏览器或注销Worker：

caches.delete('precache-v1')

这个操作是立即生效的，返回 true 表示删除成功。然后刷新页面，再次执行 cache.match('/main.css')，应该返回 undefined。要是仍然命中，说明还有其他缓存名也在存放同一个资源，需要逐一排查。

【注意】caches.delete() 不会自动触发 Service Worker 重新 fetch 资源——它只删缓存，不重注册。页面下次请求 /main.css 时，如果 fetch 事件监听器没有改写逻辑，仍然可能返回空响应或 fallback 内容。

触发 Service Worker 主动更新并跳过等待

光删缓存还不够，新的sw.js必须激活才能执行新版fetch逻辑。在控制台中依次执行：

第一步：获取当前注册对象
na vigator.serviceWorker.getRegistration().then(reg => reg.update())

第二步：强制跳过 waiting 状态
na vigator.serviceWorker.getRegistration().then(reg => reg.waiting?.postMessage({type: 'SKIP_WAITING'}))

第三步：监听激活完成事件（可选验证）
na vigator.serviceWorker.addEventListener('controllerchange', () => console.log('✅ 新Worker已接管'))

刷新页面后，再运行一次 na vigator.serviceWorker.controller?.scriptURL，检查路径是否已变更——这才是缓存逻辑真正更新的标志。