Inspecting Data with the Chromium Application Panel

The Application panel in Chromium-based web browsers provides developers with a comprehensive suite of tools to inspect, modify, and debug modern web application data. This article provides a straightforward guide on how to use the Application panel to manage Service Workers, inspect Cache Storage, and interact with IndexedDB databases, enabling efficient debugging of offline capabilities and client-side storage.

Accessing the Application Panel

To begin inspecting these components, open the Chromium Developer Tools by pressing F12 (or Ctrl+Shift+I on Windows/Linux, Cmd+Option+I on macOS). Click on the Application tab at the top of the Developer Tools window. If the tab is not visible, click the >> icon to reveal more tabs.

Inspecting Service Workers

Service Workers act as proxy servers that sit between web applications, the browser, and the network. You can find the Service Workers section in the left-hand sidebar under the "Application" group.

Selecting this section allows you to perform the following actions:

  • View Status and Source: See the current status of the registered Service Worker (such as Activated and running), the source file link, and the time it was last updated.
  • Simulate Offline Mode: Check the Offline box to disconnect the browser from the network and test how the Service Worker handles offline requests.
  • Update on Reload: Check this box to force the Service Worker to update and activate a new version every time the page reloads.
  • Bypass for Network: Enable this option to force the browser to ignore the active Service Worker and fetch resources directly from the network.
  • Manual Lifecycle Control: Click Update to trigger an immediate update check, or click Unregister to completely remove the Service Worker.
  • Simulate Events: Use the text inputs for Push, Sync, and Periodic Sync to send simulated payloads and test background event listeners without needing a live server trigger.

Inspecting Cache Storage

Cache Storage is primarily used by Service Workers to store network responses for offline use. You can access it in the left-hand sidebar under the "Storage" group by expanding the Cache Storage dropdown.

When you click on a specific cache instance, the main pane displays its contents and offers several tools:

  • View Cached Resources: A table displays the URL, response type, content type, content length, and the time the resource was cached.
  • Filter Resources: Use the Filter by Path input box at the top of the pane to quickly find specific files within a large cache.
  • Inspect Headers and Previews: Clicking on any row in the resource table opens a lower pane. Here, you can view the HTTP Headers associated with the cached response and a Preview of the actual content (such as rendered images, HTML code, or JSON data).
  • Manage Cache Data: Click the Refresh icon to update the view if the cache has changed programmatically. You can also select a resource and click the DeleteSelected (X) icon to remove that specific file, or right-click the cache name in the sidebar and select Delete to wipe the entire cache.

Inspecting IndexedDB Databases

IndexedDB is a low-level API for client-side storage of significant amounts of structured data. To inspect it, locate the IndexedDB dropdown in the left-hand sidebar under the "Storage" group.

Expanding the IndexedDB menu reveals all databases associated with the current origin:

  • Database Overview: Clicking directly on the database name displays its Security origin, Name, and Version. From this screen, you can click Delete database or Refresh database.
  • Explore Object Stores: Expand the database in the sidebar to view its Object Stores (similar to tables in SQL). Clicking an Object Store reveals a table containing the stored Key, Key Path, and Value.
  • Expand Data Values: The Value column holds JavaScript objects. Click the arrow next to any object to expand its tree structure and inspect the nested properties and data types.
  • Query and Filter: If an Object Store has defined Indexes, you can expand the Object Store in the sidebar to view data sorted by that specific index. You can also use the Start from key input at the top of the table to filter the displayed records.
  • Modify Data: IndexedDB data does not update in real-time in the UI. Click the Refresh icon at the top of the pane to see newly written data. To remove data, select a specific row and click the Delete selected (X) icon, or click the Clear object store icon to delete all records within that store.