LevelJS+IndexedDB在浏览器中显示字节数组而非可读对象的调试问题

方案一：调整LevelJS的编码配置 #

LevelJS默认会将键和值编码为二进制（ArrayBuffer）存储，哪怕设置了valueEncoding: 'json'，底层也是把JSON对象序列化为字符串再转成二进制，导致DevTools里显示不友好。你可以通过显式指定编码规则，让数据以字符串/结构化对象形式存储：

1. 让键显示为字符串 #

如果你的keyObj是对象，将keyEncoding设为'json'，Level会把键序列化为JSON字符串存储；如果keyObj本身就是字符串，直接用'utf8'编码更高效：

import * as level from 'level';
const defDb = new level.Level('def', {
  keyEncoding: 'json', // 针对对象键；字符串键用'utf8'
  valueEncoding: 'json'
});
defDb.put(keyObj, valueObj);

2. 让值显示为结构化对象 #

如果希望值直接以IndexedDB原生结构化对象存储（和直接用IndexedDB的显示效果一致），可以将valueEncoding设为'idb'，这个编码会跳过JSON序列化，直接存储JS对象：

const defDb = new level.Level('def', {
  keyEncoding: 'utf8', // 根据键的类型调整
  valueEncoding: 'idb'
});

注意：'idb'编码仅支持浏览器环境，且只能存储IndexedDB兼容的类型（如对象、数组、字符串等，不支持函数、Symbol等）。

方案二：配置浏览器开发者工具直接解析 #

如果不想修改代码，也可以通过DevTools的功能直接解析显示：

Chrome浏览器 #

1. 打开开发者工具，进入Application面板，找到IndexedDB下你的数据库和存储表
2. 对于显示为ArrayBuffer的键：右键点击键内容，选择View as UTF-8（如果是字符串编码）或View as JSON（如果是JSON序列化的键）
3. 对于显示为转义JSON字符串的值：右键点击值内容，选择Parse as JSON，即可展开查看结构化对象

Firefox浏览器 #

1. 打开开发者工具，进入Storage面板，选择IndexedDB下的目标数据库
2. 点击值列的内容，在弹出的查看窗口中，勾选Parse JSON选项，即可自动解析为结构化对象
3. 对于ArrayBuffer类型的键，右键选择Decode as，根据编码类型选择UTF-8或JSON

内容的提问来源于stack exchange，提问作者fedd