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

Question

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'm researching the storage options I have for an extension I'm building. Out of curiosity https://stackoverflow.com/users/4432991/byb, how has IndexedDB been working for you? data inside IndexedDB is kept even when the service worker is inactive? or do you have to repopulate? Just checking if it's the same as chrome.storage in the sense of persisting over the background lifecycle. I'll be experimenting in the next sprint or two — howdy_miguel, Sep 11 '21 at 13:30
@howdy_miguel The IndexedDB data is kept around even when the service worker is inactive and, when developing, even when reloading the extension. So this is good. But there are also some issues that may or may not be relevant to you, see for example: https://stackoverflow.com/questions/66618136/persistent-service-worker-in-chrome-extension/ and https://stackoverflow.com/questions/67406579/chrome-extension-mv3-with-large-persistent-ram-usage-is-it-possible and https://stackoverflow.com/questions/67555309/how-to-avoid-multiple-simultaneous-service-workers-in-mv3-chrome-extension — byb, Sep 13 '21 at 10:02

score 4 · Accepted Answer · answered May 02 '21 at 08:28

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.

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

1 Answers1