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 ?
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.
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.
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.
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
EDIT: Storage Inspector is now in main build
Firefox indexedDB location on Ubuntu is:
~/.mozilla/firefox/*.default/storage/persistent/
or
~/.mozilla/firefox-trunk/*.default/storage/persistent/
~/home/retro/.moonchild productions/pale moon/*.default/
Commented
Mar 27, 2018 at 12:40
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
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
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.