school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

Inspect and Manage Storage, Databases, and Caches

Inspect and manage storage, databases, and caches from the Application panel.

TL;DR

  • View and edit local and session storage.
  • Inspect and modify IndexedDB databases.
  • Execute statements on a Web SQL database.
  • View Application and Service Worker Caches.
  • Clear all storage, databases, caches, and service workers with a single button click.

Local storage

If you're using local storage to store key-value pairs (KVPs), you can inspect, modify, and delete these KVPs from the Local Storage pane.

local storage pane

  • Double-click on a key or value to edit that value.
  • Double-click on an empty cell to add a new KVP.
  • Click on a KVP and then press the delete button (delete button) to delete that KVP. You can wipe all of your local storage data with a single button click from the Clear storage pane.
  • If you're interacting with a page in a way that creates, deletes, or modifies KVPs, you won't see those changes get updated in realtime. Click the refresh button (refresh button) to see your changes.

Session storage

The Session Storage pane works the same as the Local Storage pane. Check out the Local storage section above to learn how to view and edit session storage.

IndexedDB

Use the IndexedDB pane to inspect, modify, and delete IndexedDB data.

When you expand the IndexedDB pane, the first level below that are databases. If there are multiple databases active, then you'll see multiple entries. In the screenshot below there's only one database active for the page.

indexeddb tab

Click on the name of a database to view the security origin, name, and version of that database.

indexeddb database

Expand a database to view its key-value pairs (KVPs).

indexeddb key-value pairs

Use the arrow buttons next to the Start from key textfield to move between pages of KVPs.

Expand a value and double-click to edit that value. When you add, modify, or delete values, those changes won't get updated in realtime. Click the refresh button to update a database. editing an indexeddb kvp

Enter a key in the Start from key textfield to filter out all keys with a value smaller than that one.

filtered kvps

When you add, modify, or delete values, those changes won't get updated in realtime. Click the refresh button (refresh button) to update a database.

Click the clear object store button (clear object store) to delete all data from your database. You can also accomplish this as well as unregistering service workers and removing other storage and caches with a single click from the Clear storage pane.

Web SQL

Use the Web SQL pane to query and modify Web SQL databases.

Click on a database name to open a console for that database. From here you can execute statements on the database.

web sql console

Click on a database table to view that table's data.

web sql table

  • You can't update values from here, but you can do so via the database console (see above).
  • Click on a column's header to sort the table by that column.
  • Changes that you make to a table won't update in realtime. Click the refresh button (refresh button) to view your updates.
  • Enter a space-separated or comma-separated list of column names in the Visible columns textfield to only display those columns.

Application Cache

Use the Application Cache pane to inspect resources and rules that have been created via the Application Cache API.

application cache pane

Each row represents a resource.

The Type column will have one of the following values:

  • Master. The manifest attribute on the resource indicated that this cache is its master.
  • Explicit. This resource was explicitly listed in the manifest.
  • Network. The manifest specified that this resource must come from the network.
  • Fallback. The URL in the Resource column was listed as a fallback for another URL (not shown in DevTools).

At the bottom of the table there are status icons indicating your network connection and the status of the application cache. The application cache can have the following statuses:

  • IDLE. The cache has no new changes.
  • CHECKING. The manifest is being fetched and checked for updates.
  • DOWNLOADING. Resources are being added to the cache.
  • UPDATEREADY. A new version of the cache is available.
  • OBSOLETE. The cache is being deleted.

Service Worker Caches

The Cache Storage pane on the Application panel lets you inspect, modify, and debug caches created with the (service worker) Cache API. Check out the guide below for more help.

Clear service workers, storage, databases, and caches

Sometimes you just need to wipe all of the data for a given origin. The Clear Storage pane on the Application panel lets you selectively unregister service workers, storage, and caches. To clear data, just enable the checkboxes next to the components that you want to wipe, and then click Clear site data. The action wipes all of the data for the origin listed under the Clear storage label.

clear storage