How to Inspect and Manage IndexedDB Databases in Safari Web Inspector

Modern progressive web apps (PWAs) and rich client-side applications rely extensively on IndexedDB for persistent, structured local storage. From offline document editors and encrypted messaging caches to client-side database engines powered by SQLite and WebAssembly, IndexedDB handles massive datasets that exceed the modest limits of traditional cookies and localStorage.

When client-side records corrupt, schema migrations fail, or offline synchronization stops working, developers need direct visibility into local database stores. Apple Safari includes comprehensive IndexedDB debugging capabilities within its native Web Inspector, allowing developers on macOS to audit object stores, query secondary indexes, modify values, and delete corrupted records.

Activating Web Inspector in Safari

Ensure developer features are enabled in Safari:

1. Open Safari on macOS.
2. Click Safari in the menu bar and select Settings… (or press Command + ,).
3. Navigate to the Advanced tab.
4. Check the box labelled Show features for web developers.

Once enabled, press Option + Command + I on any active website to launch Web Inspector.

Navigating to the Storage Panel and IndexedDB Explorer

Within Web Inspector, navigate to the storage tools:

1. Click the Storage tab along the top inspector navigation bar.
2. In the left sidebar, expand the IndexedDB section.
3. Under the active website domain, you will see a list of all initialized IndexedDB database instances.

Selecting a database displays top-level metadata: the database name, current version integer, and the list of contained object stores.

Browsing Object Stores and Record Hierarchies

Click on any individual Object Store beneath the database node. Safari loads a structured data grid displaying stored records:

• Key Column: The primary key identifier of each record (configured via keyPath or auto-incrementing key generators).
• Value Column: The stored JavaScript object payload.

Clicking on any record row opens the interactive object detail view. Safari formats nested JSON structures cleanly with collapsible arrows, allowing you to inspect deep properties, typed arrays, dates, and binary Blob structures without writing diagnostic console queries.

Filtering and Querying via Secondary Indexes

If an object store defines secondary indexes (e.g., an index on an email or createdAt property), expand the object store in the sidebar to reveal them:

1. Click on the secondary index node in the sidebar.
2. Safari reorganizes the data table, sorting and indexing rows according to the indexed property key.
3. Use the Filter bar at the top of the data table to quickly search for specific records matching string values or primary keys.

Deleting Records and Purging Databases

When testing data migration scripts or resetting application state:

• Delete Individual Records: Click a record row in the table and press the Delete (or Backspace) key. Safari immediately removes the record from the object store.
• Clear Object Store: Right-click the object store in the sidebar and choose Clear Object Store to flush all records while preserving schema definitions.
• Delete Entire Database: Right-click the database name in the sidebar and select Delete Database.

Reload your webpage to verify that your application’s database bootstrap and upgrade handlers (such as onupgradeneeded) execute cleanly from a blank state.