直接用浏览器开发者工具可高效管理IndexedDB：Chrome/Edge在Application→Storage→IndexedDB中查看编辑，Firefox在Storage→IndexedDB中操作；Dexie.js支持控制台直接CRUD；排查需确认open执行、版本号、事务类型及错误提示。
直接用浏览器开发者工具就能高效管理 IndexedDB，不用装插件、不写额外代码，关键是要知道在哪点、怎么操作、哪些细节容易出错。
Chrome/Edge 中快速查看和编辑数据
按 F12 打开开发者工具，切换到 Application → Storage → IndexedDB。这里只显示当前页面已成功打开的数据库——也就是说，必须有 indexedDB.open() 执行过且没报错，数据库才会出现。点击数据库名，展开后能看到所有 objectStore（相当于表），再点进去就能看到每条记录的键和值。
- 双击 value 字段可直接修改 JSON 内容，回车保存
- 右键某条记录选 “Delete entry” 就能删掉它
- 点 objectStore 右上角的 “Add entry”，填 key（字符串/数字/Date）和合法 JSON value，就能手动加数据
- key 留空时，若 objectStore 设了
autoIncrement: true，系统会自动生成数字主键
Firefox 的对应操作路径
Firefox 开发者工具入口稍不同：打开 DevTools 后切到 Storage 面板 → 左侧展开 IndexedDB。界面布局和 Chrome 类似，也能展开数据库、objectStore，浏览和编辑数据。但要注意，Firefox 对某些 API（比如 IDBIndex 查询）更严格，如果数据不显示，先确认是否触发了事务完成，或检查 keyPath 是否配置正确、能否被识别。
用控制台配合 Dexie.js 快速调试
如果你项目用了 Dexie.js 封装 IndexedDB，调试更灵活。在控制台直接运行命令即可：
-
db.users.add({id: 1, name: '张三'})—— 插入新用户 -
db.users.put({id: 1, name: '张三更新'})—— 存在则更新，不存在则新增 -
db.users.get(1)或db.users.toArray()—— 查单条或查全部 -
db.users.delete(1)—— 删除指定主键记录
执行后刷新 IndexedDB 面板，变化立即可见。这种方式比纯面板操作更适合验证逻辑，尤其适合测试 CRUD 流程。
常见问题排查要点
如果面板里看不到数据库或数据，别急着重写代码，先快速核对这几项：
- 脚本是否真正执行了
indexedDB.open()？有没有被 try/catch 捕获却没报错，导致静默失败？ - 版本号是否匹配？升级结构必须提高版本号，并在
onupgradeneeded里定义 objectStore - 写操作是否发生在
readwrite或versionchange事务中？只读事务里调put()会直接抛 DOMException - 控制台有没有类似 “Failed to execute 'put' on 'IDBObjectStore'” 的错误？这是最直接的线索
