108

It seems like it should be possible to view the localStorage/chrome.storage of Chrome Extensions installed on my browser. I've played around with the Developer Tools a bit, but haven't found a way to do this. Any ideas?

Xan
  • 74,770
  • 16
  • 179
  • 206
JoshJordan
  • 12,676
  • 10
  • 53
  • 63

7 Answers7

107

There is a very helpful extension to work with both localStorage and chrome.storage that I recently discovered, that works as a Dev Tools panel.

Storage Area Explorer

enter image description here

I did not write this, but it was suggested by the author on some other SO question.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • 7
    Wish I could +50 this. – Jason Capriotti Dec 21 '14 at 16:32
  • 3
    I tried this out, but it's not working for me. However, I'm actually developing a Chrome "devtools" extension - not a normal Chrome extension. – nogridbag Apr 07 '15 at 20:17
  • 2
    @nogridbag Try opening the Dev Tools for your Dev Tools. Undock, Ctrl+Shift+I. ..wait, I tried. Do not do this with Storage Area Explorer if you're epileptic! – Xan Apr 07 '15 at 20:18
  • Yeah I noticed the same thing :) – nogridbag Apr 08 '15 at 06:28
  • 1
    This appears to be broken now. – Steven Matthews Dec 07 '17 at 16:55
  • 1
    Works great! (Tested with my own unpacked extension in development) – rgoliveira Feb 01 '18 at 02:49
  • 1
    If you wish to see the data items from `chrome.storage` you can open dev tools for background.js of your extension then click on the _storage explorer_ in that window. – Nasik Shafeek Apr 01 '19 at 07:53
  • 1
    To me it does not show content of `chrome.storage` as of Chrome 80 (March 2020) – Suma Mar 30 '20 at 11:01
  • add the native way to access and then promote the extension if it works – Coding Edgar Jul 27 '21 at 15:42
  • @CodingEdgar Not sure why you're angry at me for that. Other answers cover manual "run a snippet of code" answers. There isn't a native DevTools interface for it. – Xan Jul 27 '21 at 15:47
  • Sorry @Xan , didn't mean to be rude, I just thought that it could be a good way to improve your answer. stating the fact there's no native way and then promoting the extension is a more complete answer, otherways it looks just like promo, not angry at you at all, cheers. – Coding Edgar Aug 05 '21 at 22:31
105

I will proceed to amalgamate the existing knowledge present in several answers, into a simple and comprehensive one. If you vote up this one, please do the same with the ones from @mwkwok and @chaohuang.

It is true that stuff saved using chrome.storage does not show up in developer tools, there you can only see stuff saved using regular localStorage API. Do this:

  1. Open your extension's background page by going to chrome://extensions/ ("Developer mode" needs to be checked to see background pages)

  2. Go to the Console tab and type this:

chrome.storage.local.get(function(result){console.log(result)})

This will spit the whole storage as a JSON object into the console.

Clint Eastwood
  • 4,995
  • 3
  • 31
  • 27
63

You're right that chrome.storage does not show up in developer tools. The only way I've found to view all of it is by putting this into console:

chrome.storage.local.get(function(result){console.log(result)})

This will spit the JSON object into console.

mwkwok
  • 731
  • 5
  • 2
45

This was actually two questions!

  1. How do I view localStorage of a Chrome Extension I've installed?

Open the Chrome Devtool by clicking on the background page of an extension in Chrome://extensions/ (Developer mode needs to be checked to see background pages), then in resource panel you can see the local storage on the left. (by chaohuang and Kil)

  1. How do I view chrome.storage of a Chrome Extension I've installed?

In the same console of the background page:

OPEN THE BACKGROUND PAGE FIRST:

a. to go to chrome://extensions/

b. ensure you are in development mode

c. then on your extension, either click "Inspect views background page" or go to "Details" and click background page.

NOW THAT YOU ARE ON THE BACKGROUND PAGE YOU CAN PROCEED:

  • For storage.local (by mwkwok)

chrome.storage.local.get(function(result){console.log(result)})

  • For storage.sync

chrome.storage.sync.get(function(result){console.log(result)})

parsecer
  • 4,758
  • 13
  • 71
  • 140
Frank R.
  • 1,732
  • 18
  • 21
  • 1
    Should be accepted as the correct answer, the answer below requires an Add-on to be installed and doesn't work. – Anthony Jan 13 '20 at 22:36
  • 2
    With Chrome 80 I get following error when trying to use `chrome.storage.local.get` in the console: Uncaught TypeError: Cannot read property 'local' of undefined at :1:16. The `chrome.storage` value is undefined in the console. – Suma Mar 30 '20 at 10:55
  • @suma Did you try it in a console of a normal page? – Frank R. Mar 30 '20 at 12:15
  • 2
    I see now. I need to open **the backround page**, as written in the answer. Perhaps the answer could include how to navigate to the background page, for naive users like me who have no idea what it is. – Suma Mar 30 '20 at 14:43
  • 1
    @Suma The way to do this is to go to `chrome://extensions/`, ensure you are in development mode, then on your extension, either click "Inspect views background page" or go to "Details" and click background page. Then you can access your variables. – rhombidodecahedron Dec 30 '20 at 14:28
  • It says `storage` is undefined – parsecer May 19 '21 at 00:54
  • upvoting as the correct answer. it's not the shortest, but it is the most detailed. sometimes when you've reached the end of the rabbit hole and are exhausted it's nice to have verbose, obvious instruction. – kdub1312 Sep 04 '21 at 01:00
  • also, note for 2021: 'inspect view' works for service workers, in the case you've updated your extension for MVC3 – kdub1312 Sep 04 '21 at 01:08
16

Open the Chrome Devtool by clicking on the background page of an extension in Chrome://extensions/ (Developer mode needs to be checked to see background pages), then in resource panel you can see the local storage on the left.

chaohuang
  • 3,965
  • 4
  • 27
  • 35
  • 25
    You can find it in Chrome Developers Tool if you use `LocalStorage API`. But if you use `chrome.storage API` method like `chrome.storage.local.set({"key":value})`, data is not stored in there. Where can we find those datas? – KiL Aug 17 '12 at 09:53
  • Not seeing anything my extension saved. Other than just print it out, is there another way to check them out? – Robert Jun 27 '14 at 05:44
  • 2
    Check out recently added answer from @Xan. – Jason Capriotti Dec 21 '14 at 16:34
  • **Does this even work?** What you see there is the HTML5 storage, not chrome.storage storage – Pacerier Aug 06 '17 at 07:11
  • Can't see anything of the sort – parsecer May 19 '21 at 00:54
10

In 2022, the best way I've found is still with the console.log, but you can make it a lot cleaner-looking with currying. Open up extensions page, open the inspector for your background worker, go to console, and...

chrome.storage.local.get(console.log)

theigor
  • 101
  • 1
  • 2
8

I didn't get any results using the provided code typed into console. But this code worked when put into the console.

chrome.storage.sync.get(null, function (data) { console.info(data) });

The difference here is that we pass a null value which will return all content in the storage. To back this up, and for additional reading, check out the official chrome page on this API.

Gus Galarnyk
  • 91
  • 1
  • 3