How to view or edit localStorage

Question

It's simple. Just go to the developer tools by pressing F12, then go to the Application tab. In the Storage section expand Local Storage. After that, you'll see all your browser's local storage there.

Open the Developer Tools by pressing F12.

Click on the Application tab and you will see localStorage's content. From there you can add/edit/delete the entries manually.

On OS X the keys are: ⌥ + ⌘ + i

Another combination: Ctrl + Shift + i

---

In Chrome it looks like this:

You can go to chrome://chrome/extensions and there will be a link to your background page that once you launch you can use the Dev Tools to see the localStorage stuff.

I am using chrome Version 52.0.2743.82 m currently. In this lastest version of chrome as of now, you can see the local storage values by launching "Developer Tools" and then looking into "Application" tab.

Either I don't understand what people here are trying to do, and it's not what I'm doing, and/or the Chrome developer tools have changed, and are broken in this regard.

My extension's content-script stores data like this:

chrome.storage.local.set(packet);

When I view the Application tab of the extension's background page, and expand Storage > Local Storage, I see my extension listed, but clicking on it shows no data.

The only solution I've found is to run this in the background page's console:

chrome.storage.local.get(null, function(data) {console.log(data);})

That's similar to how the extension reads it (except passing null to get all keys instead of a key name to get just the one I want) and it works fine, it's just awkward to type it out every time. It's also weird that there are all these answers here that don't work for me.

I'm using Chrome 73.0.3683.103 (Official Build) (64-bit) on Windows 10. The extension is still unpacked, if that's relevant, but that's the most likely time you'd want to do this, i.e., in development.