How to view or edit localStorage

Question

I created a Chrome extension and am using localStorage for storing data.

I am accessing localStorage through "background_page".

It works fine but how can I manually view its values? In Firefox you can use Firebug.

Anyone have any suggestions?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

Simply open the Developer Tools by pressing F12.

Click on the Application (formerly Resources) tab and you will see localStorage's content. From there you can add/edit/delete the key/value entries manually.

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

Another combination: Ctrl + Shift + i

---

EDIT: In Chrome 56 it looks like this:

Answer 5

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.