添加characterSync表后Chrome DevTools无法显示IndexedDB的求助

我使用Dexie创建了如下数据库结构，添加characterSync表后，Chrome DevTools的IndexedDB标签页不再显示该数据库，但Storage标签页能看到存储占用，应用仍可正常读写数据。试过清空站点数据、修改版本、显式删除数据库等操作都无法解决。

class ClientCache extends Dexie {
  messages!: Dexie.Table<Message, string>;
  clientSettings!: Dexie.Table<ClientSettingType, string>;
  characterSync!: Dexie.Table<CharacterSyncType, EphemeraCharacterId>;

  constructor() {
    super("maketheworlddb")
    this.version(1).stores({
        clientSettings: 'key,value',
        messages: 'MessageId,CreatedTime,Target',
        characterSync: 'CharacterId'
    })
  }
}

可能的解决方案 #

1. 检查DevTools的显示过滤设置 #

• 打开Chrome DevTools的IndexedDB标签页
• 确认顶部的「Show all」选项已勾选，搜索框无输入内容，没有启用任何过滤规则

2. 验证主键类型的兼容性 #

Chrome DevTools对IndexedDB主键类型的解析可能存在限制，若EphemeraCharacterId是自定义复杂类型，可能导致数据库无法正常显示：

• 临时修改characterSync表的主键为标准类型（如string）测试：

  // 修改表定义
  characterSync!: Dexie.Table<CharacterSyncType, string>;
  // 构造函数中确保主键字段为string类型
  this.version(1).stores({
    // ...其他表
    characterSync: 'CharacterId' // 确保CharacterId字段值为string类型
  })
  

• 清空数据库后重建，查看DevTools是否能正常显示数据库

3. 彻底清理数据库残留 #

有时候旧版本的数据库元数据可能残留，导致DevTools解析异常：

• 在应用初始化前显式删除数据库：

  async function initDatabase() {
    // 先删除旧数据库
    await Dexie.delete("maketheworlddb");
    // 再初始化新数据库
    const db = new ClientCache();
    // 后续数据库操作
  }
  

• 执行后关闭浏览器，重新打开应用查看

4. 排除DevTools自身缓存问题 #

Chrome DevTools可能缓存了旧的数据库状态：

• 关闭所有DevTools窗口，完全重启Chrome浏览器
• 尝试使用无痕模式打开应用，查看IndexedDB是否正常显示

5. 升级Chrome到最新版本 #

部分旧版本Chrome存在IndexedDB显示的已知bug，升级到最新稳定版可解决此类问题

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