How to view/edit localStorage and IndexedDB data in Chrome DevTools

I am working on a Chrome extension which uses IndexedDB heavily. I am currently migrating the work from using manifest version 2 (MV2) to manifest version 3 (MV3).

In MV2, the background page was accessing IndexedDB via window.indexedDB, and this was working fine and I could view the IndexedDB data by opening the Chrome DevTools for the background page, and navigate to Application > Storage > IndexedDB.

In MV3, the background page needs to be migrated to a corresponding service worker. The service worker uses self.indexedDB (since window is not available), and it appears to be working fine (i.e. writing to and reading from the DB seems to be working). However, when I open the DevTools for the service worker (from chrome://extensions/ and clicking on "Inspect views: Service worker" for the extension in question), there is no data to be seen under IndexedDB, even after control-clicking on IndexedDB and selecting "Refresh IndexedDB".

The same issue seems to be present for localStorage. There is nothing shown in DevTools for localStorage, even though I can successfully in the service worker do:

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"]);
  });  
}

which prints some_value to the console.

So basically, I guess what I am asking is: Why does DevTools not show the IndexedDB or localStorage data for the service worker, for my MV3 Chrome extension?

(The Chrome version is 90.0.4430.93 (Official Build) (x86_64). This is on macOS Big Sur, if this makes any difference...)

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.