[!info] related notes

• 所属 MOC: DevTools Application MOC
• 前置概念: 浏览器客户端存储, Service Worker 与 Cache API
• 缓存排障: 缓存调试
• Service Worker: Service Worker 调试

DevTools IndexedDB 与 Cache Storage 调试

先分清两个对象

IndexedDB
→ 结构化应用数据

Cache Storage
→ Request / Response 对象缓存

两者都在 Application 面板，但问题模型不同。

IndexedDB 常见症状

• 离线列表一直是旧数据；
• 本地草稿/同步队列异常；
• schema 升级后读取失败；
• 同一实体出现重复或脏版本。

证据

检查：

• database / object store；
• primary key；
• 实体内容；
• schema/version；
• 操作前后数据变化。

删除一条记录能作为实验，但不要把“清空数据库”当长期修复。

Cache Storage 常见症状

• 静态资源持续命中旧 response；
• API 被错误 cache-first；
• Service Worker 更新后页面仍用旧缓存；
• cache name/version 没变化。

证据

检查：

• cache name；
• request URL；
• response headers/body；
• 是否与 Network 中 from ServiceWorker 对应；
• 旧 cache 是否在 activate 阶段被清理。

对照实验

如果怀疑 IndexedDB：

修改/删除单条本地数据 → 刷新 → 观察应用是否重新生成或同步。

如果怀疑 Cache Storage：

临时绕过 Service Worker / 删除特定 cache entry → 重新请求 → 对比 response source。

两种实验验证的是不同假设。

常见根因

IndexedDB

• schema migration 不完整；
• entity key 设计错误；
• offline merge 冲突；
• stale local projection 没被服务器版本覆盖。

Cache Storage

• cache key 不完整；
• cache version 永不变化；
• API 被误用 cache-first；
• activate cleanup 没执行。

迁移检查

给两个问题：

A. 离线任务列表始终缺少新字段。
B. 发布新 JS 后某些用户仍执行旧 bundle。

分别回答：

1. 哪个优先查 IndexedDB，哪个优先查 Cache Storage；
2. 在 Application 中看什么证据；
3. 如何做最小对照实验；
4. 为什么“Clear site data 后正常”不能算最终根因。