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

yacmzcpb  于 2022-12-09  发布在  IndexedDB
关注(0)|答案(1)|浏览(378)

我正在开发一个Chrome扩展,它大量使用IndexedDB。我目前正在将工作从使用manifest版本2(MV 2)迁移到manifest版本3(MV 3)。
在MV 2中,后台页面通过window.indexedDB访问IndexedDB,这工作得很好,我可以通过打开后台页面的Chrome DevTools查看IndexedDB数据,然后导航到Application〉Storage〉IndexedDB。
在MV 3中,后台页面需要迁移到相应的服务工作者。服务工作者使用self.indexedDB(因为window不可用),并且它看起来工作正常(即写入和读取DB看起来工作正常)。但是,当我打开服务工作者的DevTools(从chrome://extensions/并单击“Inspect views:服务工作者”),即使按住Ctrl键并单击IndexedDB并选择“刷新IndexedDB”,IndexedDB下也看不到任何数据。
同样的问题似乎也存在于localStorage中。尽管我可以成功地在service worker中执行以下操作,但在devTools中没有显示localStorage的任何内容:

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不为我的MV 3 Chrome扩展显示服务工作人员的IndexedDB或localStorage数据?
(The Chrome版本是90.0.4430.93(官方版本)(x86_64)。这是在macOS大苏尔上,如果这有什么不同的话...)

pkmbmrz7

pkmbmrz71#

I filed a feature request to implement it in https://crbug.com/1204851 so you can click the star to raise the importance of the report and be notified of progress.
The current workaround is to open devtools on any UI page of your extension:

  • popup/options - simply right-click inside the page and choose "inspect"
  • any tab with a file from your extension opened via its chrome-extension:// URL e.g. you can manually copypaste a URL like chrome-extension://**id**/manifest.json where **id** is the id of your extension which you can see in chrome://extensions page after enabling "developer mode" switch in the top-right corner.

Note that localStorage is not related to chrome.storage , it's a completely different thing.
See how to inspect extension's chrome.storage in devtools .

相关问题