View and change IndexedDB data
This guide shows you how to use Chrome DevTools to view and change IndexedDB data. It assumes you're familiar with DevTools. If not, see Get started. It also assumes you're familiar with IndexedDB. If not, see Using IndexedDB.
View IndexedDB data #
Click the Application tab to open the Application panel. The Manifest pane usually opens by default.
Figure 1. The Manifest pane
Expand the IndexedDB menu to see which databases are available.
Figure 2. The IndexedDB menu
notes - https://mdn.github.io represents a database, where notes is the name of the database and https://mdn.github.io is the origin that can access the database.
notes is an object store.
title and body are indexes.
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's IndexedDB data won't be visible. See issue #943770.
Click a database to see its origin and version number.
Figure 3. The notes database
Click an object store to see its key-value pairs.
IndexedDB data does not update in real-time. See Refresh IndexedDB data.
Figure 4. The notes 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 using key generators.
Click a cell in the Value column to expand that value.
Figure 5. Viewing an IndexedDB value
Click an index, such as title or body in Figure 6 below, to sort the object store according to the values of that index.
Figure 6. An object store that is sorted alphabetically according to its title key
Refresh IndexedDB data #
IndexedDB values in the Application panel do not update in real-time. Click Refresh when viewing an object store to refresh its data, or view a database and click Refresh database to refresh all data.
Figure 7. Viewing a database
Edit IndexedDB data #
Edit IndexedDB data with Snippets #
Figure 8. Using a Snippet to interact with IndexedDB
Delete IndexedDB data #
Delete an IndexedDB key-value pair #
Click the key-value pair that you want to delete. DevTools highlights it blue to indicate that it's selected.
Figure 9. Selecting a key-value pair in order to delete it
Press the Delete key or click Delete Selected .
Figure 10. How the object store looks after the key-value pair has been deleted
Delete all key-value pairs in an object store #
Figure 11. Viewing an object store
Click Clear object store .
Delete an IndexedDB database #
View the IndexedDB database that you want to delete.
Click Delete database.
Figure 12. The Delete database button
Delete all IndexedDB storage #
Open the Clear storage pane.
Make sure that the IndexedDB checkbox is enabled.
Click Clear site data.
Figure 13. The Clear storage pane