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.
- 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
(
) 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 (
) 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.
Click on the name of a database to view the security origin, name, and version of that database.
Expand a database to view its key-value pairs (KVPs).
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.
Enter a key in the Start from key textfield to filter out all keys with a value smaller than that one.
When you add, modify, or delete values, those changes won't get updated in
realtime. Click the refresh button ()
to update a database.
Click the clear object store button (
)
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.
Click on a database table to view that table's data.
- 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 () to view your
updates.
- Enter a space-separated or comma-separated list of column names in the Visibile 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.
Each row represents a resource.
The Type column will have one of the following values:
- Master. The
manifestattribute 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.
