This guide shows you how to useChrome DevTools to view and changeIndexedDB data. Itassumes you're familiar with DevTools. If not, seeGet started. It also assumes you're familiarwith IndexedDB. If not, seeUsing IndexedDB.

View IndexedDB data

1. Click theApplication tab to open theApplication panel.Expand theIndexedDB menu to see which databases are available.

   

   Figure 1. TheIndexedDB menu

   • notes -https://mdn.github.io represents a database, wherenotes is the name of the database andhttps://mdn.github.io is the origin that can access the database.
   • notes is anobject store.
   • title andbody areindexes.

Note:Known Limitation Third-party databases are not visible. For example, if you use an<iframe> to embed an ad on your page, and your ad network uses IndexedDB, your ad network'sIndexedDB data won't be visible. Seeissue #943770.

1. Click a database to see its origin and version number.

   

   Figure 2. Thenotes database

2. Click an object store to see its key-value pairs.

   Caution: IndexedDB data does not update in real-time. SeeRefresh IndexedDB data.

   

   Figure 3. Thenotes object store

   • Total entries is the total number of key-value pairs in the object store.
   • Key generator value is the next available key. This field is only shown when usingkeygenerators.

3. Click a cell in theValue column to expand that value.

   

   Figure 4. Viewing an IndexedDB value

4. Click an index, such astitle orbody inFigure 6 below, to sort the object storeaccording to the values of that index.

   

   Figure 5. An object store that is sorted alphabetically according to itstitle key

Refresh IndexedDB data

IndexedDB values in theApplication panel do not update in real-time. ClickRefresh when viewing an object store torefresh its data, or view a database and clickRefresh database to refresh all data.

Figure 6. Viewing a database

Edit IndexedDB data

IndexedDB keys and values are not editable from theApplication panel. Since DevTools has accessto page context, however, you can run JavaScript code within DevTools that edits IndexedDB data.

Edit IndexedDB data with Snippets

Snippets are a way to store and run blocks of JavaScript code within DevTools. When you run aSnippet, the result is logged to theConsole. You can use a Snippet to run JavaScript code thatedits an IndexedDB database.

Figure 7. Using a Snippet to interact with IndexedDB

Delete IndexedDB data

Delete an IndexedDB key-value pair

1. View an IndexedDB object store.

2. Click the key-value pair that you want to delete. DevTools highlights it blue to indicate thatit's selected.

   

   Figure 8. Selecting a key-value pair in order to delete it

3. Press theDelete key or clickDelete Selected.

   

   Figure 9. How the object store looks after the key-value pair has been deleted

Delete all key-value pairs in an object store

1. View an IndexedDB object store.

   

   Figure 10. Viewing an object store

2. ClickClear object store.

Delete an IndexedDB database

1. View the IndexedDB database that you want to delete.

2. ClickDelete database.

   

   Figure 11. TheDelete database button

Delete all IndexedDB storage

1. Open theClear storage pane.
2. Make sure that theIndexedDB checkbox is enabled.

3. ClickClear site data.

   

   Figure 12. TheClear storage pane