How to Inspect and Profile IndexedDB Storage and Quotas in Safari Web Inspector

Modern Progressive Web Apps (PWAs) and rich single-page applications rely heavily on IndexedDB to store offline documents, cached media, local database records, and operational states on the client side. However, handling asynchronous transactions, schema migrations, and storage quota limits can introduce subtle bugs that compromise offline resilience. Apple’s Safari Web Inspector provides comprehensive developer tooling to examine object stores, execute ad-hoc key queries, evaluate indexes, and monitor persistent storage quotas on macOS.

Enabling the Storage Tab in Safari Web Inspector

To inspect client-side databases in Safari, verify that developer tools are visible on your system:

1. Launch Safari on macOS.
2. Open Settings (Cmd + ,) and navigate to the Advanced tab.
3. Check the option at the bottom: Show features for web developers.
4. Navigate to the web application you wish to test.
5. Right-click anywhere on the page and select Inspect Element (or press Cmd + Option + I).
6. In the Web Inspector toolbar, select the Storage tab. If the tab is hidden due to window width, click the chevron icon (>>) on the far right of the navigation bar.

Navigating the IndexedDB Database Hierarchy

In the left-hand sidebar of the Storage panel, expand the IndexedDB category. Safari organizes database storage hierarchically:

• Security Origin: Grouped by protocol, domain, and port (e.g. https://app.example.com).
• Database Name and Version: Displays each open database alongside its active schema version number (e.g. UserCacheDB (v3)).
• Object Stores: Individual tables or collections containing structured JavaScript object records.
• Indexes: Secondary search trees defined on specific object properties to facilitate fast queries without scanning primary keys.

Querying and Filtering Object Store Entries

Clicking directly on an object store displays a tabulated view of all records:

1. Key and Value Inspection: Each row reveals the record’s primary key and a collapsible JSON object tree representing the stored value. Click the triangle next to any object to inspect nested fields, arrays, and binary Blobs.
2. Filter by Key Range: Use the search filter bar at the top of the table to isolate specific records. Enter explicit string keys or numeric identifiers to narrow down thousands of entries.
3. Index Switching: Above the data table, click the Index drop-down menu to re-order the table based on defined secondary indexes (such as emailIndex or timestampIndex), confirming that your schema indexes populate accurately.
4. Refreshing Live Data: If your web app modifies records in the background, click the Refresh (circular arrow) button in the bottom bar to fetch the latest state from disk.

Testing Schema Migrations and Deleting Test Data

During local feature development, developers frequently need to clear corrupted development schemas or simulate cold first-time visits:

• Delete Selected Record: Highlight any row in the object store and press the Delete key (or click the trash can icon in the inspector footer) to remove an individual entry.
• Clear Object Store: Right-click an object store in the left sidebar and choose Clear Object Store to purge all entries while preserving the table schema.
• Delete Entire Database: Right-click the parent database node and select Delete Database. This completely unregisters the database from Safari’s storage engine, allowing you to trigger fresh onupgradeneeded schema initialization routines upon reloading the page.

Auditing Storage Quotas and Safari Eviction Policies

Safari enforces strict client-side storage quotas to preserve device flash memory and prevent rogue web apps from consuming excessive disk space:

1. Default Per-Origin Quota: Safari dynamically allocates origin storage based on overall available disk capacity. Typically, an origin can store up to 1 GB before Safari prompts the user for storage expansion permissions.
2. Persistent Storage Request: To safeguard offline data against automatic cache eviction during low-disk conditions, check whether your application requests persistent storage via the StorageManager API:

   if (navigator.storage && navigator.storage.persist) {
     const isPersisted = await navigator.storage.persist();
     console.log('Persisted storage granted:', isPersisted);
   }

3. Checking Current Usage in the Console: Inside Web Inspector’s Console drawer, query active quota usage directly:

   navigator.storage.estimate().then(({usage, quota}) => {
     console.log('Used:', (usage / (1024 * 1024)).toFixed(2), 'MB');
     console.log('Quota:', (quota / (1024 * 1024)).toFixed(2), 'MB');
   });

Utilising Safari Web Inspector to inspect IndexedDB storage ensures web developers can debug complex client-side caching mechanisms, audit data integrity, and guarantee robust offline user experiences.