如何在 Chrome DevTools 中 view/edit localStorage 和 IndexedDB 数据
How to view/edit localStorage and IndexedDB data in Chrome DevTools
我正在开发一个 Chrome 扩展,它大量使用了 IndexedDB。我目前正在将工作从使用清单版本 2 (MV2) 迁移到清单版本 3 (MV3)。
在 MV2 中,后台页面通过 window.indexedDB
访问 IndexedDB,这工作正常,我可以通过打开后台页面的 Chrome DevTools 查看 IndexedDB 数据,然后导航到应用程序 > 存储 > IndexedDB。
在MV3中,后台页面需要迁移到对应的service worker。 service worker 使用 self.indexedDB
(因为 window
不可用),它似乎工作正常(即写入和读取数据库似乎工作正常)。但是,当我打开服务工作者的 DevTools(来自 chrome://extensions/ 并单击“检查视图:服务工作者”以获得有问题的扩展)时,在 IndexedDB 下看不到任何数据,即使在按住 Control 键并单击 IndexedDB 并选择“刷新 IndexedDB”之后。
localStorage 似乎也存在同样的问题。 localStorage 的 DevTools 中没有显示任何内容,即使我可以在 service worker 中成功执行:
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 扩展显示服务工作者的 IndexedDB 或 localStorage 数据?
(Chrome 版本为 90.0.4430.93(官方构建)(x86_64。这是在 macOS Big Sur 上,如果这有什么不同...)
我在 https://crbug.com/1204851 中提交了一个功能请求来实现它,因此您可以单击星标来提高报告的重要性并收到进度通知。
当前的解决方法是在扩展程序的任何 UI 页面上打开开发者工具:
- popup/options - 只需在页面内右击并选择“检查”
- 通过其 chrome-extension:// URL 打开带有您扩展中的文件的任何选项卡,例如您可以手动复制粘贴一个 URL,例如
chrome-extension://**id**/manifest.json
,其中 **id**
是您的扩展程序的 ID,您可以在启用“开发者模式”开关后在 chrome://extensions 页面中看到它在右上角。
请注意localStorage is not related to chrome.storage,这是完全不同的事情。
参见 how to inspect extension's chrome.storage in devtools。
我正在开发一个 Chrome 扩展,它大量使用了 IndexedDB。我目前正在将工作从使用清单版本 2 (MV2) 迁移到清单版本 3 (MV3)。
在 MV2 中,后台页面通过 window.indexedDB
访问 IndexedDB,这工作正常,我可以通过打开后台页面的 Chrome DevTools 查看 IndexedDB 数据,然后导航到应用程序 > 存储 > IndexedDB。
在MV3中,后台页面需要迁移到对应的service worker。 service worker 使用 self.indexedDB
(因为 window
不可用),它似乎工作正常(即写入和读取数据库似乎工作正常)。但是,当我打开服务工作者的 DevTools(来自 chrome://extensions/ 并单击“检查视图:服务工作者”以获得有问题的扩展)时,在 IndexedDB 下看不到任何数据,即使在按住 Control 键并单击 IndexedDB 并选择“刷新 IndexedDB”之后。
localStorage 似乎也存在同样的问题。 localStorage 的 DevTools 中没有显示任何内容,即使我可以在 service worker 中成功执行:
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 扩展显示服务工作者的 IndexedDB 或 localStorage 数据?
(Chrome 版本为 90.0.4430.93(官方构建)(x86_64。这是在 macOS Big Sur 上,如果这有什么不同...)
我在 https://crbug.com/1204851 中提交了一个功能请求来实现它,因此您可以单击星标来提高报告的重要性并收到进度通知。
当前的解决方法是在扩展程序的任何 UI 页面上打开开发者工具:
- popup/options - 只需在页面内右击并选择“检查”
- 通过其 chrome-extension:// URL 打开带有您扩展中的文件的任何选项卡,例如您可以手动复制粘贴一个 URL,例如
chrome-extension://**id**/manifest.json
,其中**id**
是您的扩展程序的 ID,您可以在启用“开发者模式”开关后在 chrome://extensions 页面中看到它在右上角。
请注意localStorage is not related to chrome.storage,这是完全不同的事情。
参见 how to inspect extension's chrome.storage in devtools。