Export IndexedDB from a web app using devtools

No browser’s devtools allow you to export or import an IndexedDB database (as of 2020–12–17), but you can invoke dexie and dexie-export-import on any page and make it do the export for you.

NOTE: This is a hack to export it from devtools on a client without controlling the web page that host the app. If you are interested in how to export your IndexedDB database from your own application, read more in the docs!

I will present how I did this for an old application of mine without having to push a new version of it. Any web application that use IndexedDB can be exported.

The steps I will go through:

  1. Find out the database name of the IndexedDB databases.
  2. Include dexie-export-import into the page.
  3. Export the database to a blob.
  4. Generate a “download link” to click on.

1. Find out Database Name

I personally use chrome devtools but most of these instructions would work in Firefox, opera, edge and possible Safari as well. To open devtools on mac, click CMD+ALT+I. On Windows, press F12.

In devtools, click Application tab and then unfold IndexedDB to see a list of database names.

2. Include dexie-export-import into the page.

In devtools, click Console tab. Write the following line in console ONE line at a time:

script1 = document.createElement(‘script’);
script1.src = ‘https://unpkg.com/dexie’;
script2 = document.createElement(‘script’);
script2.src = ‘https://unpkg.com/dexie-export-import’;

3. Export database to a blob

theDBName = ‘theDatabaseName you found in step 1’;

And then paste the following to console ONE line at a time:

theDB = new Dexie(theDBName);
let {verno, tables} = await theDB.open();
theDB = new Dexie(theDBName);
theDB.version(verno).stores(tables.reduce((p,c) => {p[c.name] = c.schema.primKey.keyPath || “”; return p;}, {}));
theBlob = await theDB.export();

You will see something like:

> Blob {size: 4977759, type: “text/json”}

4. Generate a “download link” to click on.

document.body.innerHTML = ` <a href=’${URL.createObjectURL(theBlob)}’>Right-click to download database export</a>`

Now, right-click that link and save it to your file system:

How to use the exported file

The exported file will be a JSON file that you can inspect or parse or re-import using dexie-export-import package on your own application. See how that package works in the docs at dexie.org.

Author of Dexie.js. Passionate about simplifying app development. Javascript. Isomorphic app, data fetching and React.