Dale St. Marthe

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

Overview

TheApplication 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.

• TheManifest tab presents information frommanifest.json in a user-friendly way. It also displays errors and warnings, if any, in the corresponding section.
• TheService workers tab lets you inspect and debug service workers by emulating push events, updating a service, and more.
• TheStorage 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 andSession storage lists let you select an origin and edit the key-value pairs of the associated storage methods.
• TheIndexedDB list contains databases and lets you inspect object stores from the browser.
• TheCookies list lets you select an origin and edit the key-value pairs.
• Private state tokens andInterest groups let you inspect the correspondingtokens andgroups, if any.
• TheShared storage list lets you select an origin and inspect and edit associated key-value pairs.
• TheCache storage list contains available caches and lets you inspect, filter, and delete their resources.

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

• TheBack/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.
• TheBackground fetch tab lets you record activity from theBackground Fetch API for up to three days.
• TheBackground sync tab lets you record activity from theBackground Sync API for up to three days.
• TheBounce tracking mitigations tab lets you identify and delete the state of sites that appear to perform cross-site tracking using the bounce tracking technique.
• TheNotifications tab lets you record push messages for up to three days.
• ThePayment handler tab lets you record Payment Handler events for up to three days.
• ThePeriodic 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.
• TheSpeculative loads tab lets you debugSpeculative Loads. It shows the speculative status, rule sets, and speculative loading attempts.
• ThePush messaging tab lets you record push messages for up to three days and logs them.
• TheReporting 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 asSecurity & Isolation,Content Security Policy,API availability, and more.

Open the Application panel

To open theApplication panel:

1. Open DevTools.
2. Open theCommand menu by pressing:
   • macOS:Command+Shift+P
   • Windows, Linux, ChromeOS:Control+Shift+P
3. Start typingapplication, selectShow Application, and pressEnter. DevTools displays theApplication panel at the top of your DevTools window.

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

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