title: How to view/edit localStorage and IndexedDB data in Chrome DevTools
body: <p>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).</p>
  <p>In MV2, the background page was accessing IndexedDB via <code>window.indexedDB</code>, 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 &gt; Storage &gt; IndexedDB.</p>
  <p>In MV3, the background page needs to be migrated to a corresponding service worker. The service worker uses <code>self.indexedDB</code> (since <code>window</code> 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 &quot;Inspect views: Service worker&quot; for the extension in question), there is no data to be seen under IndexedDB, even after control-clicking on IndexedDB and selecting &quot;Refresh IndexedDB&quot;.</p>
  <p>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:</p>
  <pre><code>chrome.storage.local.set({&quot;a_key&quot;: &quot;some_value&quot;}, function() {
    console.log('setting the key-value pair');
  });
  
  setTimeout(checkMyValue, 1000);
  
  function checkMyValue() 
  {
    chrome.storage.local.get([&quot;a_key&quot;], function(result) {
      console.log('The value is ' + result[&quot;a_key&quot;]);
    });  
  }
  </code></pre>
  <p>which prints <code>some_value</code> to the console.</p>
  <p>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?</p>
  <p>(The Chrome version is 90.0.4430.93 (Official Build) (x86_64). This is on macOS Big Sur, if this makes any difference...)</p>