Application panel overview

Dale St. Marthe
Dale St. Marthe
LinkedIn

Use the Application panel to inspect, modify, and debug many aspects of your web app including its manifest, service workers, storage, and cache data.

Overview

The Application panel is divided into four sections containing sub-menus. Following are these sections and sub-menus:

Application: Contains over-arching information about the app including its manifest, service workers, and storage.

  • The Manifest tab presents information from manifest.json in a user-friendly way. It also displays errors and warnings, if any, in the corresponding section.
  • The Service workers tab lets you inspect and debug service workers by emulating push events, updating a service, and more.
  • The Storage tab contains a pie chart showing the distribution of memory used by cache storage, IndexedDB, and service workers. You can also clear site data and simulate a custom storage quota.

Storage: View and edit the different storage methods used by a web app.

  • Local and Session storage lists let you select an origin and edit the key-value pairs of the associated storage methods.
  • The IndexedDB list contains databases and lets you inspect object stores from the browser.
  • The Cookies list lets you select an origin and edit the key-value pairs.
  • Private state tokens and Interest groups let you inspect the corresponding tokens and groups, if any.
  • The Shared storage list lets you select an origin and inspect and edit associated key-value pairs.
  • The Cache storage list contains available caches and lets you inspect, filter, and delete their resources.

Background services: Inspect, test, and debug background services.

  • The Back/forward cache tab lets you run tests on back/forward cache in the browser. It also reports issues that may be preventing back/forward caching.
  • The Background fetch tab lets you record activity from the Background Fetch API for up to three days.
  • The Background sync tab lets you record activity from the Background Sync API for up to three days.
  • The Bounce tracking mitigations tab lets you identify and delete the state of sites that appear to perform cross-site tracking using the bounce tracking technique.
  • The Notifications tab lets you record push messages for up to three days.
  • The Payment handler tab lets you record Payment Handler events for up to three days.
  • The Periodic background sync tab lets you record key events for up to three days in the periodic background sync lifecycle, such as registering for sync, performing a background sync, and unregistering.
  • The Speculative loads tab lets you debug Speculative Loads. It shows the speculative status, rule sets, and speculative loading attempts.
  • The Push messaging tab lets you record push messages for up to three days and logs them.
  • The Reporting API tab monitors your site and reports deprecated API calls and security violations.

Frames: Divides pages and resources into multiple views, and displays relevant information, such as Security & Isolation, Content Security Policy, API availability, and more.

Open the Application panel

To open the Application panel:

  1. Open DevTools.
  2. Open the Command menu by pressing:
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P Command Menu with
  3. Start typing application, select Show Application, and press Enter. DevTools displays the Application panel at the top of your DevTools window.

Alternatively, you can open the Application panel in the following ways:

  • In the action bar at the top, click More panels and select Application from the drop-down list.
  • In the top right corner, select More options > More tools > Application.