View And Change IndexedDB Data With Chrome DevTools

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

  1. Click the Application tab to open the Application panel. The Manifest pane usually opens by default.

    The Manifest pane
    Figure 1. The Manifest pane

  2. Expand the IndexedDB menu to see which databases are available.

    The IndexedDB menu
    Figure 2. The IndexedDB menu

    • Database icon 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.
    • Object Store icon notes is an object store.

    • title and body are indexes.

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

    The 'notes' database
    Figure 3. The notes database

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

    The 'notes' object store
    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.

  5. Click a cell in the Value column to expand that value.

    Viewing an IndexedDB value
    Figure 5. Viewing an IndexedDB value

  6. Click an index, such as title or body in Figure 6 below, to sort the object store according to the values of that index.

    Sorting an object store by an 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 Refresh when viewing an object store to refresh its data, or view a database and click Refresh database to refresh all data.

Viewing a database
Figure 7. Viewing a database

Edit IndexedDB data

IndexedDB keys and values are not editable from the Application panel. Since DevTools has access to 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 a Snippet, the result is logged to the Console. You can use a Snippet to run JavaScript code that edits an IndexedDB database.

Using a Snippet to interact with IndexedDB
Figure 8. 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 that it's selected.

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

  3. Press the Delete key or click Delete Selected Delete Selected.

    How the object store looks after the key-value pair has been deleted
    Figure 10. 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.

    Viewing an object store
    Figure 11. Viewing an object store

  2. Click Clear object store Clear object store.

Delete an IndexedDB database

  1. View the IndexedDB database that you want to delete.
  2. Click Delete database.

    The 'Delete database' button
    Figure 12. The Delete database button

Delete all IndexedDB storage

  1. Open the Clear storage pane.

  2. Make sure that the IndexedDB checkbox is enabled.

  3. Click Clear site data.

    The 'Clear storage' pane
    Figure 13. The Clear storage pane

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.