DevTools Service Worker 请求调试
用 DevTools 判断请求是否被 Service Worker 接管、缓存命中还是回源，是离线与更新问题排查的关键动作。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Network MOC, DevTools Application MOC
- 前置概念: Service Worker 与 Cache API
- 并列概念: 缓存调试, Service Worker 调试
- 关系笔记: Network 面板, 缓存不更新排查路线
DevTools Service Worker 请求调试
一句话定义
Service Worker 请求调试是用 DevTools 识别“这次请求是不是被浏览器里的可编程拦截层接管了”。
核心内容
典型检查点
- Application 面板里是否存在激活中的 Service Worker
- Network 面板里请求是否表现出缓存拦截特征
- 清缓存或跳过等待后行为是否改变
常见场景
- 页面总是旧版本
- 离线时行为和预期不一致
- 某些请求明明改了服务端却仍返回旧数据
边界与易混淆点
- 不是所有缓存问题都来自 Service Worker
- 调试时要区分“SW 逻辑问题”和“HTTP 缓存语义问题”
- 真正的 SW 生命周期问题还要看 Service Worker 调试