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

必须用控制台验证缓存状态、触发更新并手动删除缓存：先查当前Service Worker脚本路径，再列出所有Cache Storage名称，检查目标资源是否缓存及内容新旧，删除问题缓存后调用update()和SKIP_WAITING强制激活新版本。

当你在火狐浏览器中发现页面加载旧版JS、CSS或HTML，控制台却无报错，Network面板显示资源来自service worker而非网络，说明Service Worker缓存逻辑已接管请求但未按预期更新——此时必须绕过图形界面，直接用控制台验证缓存状态、触发更新、甚至手动删除缓存条目。

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

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

navigator.serviceWorker.controller?.scriptURL

若返回 null，说明当前页面未被任何Service Worker控制；若返回类似 "https://example.com/sw.js?ts=1718923456" 的路径，记下该URL——这是后续验证缓存是否匹配的关键依据。注意：如果路径中不含时间戳或版本号，很可能服务器部署时未更新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 逻辑。在控制台中依次执行：

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

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

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

刷新页面后，再次运行 navigator.serviceWorker.controller?.scriptURL，确认路径已变更——这才是缓存逻辑真正更新的标志。