27

I've been playing with IndexedDB in Firefox (Ubuntu)

Is there any way to visualize IndexedDB databases contents ? Or do I have to do it programmatic-ally ?

7 Answers 7

20

Bleeding edge Chromium builds reportedly allow you to view IndexedDB content in the Resources panel of the Chrome devtools, but only I know of one way to view Firefox IndexedDB content non-programmically and that's to load the .sqlite file directly.

Firefox's IndexedDB .sqlite files are located at /Users/{USER}/Library/Application Support/Firefox/Profiles/{PROFILE}/indexedDB on OS X and should be C:\Users\{USER}\AppData\Roaming\Mozilla\Firefox\Profiles\{PROFILE} on Windows.

I use the excellent (and free) Firefox tool SQLite Manager, which is cross platform.

which looks like this

One thing to keep in mind however is that the contents are often stored as binary blobs and are likely not to be human readable. Keys are stored as text however so they should be able to be read by hand.

Update Although local files remain a great way to view IDB databases and stores, Chrome does now have great tooling available in the Resources panel.

6
  • 3
    will take a look at chromium... Everybody keep saying indexedDB is the future. Right now I find myself hunting butterflies with a fork in a dark room. Anyway, thanks for your answer. Commented Apr 13, 2012 at 14:50
  • Just set up a user group. Feel free to email non-straightforward questions and I'll try to answer. groups.google.com/group/indexeddb-users?msg=new&lnk=gcis
    – buley
    Commented Apr 13, 2012 at 15:02
  • SqlLite Manager is awesome. Thanks for the tip. Yea, it shows values as blobs but at least I see all the objectstores, keys, etc. Commented Jul 27, 2013 at 18:45
  • 1
    Fernando, One master trick that we had to develop for IndexedDB is to wait till all transaction ended before starting any schema changes, like adding new ObjectStore, adding index to the existing store, etc. If you like, you can check the sources indexedDB.js and taskQueue.js in github.com/urbien/urbini For that we used jquery-indexeddb.js to put IDB requests into taskQueue as promises. Then we had to fallback to Chrome's file api, as Chrome does not support blobs. Also, we used IDB shim for Safari... Commented Jul 27, 2013 at 19:09
  • I am trying but I don't see indexeddb file:///users/{user}/Library/Application Support/Firefox/Profiles/5kaqoz4x.default/ the indexeddb tutorial (simple to-do) and indexeddb should have key pair values
    – alex
    Commented Jan 29, 2016 at 22:10
9

I just downloaded the IndexedDB Browser add-on for Firefox. It works well. Once downloaded it is located in:

Tools > Web Developer > IndexedDB Browser

https://addons.mozilla.org/en-US/firefox/addon/indexeddb-browserupdated-fix/

EDIT: Since Firefox 26 the files for IndexedDB have moved from

{PROFILE}/indexedDB/
to
{PROFILE}/storage/persistent/
The current Version (0.1.4) does not handle this change. However it can be easily solved with a symbolic link.

2
5

In the new versions of firefox, the developer tools comes with a handy Storage Inspector.

https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

Currently you have to use the nightly build of firefox to get it

https://nightly.mozilla.org/

EDIT: Storage Inspector is now in main build

1
  • 1
    This is currently the easiest/best answer (though it's in the main build now).
    – seren
    Commented May 2, 2023 at 13:45
3

Firefox indexedDB location on Ubuntu is:

~/.mozilla/firefox/*.default/storage/persistent/

or

~/.mozilla/firefox-trunk/*.default/storage/persistent/

1
  • For Pale Moon: ~/home/retro/.moonchild productions/pale moon/*.default/
    – Underverse
    Commented Mar 27, 2018 at 12:40
2

You can try my indexeddbviewer, it is located on http://linq2indexeddb.codeplex.com.

The following things you'll need to do: - Add the following references to your page:

<script type="text/javascript" src="../Scripts/jquery-1.7.2.js"> </script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.20.js"> </script>
<script type="text/javascript" src="../Scripts/Linq2IndexedDB.js"> </script>
<script type="text/javascript" src="../Scripts/IndexedDBViewer.js"> </script>

This means you need to get jQuery + jQuery UI And linq2indexedDB (this is my lib and you can get it also on http://linq2indexeddb.codeplex.com).

And to make it work add the following in the body:

<body>
    <p><label id="lblDatabaseName" for="txtDatabaseName">Database name:</label> <input type="text" id="txtDatabaseName" /><input type="button" id="btnViewDatabase" value="View database" /></p>
    <div id="tabs">
        <ul>
        </ul>
    </div>
</body>

I'll tye to work out an easier way asap.

An other way is just use my linq2indexeddb library, and create an new instance of it like this:

var db = window.linq2indexedDB("Database name", null, true)

if you have done this you can call an attribute viewer, that will give you all the information about the indexeddb database.

db.viewer
1
let db;
function createDB() {    
    let dbName = "Jokes";
    let dbVersion = 5;
    let request = indexedDB.open(dbName, dbVersion);
    request.onupgradeneeded = e => {
      db = e.target.result
      console.log(db);
      let jstore = db.createObjectStore("JokeStore", {keyPath: "title"});
      let mstore = db.createObjectStore("MockStore", {keyPath: "title"});
      alert("upgrade");
    }
    request.onsuccess = e => {
      db = e.target.result
      console.log(db);
      alert("success");
    }
    request.onerror = e => {
      alert("error"+e.target.error);
    }
}
function addRecord(title, text) {
    let tx = db.transaction("JokeStore","readwrite");
    tx.onerror = e => alert(e.target.error);
    let jstoretx = tx.objectStore("JokeStore");
    jstoretx.add({title: title, text: text});
}
function viewNotes() {
  let tx = db.transaction("JokeStore", "readonly");
  let jstore = tx.objectStore("JokeStore");
  let request = jstore.openCursor();
  request.onsuccess = e => {
    let cursor = e.target.result;
    if (cursor) {
      console.log(cursor.key, cursor.value.text);
      cursor.continue();
    }
  }
}
createDB(); // Creates db if not there or opens an existing one
addRecord("Joke 1", "Knock Knock"); // Adds record
addRecord("Joke 2", "Elephant and the ant"); // Adds record
viewNotes(); // Displays all records in console
0

I had to read the indexedDB from a WhatsApp Web session, and I did it this way:

function readDB() {
    let dbName = "wawc";
    let dbVersion = 70;
    let request = indexedDB.open(dbName, dbVersion);
    request.onsuccess = e => {
      let db = e.target.result
      let tx = db.transaction("user", "readonly");
      let jstore = tx.objectStore("user");
      let request = jstore.openCursor();
      request.onsuccess = e => {
        let cursor = e.target.result;
        if (cursor) {
          console.log(cursor.key, cursor.value);
          cursor.continue();
        }
      }
    }
    request.onerror = e => {
      console.log("error"+e.target.error);
    }
}
readDB();

Console log will show the contents of table 'user' in 'wawc' database.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.