DevTools 缓存调试
用 Network 和 Application 面板调试缓存命中、304、memory cache、disk cache、Disable cache 和 Cache Storage 行为。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Network MOC, DevTools Application MOC
- 前置概念: 浏览器缓存体系, 强缓存, 协商缓存, [[http-cache-storage|浏览器内部缓存存储]]
- 并列概念: Service Worker 请求调试
- 关系笔记: Network 面板, 缓存不更新排查路线
DevTools 缓存调试
一句话定义
缓存调试是在 DevTools 里区分这次响应到底来自网络、HTTP 缓存还是 Service Worker / Cache Storage。
核心内容
重点看什么
- 状态列是否出现
304、from memory cache、from disk cache - Response Headers 里的缓存语义
Disable cache开关是否影响结果- Application 面板里的 Cache Storage 与 Service Worker 状态
常见场景
- 改了代码但页面没更新
- 请求明明没打到服务器却返回旧内容
- 刷新和强刷新的结果不一样
- 响应看起来被缓存了但返回了错误内容 → 检查
Vary头部是否匹配 → Vary 与缓存键
Network 面板状态速查
200 from memory cache→ 内存缓存命中200 from disk cache→ 磁盘缓存命中from prefetch cache→ prefetch 缓存命中304 Not Modified→ 协商缓存命中200→ 网络请求
边界与易混淆点
- HTTP 缓存和 Cache Storage 不是一回事
Disable cache主要影响 Network 请求行为，不等于彻底清空所有站点数据- 如果 Service Worker 接管请求，要继续看 Service Worker 请求调试
- Vary 不匹配时缓存不会命中，即使 URL 相同