如何在 Chrome DevTools 中查看/编辑 localStorage 和 IndexedDB 数据

Question

我正在开发一个大量使用 IndexedDB 的 Chrome 扩展。我目前正在将工作从使用清单版本 2 (MV2) 迁移到清单版本 3 (MV3)。

在 MV2 中，后台页面通过

window.indexedDB

访问 IndexedDB，这工作正常，我可以通过打开后台页面的 Chrome DevTools 来查看 IndexedDB 数据，然后导航到应用程序 > 存储 > IndexedDB。

MV3中，后台页面需要迁移到对应的Service Worker。服务工作者使用

self.indexedDB

（因为

window

不可用），并且它似乎工作正常（即写入数据库和从数据库读取似乎工作正常）。但是，当我打开 Service Worker 的 DevTools（从 chrome://extensions/ 并单击相关扩展的“检查视图：Service Worker”）时，即使在控制之后，IndexedDB 下也看不到数据 -单击 IndexedDB 并选择“刷新 IndexedDB”。

localStorage 似乎也存在同样的问题。尽管我可以在服务工作者中成功执行以下操作，但本地存储的 DevTools 中没有显示任何内容：

chrome.storage.local.set({"a_key": "some_value"}, function() {
  console.log('setting the key-value pair');
});

setTimeout(checkMyValue, 1000);

function checkMyValue() 
{
  chrome.storage.local.get(["a_key"], function(result) {
    console.log('The value is ' + result["a_key"]);
  });  
}

将

some_value

打印到控制台。

所以基本上，我想我要问的是：为什么 DevTools 不显示我的 MV3 Chrome 扩展的 Service Worker 的 IndexedDB 或 localStorage 数据？

（Chrome 版本是 90.0.4430.93（官方版本）(x86_64)。这是在 macOS Big Sur 上，如果这有什么区别......）

Answer 1

我在 https://crbug.com/1204851 中提交了实现该功能的功能请求，因此您可以单击星标来提高报告的重要性并收到进度通知。

当前的解决方法是在扩展程序的任何 UI 页面上打开开发工具：

• 弹出窗口/选项 - 只需在页面内右键单击并选择“检查”
• 通过其 chrome-extension:// URL 打开的带有扩展程序文件的任何选项卡，例如您可以手动复制粘贴类似

  chrome-extension://**id**/manifest.json

  的 URL，其中

  **id**

  是您的扩展程序的 id，在启用右上角的“开发者模式”开关后，您可以在 chrome://extensions 页面中看到它。

请注意，localStorage与chrome.storage无关，它是完全不同的东西。
请参阅如何在 devtools 中检查扩展的 chrome.storage。

Answer 2

尝试这个 chrome 扩展来管理 indexedDb

https://chrome.google.com/webstore/detail/idb-crud-indexeddb-manage/olbigpjodejcmmdkafnhaphdblimjogg