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

【问题标题】：How to view/edit localStorage and IndexedDB data in Chrome DevTools如何在 Chrome DevTools 中查看/编辑 localStorage 和 IndexedDB 数据
【发布时间】：2021-07-24 22:56:46
【问题描述】：

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

在 MV2 中，后台页面通过 window.indexedDB 访问 IndexedDB，这一切正常，我可以通过打开后台页面的 Chrome DevTools 来查看 IndexedDB 数据，然后导航到应用程序 > 存储 > IndexedDB。

在MV3中，后台页面需要迁移到对应的Service Worker。服务工作者使用self.indexedDB（因为window 不可用），它似乎工作正常（即，写入和读取数据库似乎工作正常）。但是，当我打开服务工作者的 DevTools（从 chrome://extensions/ 并单击有问题的扩展的“检查视图：服务工作者”）时，即使在控制之后，也看不到 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 上，如果这有什么不同的话......）

【问题讨论】：

我正在研究我正在构建的扩展的存储选项。出于好奇stackoverflow.com/users/4432991/byb，IndexedDB 是如何为您工作的？即使服务人员处于非活动状态，IndexedDB 中的数据也会保留？还是你必须重新填充？只是检查它是否与 chrome.storage 在后台生命周期中持续存在的意义上相同。我将在下一个或两个 sprint 中进行试验
@howdy_miguel IndexedDB 数据即使在服务工作者处于非活动状态时也会保留，并且在开发时，即使在重新加载扩展时也是如此。所以这很好。但也有一些问题可能与您相关，也可能与您无关，例如：stackoverflow.com/questions/66618136/… 和 stackoverflow.com/questions/67406579/… 和 stackoverflow.com/questions/67555309/…

标签： google-chrome-extension google-chrome-devtools service-worker indexeddb

【解决方案1】：

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

当前的解决方法是在扩展的任何 UI 页面上打开 devtools：

弹出窗口/选项 - 只需在页面内右键单击并选择“检查”
通过其 chrome-extension:// URL 例如打开您的扩展程序中包含文件的任何选项卡您可以手动复制粘贴类似chrome-extension://**id**/manifest.json 的网址，其中**id** 是您的扩展程序的ID，您可以在右上角启用“开发人员模式”开关后在chrome://extensions 页面中看到。

请注意，localStorage 与 chrome.storage 无关，这是完全不同的东西。
见how to inspect extension's chrome.storage in devtools。

【讨论】：