How to Inspect, Query, and Delete IndexedDB Data in Google Chrome DevTools

Modern client-side web applications and Progressive Web Apps (PWAs) rely on IndexedDB to store large volumes of structured data—including offline document caches, local draft revisions, media blobs, and client-side database mirrors. While localStorage is limited to simple synchronous key-value strings under 5 MB, IndexedDB provides transactional, indexable, asynchronous storage capable of holding gigabytes of complex JavaScript objects.

Debugging IndexedDB operations through standard console logging is cumbersome and opaque. Google Chrome DevTools features a dedicated graphical visualizer and query editor inside the Application panel, allowing developers to inspect database versions, browse object stores, query custom indexes, modify live records, and delete stale data during local testing.

Accessing the IndexedDB Viewer in Chrome DevTools

To inspect your application’s client-side database:

1. Open Google Chrome and load your web application.
2. Press F12 (or Ctrl + Shift + I on Windows/Linux, Cmd + Option + I on macOS) to open DevTools.
3. Click the Application tab in the main navigation bar.
4. In the left sidebar, expand the Storage section, then expand IndexedDB.
5. Click on your application’s database name to expand its object stores and indexes.

Inspecting Object Stores and Record Properties

When you select an individual object store (e.g. users or cached_articles) under your IndexedDB tree:

• The main pane renders a paginated table displaying Key and Value columns.
• If the store utilizes key generators or in-line keys (such as an id path), primary keys are highlighted.
• Complex values appear as expandable JSON objects. Clicking the small disclosure arrow beside any record unfolds nested properties, arrays, and binary ArrayBuffers without executing JavaScript.

Querying Records via Custom Indexes and Key Ranges

IndexedDB allows querying records by secondary indexes rather than primary keys:

1. In the left tree, expand your object store to view its defined indexes (e.g. by_email or by_created_at).
2. Click on the index name. DevTools sorts and displays records according to the selected index key.
3. In the top toolbar of the data view, enter values into the Key path filter to isolate specific records.
4. Use the pagination controls (Page size dropdown and arrow buttons) to navigate through datasets containing thousands of entries without degrading browser performance.

Editing and Updating Live Records Directly

During debugging, you can simulate schema edge cases or update records without writing code in the Console:

1. Double-click any cell value inside the table.
2. Modify the JSON text string directly within the inline editor.
3. Press Enter to commit the change. Chrome DevTools writes the updated record to the underlying database immediately within a transaction.

Deleting Individual Records or Clearing an Entire Store

To remove corrupted or outdated test entries:

• Delete Single Record: Select a row in the table and click the Delete Selected (trash can) icon in the top toolbar.
• Clear Object Store: Click the Clear object store button to purge all entries while preserving the store’s schema and indexes.
• Delete Entire Database: In the left sidebar, click the top-level database name and click Delete database in the main overview pane.

Refreshing Cached Data Views

Because IndexedDB updates asynchronously via service workers or client scripts, DevTools does not poll the database continuously. Click the circular Refresh button in the top toolbar at any time to re-query the storage engine and display recent client transactions.

Mastering the IndexedDB inspection panel accelerates offline web development, ensuring data persistence models remain resilient and defect-free before production release.