使用浏览器开发工具调试 Dexie.js 的 IndexedDB 数据库

使用浏览器开发工具调试 Dexie.js 的 IndexedDB 数据库

在调试基于 Dexie.js 的 IndexedDB 数据库时，浏览器开发工具提供了强大的支持。以下是详细的调试步骤：

---

1. 打开浏览器开发工具

1. 在 Chrome 或 Edge 中：

   • 使用快捷键 F12 或 Ctrl + Shift + I（Windows/Linux），Cmd + Option + I（Mac）。
   • 或右键单击页面上的任意元素，选择“检查”。

2. 在 Firefox 中：

   • 使用快捷键 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac）。

---

2. 导航到 IndexedDB 面板

1. 在 Chrome 或 Edge 中：

   • 在开发工具中，切换到 “Application” 面板。
   • 在左侧导航栏找到 Storage → IndexedDB，展开查看已注册的数据库。

2. 在 Firefox 中：

   • 在开发工具中，切换到 “Storage” 面板。
   • 左侧菜单中找到 IndexedDB，展开后会列出数据库。

---

3. 查找 Dexie.js 创建的数据库

Dexie.js 通常使用指定的数据库名称。例如，如果你初始化了一个名为 myDatabase 的 Dexie 实例：

const db = new Dexie('myDatabase');

在开发工具的 IndexedDB 列表中可以找到 myDatabase。

---

4. 查看数据表

1. 展开数据库名称，你会看到由 Dexie.js 定义的表（如 users、orders）。
2. 点击具体的表，浏览器会显示该表中的数据：
   • 数据以对象形式展示，列出主键和字段内容。

---

5. 操作数据库

• 插入/更新数据：
  使用浏览器控制台输入 Dexie.js 命令。例如：

  db.users.add({ id: 1, name: 'Alice', age: 25 });
  db.users.put({ id: 1, name: 'Alice Updated', age: 26 });
  

  运行后，刷新 IndexedDB 面板即可看到变化。

• 查询数据：
  在控制台中运行 Dexie 查询命令：

  db.users.toArray().then(console.log);  // 输出所有数据
  db.users.get(1).then(console.log);    // 根据主键获取数据
  

• 删除数据：

  db.users.delete(1); // 删除 id 为 1 的记录
  

---

6. 使用 IndexedDB 面板直接操作数据

1. 插入新数据：

   • 点击右侧工具栏上的 Add 或类似按钮（取决于浏览器）。
   • 手动输入 JSON 对象，例如：

     { "id": 2, "name": "Bob", "age": 30 }
     

2. 删除数据：

   • 选中某行数据，点击右键或工具栏中的删除选项。

3. 修改数据：

   • 双击表格中的值进行直接编辑（支持简单字段类型修改）。

---

7. 查看和调试事务

• 观察 Dexie.js 事务执行：
  Dexie.js 使用事务管理数据库操作，可以在控制台调试事务行为。例如：

  db.transaction('rw', db.users, async () => {
    await db.users.add({ id: 3, name: 'Charlie', age: 35 });
    console.log('Transaction complete');
  }).catch(err => {
    console.error('Transaction failed:', err);
  });
  

  如果事务失败，IndexedDB 面板会显示事务状态，并在控制台打印错误。

---

8. 捕获 Dexie.js 的调试信息

1. 启用调试模式：

   Dexie.debug = true; // 在控制台打印调试信息
   

2. 捕获错误信息：

   • Dexie 提供的错误捕获机制有助于定位问题。例如：

     db.users.add({ id: 1, name: 'Test' }).catch(Dexie.BulkError, e => {
       console.error('Error:', e);
     });
     

---

9. 结合断点调试代码

1. 在你的代码中定位与 Dexie.js 数据库操作相关的代码。
2. 在开发工具的 “Sources” 面板中设置断点。
3. 运行代码并观察断点处的变量和数据库状态。

---

10. 使用扩展工具

• IDBExplorer:
  这是一个浏览器扩展，可以更直观地查看和管理 IndexedDB 数据库。
• Dexie.js Debug Panel:
  虽然未提供官方的调试工具，但你可以通过定制日志记录来实现类似效果。

---

11. 总结调试技巧

• 实时观察数据变动： 在 IndexedDB 面板中监控数据，同时使用控制台动态修改。
• 错误排查： 通过 Dexie 提供的 console.error 和事务日志找出问题。
• 优化查询： 观察查询结果是否符合预期，调整索引或表结构。

这样，您可以高效地调试和管理 Dexie.js 的 IndexedDB 数据库！