309

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?

jsejcksn
  • 27,667
  • 4
  • 38
  • 62
Joe Doe
  • 3,604
  • 3
  • 19
  • 17
  • I have the same. Totally empty even though I can log them in javascript. Maybe because extension unpacked or whatever, but no usefull answer here yet. 2021-01-10. People don't seem to understand the question. – e-motiv Jan 10 '21 at 17:31

5 Answers5

331

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.

Giorgi Gzirishvili
  • 253
  • 2
  • 6
  • 48
    In Chrome version 60 you can't modify or add new items, you'll have to do it through the console and `localStorage.setItem('key', 'value')` – Jim Aho Aug 11 '17 at 11:43
  • 17
    In Chrome version 65, you can manually modify and add new items. Double-click below the last key-value pair in the key-value list in Application > Local Storage to add a new value. – Rose Perrone Apr 18 '18 at 15:09
  • I dont' have an f12 key – David 天宇 Wong Jul 29 '22 at 20:29
186

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:

enter image description here

Simone
  • 20,302
  • 14
  • 79
  • 103
  • 7
    Yep already tried that but localStorage is empty. Maybe because I loaded unpacked extension? – Joe Doe Feb 22 '12 at 23:27
  • This may help you: http://stackoverflow.com/questions/3598669/cookie-or-localstorage-with-chrome-extensions – Simone Feb 22 '12 at 23:32
  • 5
    Simone, i know how to set and read localStorage with JS, but I need to manually edit/delete it – Joe Doe Feb 22 '12 at 23:44
15

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.

Luke P. Issac
  • 1,471
  • 15
  • 32
15

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.

Ryan S
  • 553
  • 1
  • 4
  • 11
11

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.

enigment
  • 3,316
  • 7
  • 30
  • 35
  • 2
    Thanks! That's what I was trying to know. I knew searching this, people'd generally assume browsers local-storage. BUT, `localStorage ≠ chrome.storage.local` – Neeraj Sep 15 '20 at 15:50
  • I'm currently using Chrome 86 and this seems to be the only way to do it. I've looked through all of the UI's available in the various Dev Tools and none of the data I set via my extension is accessible in those UI's. This must be a limitation of newer versions of Chrome. – dsanchez Oct 13 '20 at 06:22
  • Same -- unable to see it from extension's local storage from chrome dev tools/extension UI, I had to print out in background.js manually – xysun Nov 24 '20 at 00:18