Debug Progressive Web Apps (PWAs)
Use the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.
This article only discusses the Progressive Web App features of the Application panel. For help on the other panes in the Application panel, see View the resource files that make up a webpage and View and edit local storage.
See also Overview of Progressive Web Apps (PWAs).
Use the Manifest pane to inspect your web app manifest and trigger Add to Homescreen events.
Use the Service Workers pane for a whole range of service-worker-related tasks, like unregistering or updating a service, emulating push events, going offline, or stopping a service worker.
View your service worker cache from the Cache Storage pane.
Unregister a service worker and clear all storage and caches with a single button click from the Storage pane.
Web app manifest
If you want your users to be able to add your app to their mobile homescreens, you need a web app manifest. The manifest defines how the app appears on the homescreen, where to direct the user when launching from homescreen, and what the app looks like on launch.
After you have your manifest set up, you can use the Manifest pane of the Application panel to inspect it.
- To look at the manifest source, click the link below App Manifest label (
https://airhorner.com/manifest.jsonin the previous figure).
The Identity and Presentation sections just display fields from the manifest source in a more user-friendly display.
The Icons section displays every icon that you've specified.
Service workers are a fundamental technology in the future web platform. They are scripts that the browser runs in the background, separate from a web page. The scripts allow you to access features that without the need of a web page or user interaction, like push notifications, background sync, and offline experiences.
The Service Workers pane in the Application panel is the main place in DevTools to inspect and debug service workers.
If a service worker is installed to the currently open page, then it is listed on this pane. For example, in the previous figure, there is a service worker installed for the scope of
The Offline checkbox puts DevTools into offline mode. This is equivalent to the offline mode available from the Network tool, or the
Go offlineoption in the Command Menu.
The Update on reload checkbox forces the service worker to update on every page load.
The Bypass for network checkbox bypasses the service worker and forces the browser to go to the network for requested resources.
The Update button performs a one-time update of the specified service worker.
The Push button emulates a push notification without a payload (also known as a tickle).
The Sync button emulates a background sync event.
The Unregister button unregisters the specified service worker. Check out Storage for a way to unregister a service worker and wipe storage and caches with a single button click.
The Source line tells you when the currently running service worker was installed. The link is the name of the source file of the service worker. Choosing on the link sends you to the source of the service worker.
The Status line tells you the status of the service worker. The ID number next to the green status indicator (
#36in previous figure) is for the currently active Service Worker. Next to the status, a start button (if the service worker is stopped) or a stop button (if the service worker is running) is displayed. Service workers are designed to be stopped and started by the browser at any time. Explicitly stopping your service worker using the stop button may simulate that. Stopping your service worker is a great way to test how your code behaves when the service worker starts back up again. It frequently reveals bugs due to faulty assumptions about persistent global state.
The Clients line tells you the origin that the service worker is scoped to. The focus button is mostly useful when you've enabled the show all checkbox. When that checkbox is enabled, all registered service workers are listed. If you click the focus button next to a service worker that is running in a different tab, Microsoft Edge focuses on that tab.
If the service worker causes any errors, a new label called Errors shows up.
Service worker caches
The Cache Storage pane provides a read-only list of resources that have been cached using the (service worker) Cache API.
The first time you open a cache and add a resource to it, DevTools may not detect the change. Refresh the page and to display the cache.
If you have two or more caches open, the caches are displayed under the Cache Storage dropdown list, as shown in the following screenshot.
Some responses within the Cache Storage pane may be flagged as being "opaque". This refers to a response retrieved from a different origin, like from a CDN or remote API, when CORS isn't enabled.
In order to avoid leakage of cross-domain information, significant padding is added to the size of an opaque response used for calculating storage quota limits (for example whether a
QuotaExceeded exception is thrown) and reported by the
The details of this padding vary from browser to browser, but for Microsoft Edge, this means that the minimum size that any single cached opaque response contributes to the overall storage usage is approximately 7 megabytes. Remember the padding when determining how many opaque responses you want to cache, since you may easily exceed storage quota limitations much sooner than you otherwise expect based on the actual size of the opaque resources.
The Storage pane is a very useful feature when developing progressive web apps. This pane lets you unregister service workers and clear all caches and storage with a single button click.
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
This work is licensed under a Creative Commons Attribution 4.0 International License.
Submit and view feedback for