DevTools IndexedDB 与 Cache Storage 调试
用 Application 面板检查 IndexedDB 与 Cache Storage 中的持久化数据和缓存响应，适合排查离线、旧数据和缓存污染问题。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Application MOC
- 前置概念: 浏览器客户端存储, Service Worker 与 Cache API
- 并列概念: 缓存调试, Service Worker 调试
- 关系笔记: Application 面板, 缓存不更新排查路线
DevTools IndexedDB 与 Cache Storage 调试
一句话定义
这类调试是用 Application 面板区分“本地数据库里的旧数据”和“缓存响应里的旧资源”。
核心内容
IndexedDB 适合排什么
- 本地离线数据没更新
- 列表、表单、同步队列等结构化数据异常
Cache Storage 适合排什么
- 旧静态资源仍被命中
- Service Worker 缓存策略导致页面不刷新
边界与易混淆点
- IndexedDB 是结构化数据存储
- Cache Storage 是请求/响应缓存
- 两者都在本地，但问题来源和排法不同