IndexedDB调试应使用浏览器开发者工具Application（Chrome/Edge）或Storage（Firefox）面板查看、编辑数据库及objectStore数据，需确保indexedDB.open()已执行且事务为readwrite模式。
在HTML5开发中，IndexedDB是浏览器端常用的大型结构化数据存储方案。调试其数据最直接有效的方式，就是借助浏览器自带的开发者工具——无需额外插件或代码注入，就能实时查看、增删改查数据库内容。
Chrome / Edge 中查看 IndexedDB 数据
打开开发者工具（F12 或 Ctrl+Shift+I），切换到 Application 面板 → 左侧选择 IndexedDB（在 Storage 分类下）。如果页面已初始化 IndexedDB 数据库，这里会列出所有已创建的数据库名称和版本。点击某个数据库，右侧会显示其包含的所有 objectStore（对象仓库），以及每个 objectStore 中的全部记录（键值对形式）。
注意：只有当前页面通过 window.indexedDB.open() 打开并成功连接过的数据库才会出现在此处；未打开或被拒绝权限的数据库不会显示。
手动添加/修改/删除记录（仅限调试）
在 Application → IndexedDB 页面中，选中某条记录后可直接双击编辑 value 字段（支持 JSON 格式），回车保存；右键单击任意记录可选择 Delete entry 删除；点击 objectStore 右上角的 Add entry 按钮，可手动添加新记录。
立即学习“前端免费学习笔记（深入）”；
- key 可填数字、字符串或 Date 等合法键类型，若使用自动递增（autoIncrement），留空即可
- value 必须是可序列化的 JavaScript 对象（不能含函数、undefined、循环引用等）
- 修改后刷新页面，变化会立即反映在后续 JS 调用中（如
get()、getAll()）
Firefox 中的对应操作
Firefox 开发者工具同样支持 IndexedDB 调试，但入口略有不同：打开开发者工具 → 切换到 Storage 面板 → 展开左侧的 IndexedDB。界面布局与 Chrome 类似，可展开数据库、objectStore，并浏览、编辑、新增或删除条目。
需注意：Firefox 在早期版本中对某些 IndexedDB API（如 IDBIndex 查询）的支持更严格，若数据未显示，建议检查是否触发了事务完成或是否使用了不兼容的 keyPath 配置。
常见问题与验证技巧
如果开发者工具中看不到预期的数据库或数据，先确认以下几点：
- 页面脚本确实执行了
indexedDB.open()，且未被异常中断（如 Promise reject 或 onerror 触发） - 数据库打开时指定了正确的版本号；升级 schema 需显式处理
onupgradeneeded - 数据写入发生在只读事务之外（即必须使用
readwrite或versionchange模式） - 检查控制台是否有 “Uncaught DOMException: Failed to execute 'put' on 'IDBObjectStore'” 类报错
为快速验证数据是否写入成功，可在 JS 中调用 objectStore.getAll().onsuccess = e => console.log(e.target.result)，再比对开发者工具中的内容是否一致。
