Service Worker improvements
This article teaches you about improvements to service workers and the network requests that pass through each one. The service worker improvements are in the Network, Application, and Sources tools. The improvements include the following tasks.
- Debug based on Service Worker timelines.
- The start of a request and duration of the bootstrap.
- Update to Service worker registration.
- The runtime of a request using the fetch event handler.
- The runtime of all fetch events for loading a client.
- Explore the runtime details of fetch event handlers, install event handlers, and activate event handlers.
- Step into and out of fetch event handler with page script information.
The experiences span three different developer tools.
- The Network tool. Choose a network request that runs through a service worker and access the corresponding timeline of the service worker in the Timing tool.
- The Application tool. To debug the service workers, navigate to the Service Workers tool.
- The Sources tool. Access page script information when stepping into fetch event handlers.
To access the service worker debugging features in the Network tool, complete one of the following actions.
- Access directly in the Network tool.
- Started in the Application tool.
To make request routing easier to visualize, timelines now display the service worker start-up and the
respondWith fetch events. To debug and visualize a network request that passed through a service worker, complete the following actions.
- Choose the network request that went through a service worker.
- Open the Timing tool.
To learn more about the
respondWith fetch events, choose the dropdown arrow to the left of the
respondWith. To find more details about the Original Request and Response Received, use the corresponding dropdown arrows.
Service worker update timeline
The Microsoft Edge DevTools team added a timeline in the Application tool to reflect the update lifecycle of the service worker. It displays the installation and activation events. Each of the events has a corresponding dropdown arrow to give you more details.
Request routing and fetch events
You may now access the service worker timelines through the Network tool in the console drawer. The feature benefits performance, minimizes UI duplication, and creates a more comprehensive debugging experience.
- Open the service worker you are debugging.
- Choose the Network button to open up the request routing experience.
- Use the respondWith dropdowns for fetch event request and response information.
The Network tool displays the network requests that went through the service worker you are debugging. The automatic filter is a way to narrow down your exploration.
To find more stack information, set a break point in the fetch handler. The details lead to where the resource is requested in the page script. When the debugger pauses inside a fetch handler, a combined stack information is displayed in the panel to the right. After that, you may move around in the stack frames.
The Microsoft Edge DevTools team plans to further develop the cache detail and are investigating more ways to improve the service worker debugging experience for Progressive Web Application developers.
Getting in touch with the Microsoft Edge DevTools team
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Send your feedback using the Send Feedback icon or select
I(Windows, Linux) or
I(macOS) in DevTools.
- Tweet at @EdgeDevTools.
- Submit a suggestion to The Web We Want.
- To file bugs about this article, use the following Feedback section.