diff --git a/microsoft-edge/devtools/network/index.md b/microsoft-edge/devtools/network/index.md index e1991a1511..4460f41af5 100644 --- a/microsoft-edge/devtools/network/index.md +++ b/microsoft-edge/devtools/network/index.md @@ -28,7 +28,7 @@ Use the **Network** tool to make sure the resources your webpage needs to run ar This is a step-by-step tutorial walkthrough of the **Network** tool, for inspecting network activity for a page. -For an overview of the network-related DevTools features, see [Network features reference](reference.md). +For an overview of the network-related DevTools features, see [Network features reference](./reference.md). diff --git a/microsoft-edge/devtools/network/reference-images/respondwith-expanded-fully.png b/microsoft-edge/devtools/network/reference-images/respondwith-expanded-fully.png new file mode 100644 index 0000000000..38730666bc Binary files /dev/null and b/microsoft-edge/devtools/network/reference-images/respondwith-expanded-fully.png differ diff --git a/microsoft-edge/devtools/network/reference-images/respondwith-expanded.png b/microsoft-edge/devtools/network/reference-images/respondwith-expanded.png new file mode 100644 index 0000000000..109f268b80 Binary files /dev/null and b/microsoft-edge/devtools/network/reference-images/respondwith-expanded.png differ diff --git a/microsoft-edge/devtools/service-workers/index-images/sw-network-timeline.png b/microsoft-edge/devtools/network/reference-images/sw-network-timeline.png similarity index 100% rename from microsoft-edge/devtools/service-workers/index-images/sw-network-timeline.png rename to microsoft-edge/devtools/network/reference-images/sw-network-timeline.png diff --git a/microsoft-edge/devtools/network/reference-images/timing-tab.png b/microsoft-edge/devtools/network/reference-images/timing-tab.png new file mode 100644 index 0000000000..c5a7b7bc95 Binary files /dev/null and b/microsoft-edge/devtools/network/reference-images/timing-tab.png differ diff --git a/microsoft-edge/devtools/network/reference.md b/microsoft-edge/devtools/network/reference.md index 8314cbf032..175e62884b 100644 --- a/microsoft-edge/devtools/network/reference.md +++ b/microsoft-edge/devtools/network/reference.md @@ -26,12 +26,10 @@ ms.date: 07/17/2025 -The **Network** tool has the following features, to inspect network activity for a webpage. For a step-by-step walkthrough and introduction to the **Network** tool, see [Inspect network activity](index.md). - +The **Network** tool has the following features, to inspect network activity for a webpage. For a step-by-step walkthrough and introduction to the **Network** tool, see [Inspect network activity](./index.md). **Detailed contents:** - * [Record network requests](#record-network-requests) * [Stop recording network requests](#stop-recording-network-requests) * [Clear requests](#clear-requests) @@ -84,6 +82,7 @@ The **Network** tool has the following features, to inspect network activity for * [Display the timing breakdown of a request](#display-the-timing-breakdown-of-a-request) * [Preview a timing breakdown](#preview-a-timing-breakdown) * [Timing breakdown phases explained](#timing-breakdown-phases-explained) + * [Analyze a service worker request routing](#analyze-a-service-worker-request-routing) * [Display initiators and dependencies](#display-initiators-and-dependencies) * [Display load events](#display-load-events) * [Display the total number of requests](#display-the-total-number-of-requests) @@ -92,6 +91,7 @@ The **Network** tool has the following features, to inspect network activity for * [Display the uncompressed size of a resource](#display-the-uncompressed-size-of-a-resource) * [Export requests data](#export-requests-data) * [Save all network requests to a HAR file](#save-all-network-requests-to-a-har-file) + * [Import a HAR file into DevTools for analysis](#import-a-har-file-into-devtools-for-analysis) * [Copy network requests to the clipboard](#copy-network-requests-to-the-clipboard) * [Copy formatted response JSON to the clipboard](#copy-formatted-response-json-to-the-clipboard) * [Copy property values from network requests to your clipboard](#copy-property-values-from-network-requests-to-your-clipboard) @@ -1356,7 +1356,7 @@ To display the timing breakdown of a request: For a faster way to access the data, see [Preview a timing breakdown](#preview-a-timing-breakdown). -For more information about each of the phases that may be displayed in the **Timing** panel, see [Timing breakdown phases explained](#timing-breakdown-phases-explained). +For information about each of the phases that might be displayed in the **Timing** panel, see [Timing breakdown phases explained](#timing-breakdown-phases-explained), below. @@ -1369,7 +1369,7 @@ The **Waterfall** column is off by default. To turn on the **Waterfall** column ![Previewing the timing breakdown of a request](./reference-images/resources-waterfall-hover.png) -To view the data without hovering, see the top of the present section, [Display the timing breakdown of a request](#display-the-timing-breakdown-of-a-request). +To view the data without hovering, see [Display the timing breakdown of a request](#display-the-timing-breakdown-of-a-request), above. @@ -1378,32 +1378,77 @@ To view the data without hovering, see the top of the present section, [Display Each of these phases may appear in the **Timing** tab: -- **Queueing**. The browser queues requests when any of the following are true - - There are higher priority requests. - - There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only. - - The browser is briefly allocating space in the disk cache. +* **Queueing**. The browser queues requests when any of the following are true + * There are higher priority requests. + * There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only. + * The browser is briefly allocating space in the disk cache. + +* **Stalled**. The request could be stalled for any of the reasons described in **Queueing**. + +* **Startup**. + +* **respondWith**. + +* **DNS Lookup**. The browser is resolving the IP address for the request. + +* **Initial connection**. The browser is establishing a connection, including TCP handshakes and retries and negotiating a Secure Socket Layer (SSL). + +* **Proxy negotiation**. The browser is negotiating the request with a [proxy server](https://wikipedia.org/wiki/Proxy_server). -- **Stalled**. The request could be stalled for any of the reasons described in **Queueing**. +* **Request sent**. The request is being sent. -- **DNS Lookup**. The browser is resolving the IP address for the request. +* **ServiceWorker Preparation**. The browser is starting up the service worker. -- **Initial connection**. The browser is establishing a connection, including TCP handshakes and retries and negotiating a Secure Socket Layer (SSL). +* **Request to ServiceWorker**. The request is being sent to the service worker. -- **Proxy negotiation**. The browser is negotiating the request with a [proxy server](https://wikipedia.org/wiki/Proxy_server). +* **Waiting (TTFB)**. The browser is waiting for the first byte of a response. TTFB stands for _Time To First Byte_. This timing includes one round trip of latency and the time the server took to prepare the response. -- **Request sent**. The request is being sent. +* **Content Download**. The browser is receiving the response. -- **ServiceWorker Preparation**. The browser is starting up the service worker. +* **Receiving Push**. The browser is receiving data for this response via HTTP/2 Server Push. -- **Request to ServiceWorker**. The request is being sent to the service worker. +* **Reading Push**. The browser is reading the local data that was previously received. -- **Waiting (TTFB)**. The browser is waiting for the first byte of a response. TTFB stands for _Time To First Byte_. This timing includes one round trip of latency and the time the server took to prepare the response. -- **Content Download**. The browser is receiving the response. + +###### Analyze a service worker request routing + + +To visualize request routing, timelines display the service worker `Startup` event and the `respondWith` fetch events. You can debug and visualize a network request that passed through a service worker. -- **Receiving Push**. The browser is receiving data for this response via HTTP/2 Server Push. +To display the timing breakdown of a service worker request: -- **Reading Push**. The browser is reading the local data that was previously received. +1. Go to a page that uses a service worker, such as the [pwamp](https://microsoftedge.github.io/Demos/pwamp/) demo page, in a new window or tab. + +1. Right-click the page, and then select **Inspect**. + + DevTools opens. + +1. Select the **Network** tool. + +1. Reload the page. + +1. In the list of requests, select a network request that went through a service worker file. For example, select **about.css**. + + The sidebar appears. + +1. In the sidebar, click the **Timing** tab: + + ![The Timing tab within the Network tool](./reference-images/timing-tab.png) + + The **Service Worker** section displays timing information about the **Startup** and **respondWith** phases. + +1. Click the expander arrow on the **respondWith** section: + + ![The expanded respondWith section](./reference-images/respondwith-expanded.png) + +1. Within the **respondWith** section, click the expander arrow on **Original Request**: + + ![The fully expanded respondWith section](./reference-images/respondwith-expanded-fully.png) + +1. Click the expander arrow on **Response Received**. @@ -1741,3 +1786,6 @@ Demo webpages: [![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). + + + diff --git a/microsoft-edge/devtools/service-workers/index-images/sw-application-timeline.png b/microsoft-edge/devtools/progressive-web-apps/index-images/sw-application-timeline.png similarity index 100% rename from microsoft-edge/devtools/service-workers/index-images/sw-application-timeline.png rename to microsoft-edge/devtools/progressive-web-apps/index-images/sw-application-timeline.png diff --git a/microsoft-edge/devtools/progressive-web-apps/index.md b/microsoft-edge/devtools/progressive-web-apps/index.md index 73bc8f3983..c55f7aa7ae 100644 --- a/microsoft-edge/devtools/progressive-web-apps/index.md +++ b/microsoft-edge/devtools/progressive-web-apps/index.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge ms.subservice: devtools -ms.date: 09/12/2023 +ms.date: 03/13/2026 --- + +## Service worker update timeline + + + + + +The **Application** tool helps you work with service workers and the network requests that pass through each service worker. + +For example, the following tasks are supported: + +* 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](https://developer.mozilla.org/docs/Web/API/FetchEvent) 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, in the **Sources** tool. + +Features for working on service workers are in the following tools: + +* The **Network** tool: + + * Select a network request that runs through a service worker and access the corresponding timeline of the service worker in the **Timing** tool within the **Network** tool. + +* The **Application** tool: + + * To debug a service worker, use the **Service workers** page in the **Application** tool. + +* The **Sources** tool: + + * Access page script information when stepping into fetch event handlers. + + + +#### Timeline + +![Application view](./index-images/sw-application-timeline.png) + +A timeline in the **Application** tool reflects the update lifecycle of the service worker. This timeline displays the installation and activation events. + +Each of the events have a corresponding dropdown arrow to give you more details. + +See also: +* [Service Worker API](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) - at MDN, about service workers. + + + +#### Request routing and fetch events + +You can access service worker timelines through the **Network** tool. This feature benefits performance, minimizes UI duplication, and creates a comprehensive debugging experience. + +To access the service worker timelines: + +1. Open a service worker. + +1. Click the **Network requests** button, in the **Application** tool. + + The **Timing** tab opens within the **Network** tool, showing information about request routing, filtering on `is:service-worker-intercepted` in the **Filter** text box. + +1. Use the **respondWith** dropdown arrows 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. + +See also: +* [Inspect network activity](./index.md) + + > [!NOTE] > Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools/service-workers/index-images/sw-sources.png b/microsoft-edge/devtools/service-workers/index-images/sw-sources.png deleted file mode 100644 index f19eb79573..0000000000 Binary files a/microsoft-edge/devtools/service-workers/index-images/sw-sources.png and /dev/null differ diff --git a/microsoft-edge/devtools/service-workers/index.md b/microsoft-edge/devtools/service-workers/index.md deleted file mode 100644 index ca0bb36766..0000000000 --- a/microsoft-edge/devtools/service-workers/index.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Service worker improvements -description: How to use each service worker improvement in the Network, Application, and Sources tools in Microsoft Edge DevTools. -author: MSEdgeTeam -ms.author: msedgedevrel -ms.topic: article -ms.service: microsoft-edge -ms.subservice: devtools -ms.date: 02/19/2021 ---- -# Service worker improvements - -The **Network**, **Application**, and **Sources** tools have been improved to help you work with [service workers](https://developer.mozilla.org/docs/Web/API/Service_Worker_API) and the network requests that pass through each service worker. - -The improvements simplify 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](https://developer.mozilla.org/docs/Web/API/FetchEvent) 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](#sources). - -The improvements span the following tools: - -* The [Network](#network) tool. Select a network request that runs through a service worker and access the corresponding timeline of the service worker in the **Timing** tool. - -* The [Application](#application) tool. To debug service workers, use the **Service workers** page. - -* The [Sources](#sources) tool. Access page script information when stepping into fetch event handlers. - - - -## Network - -![Service worker timeline in the Network tool](./index-images/sw-network-timeline.png) - -You can access the service worker debugging features in the **Network** tool in either of the following ways: - -* Directly in the **Network** tool. -* Started in the **Application** tool. - - - -#### Request routing - -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: - -1. Select the network request that went through a service worker. -1. Open the **Timing** tool. - - - -#### Fetch events - -To learn more about the `respondWith` fetch events, click the dropdown arrow to the left of the `respondWith`. To see more details about the **Original Request** and **Response Received**, click the corresponding dropdown arrows. - - - -## Application - -![Application view](./index-images/sw-application-timeline.png) - - - -#### 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. This timeline displays the installation and activation events. Each of the events have a corresponding dropdown arrow to give you more details. - - - -#### Request routing and fetch events - -You can now access the service worker timelines through the **Network** tool. This feature benefits performance, minimizes UI duplication, and creates a more comprehensive debugging experience. - -1. Open the service worker that you're debugging. - -1. Click the **Network** button to open the [request routing experience](#network). - -1. Use the **respondWith** dropdown arrows 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. - -See also [Application tool, to manage storage](../storage/application-tool.md). - - - -## Sources - -![The DOM tree](./index-images/sw-sources.png) - -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 can move around in the stack frames. - - - -#### Future work - -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 (PWA)](https://developer.mozilla.org/docs/Web/Progressive_web_apps) developers. diff --git a/microsoft-edge/devtools/sources/index.md b/microsoft-edge/devtools/sources/index.md index 67f6e2e58d..80cd994b6b 100644 --- a/microsoft-edge/devtools/sources/index.md +++ b/microsoft-edge/devtools/sources/index.md @@ -27,7 +27,6 @@ Use the **Sources** tool to view, modify, and debug front-end JavaScript code, a **Detailed contents:** - * [The Navigator, Editor, and Debugger panes](#the-navigator-editor-and-debugger-panes) * [Using the Navigator pane to select files](#using-the-navigator-pane-to-select-files) * [Using the Page tab to explore resources that construct the current webpage](#using-the-page-tab-to-explore-resources-that-construct-the-current-webpage) diff --git a/microsoft-edge/devtools/storage/application-tool.md b/microsoft-edge/devtools/storage/application-tool.md index d446c2009c..eb87bf5725 100644 --- a/microsoft-edge/devtools/storage/application-tool.md +++ b/microsoft-edge/devtools/storage/application-tool.md @@ -52,9 +52,3 @@ The **Application** tool has the following pages, listed on the left: * top To interpret the **Storage** > **Usage** section in the **Application** tool, see [Quota usage](../progressive-web-apps/index.md#quota-usage) in _Debug a Progressive Web App (PWA)_. - - - - diff --git a/microsoft-edge/devtools/whats-new/2020/08/devtools.md b/microsoft-edge/devtools/whats-new/2020/08/devtools.md index b82ece1c8d..dfc7d33ddf 100644 --- a/microsoft-edge/devtools/whats-new/2020/08/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/08/devtools.md @@ -329,7 +329,7 @@ Previously DevTools displayed a list nested under the **Application** tool > **S Chromium issue: [#807440](https://crbug.com/807440) See also: -* [Service worker improvements](../../../service-workers/index.md) +* [Synchronize and update a PWA in the background](../../../../progressive-web-apps/how-to/background-syncs.md) * [Application tool, to manage storage](../../../storage/application-tool.md) diff --git a/microsoft-edge/devtools/whats-new/2020/11/devtools.md b/microsoft-edge/devtools/whats-new/2020/11/devtools.md index 698a891ac7..d276dc0014 100644 --- a/microsoft-edge/devtools/whats-new/2020/11/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/11/devtools.md @@ -117,12 +117,13 @@ See also: -The following new features in the **Network** tool, **Application** tool, and **Sources** tool help you build your [PWA](../../../../progressive-web-apps/index.md). Use the following features when you have difficulty debugging your service worker. +The following new features in the **Network** tool, **Application** tool, and **Sources** tool help you build your progressive web application (PWA). Use the following features when you have difficulty debugging your service worker. The routing of a request displays the `startup` and `fetch` events based on the network requests that run through service workers. The timelines are accessed from either the **Application** or **Network** tool. The timelines help when you are having trouble with service workers and want to see if something is wrong with the `startup` or `fetch` event. See also: -* [Service worker improvements](../../../service-workers/index.md) +* [Overview of Progressive Web Apps (PWAs)](../../../../progressive-web-apps/index.md) +* [Synchronize and update a PWA in the background](../../../../progressive-web-apps/how-to/background-syncs.md) @@ -151,7 +152,7 @@ To display additional context when debugging a service worker: See also: * [Application tool, to manage storage](../../../storage/application-tool.md) -* [Service worker improvements](../../../service-workers/index.md) +* [Synchronize and update a PWA in the background](../../../../progressive-web-apps/how-to/background-syncs.md) @@ -168,7 +169,7 @@ In the **Network** tool, you can debug network requests that are run by service See also: * [Display the timing breakdown of a request](../../../network/reference.md#display-the-timing-breakdown-of-a-request) in _Network features reference_. -* [Service worker improvements](../../../service-workers/index.md) +* [Synchronize and update a PWA in the background](../../../../progressive-web-apps/how-to/background-syncs.md) @@ -186,7 +187,7 @@ In the following figure, the reference is selected, and has opened the initiator See also: * [View the call stack](../../../javascript/reference.md#view-the-call-stack) in _JavaScript debugging features_ -* [Service worker improvements](../../../service-workers/index.md) +* [Synchronize and update a PWA in the background](../../../../progressive-web-apps/how-to/background-syncs.md) diff --git a/microsoft-edge/devtools/whats-new/2021/04/devtools.md b/microsoft-edge/devtools/whats-new/2021/04/devtools.md index 992dd3cb5c..4d581cc7ff 100644 --- a/microsoft-edge/devtools/whats-new/2021/04/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/04/devtools.md @@ -99,7 +99,7 @@ For real-time updates on this feature in the Chromium open-source project, see I See also: * [Updating your service worker](https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers#updating_your_service_worker) in _Using Service Workers_ at MDN. -* [Service worker improvements](../../../service-workers/index.md) - DevTools debugging tools for Progressive Web Apps and service workers. +* [Synchronize and update a PWA in the background](../../../../progressive-web-apps/how-to/background-syncs.md) diff --git a/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md b/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md index fccc68eb68..0e7c91d46f 100644 --- a/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md +++ b/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md @@ -75,7 +75,7 @@ If you don't have the **Fulfilled by** column, right-click the table headers in See also: * [Filter requests by properties](../../../network/reference.md#display-a-log-of-requests) in _Network features reference_. -* [Service worker improvements](../../../service-workers/index.md). +* [Synchronize and update a PWA in the background](../../../../progressive-web-apps/how-to/background-syncs.md) For the history of this feature, see [Issue #16](https://github.com/MicrosoftEdge/DevTools/issues/16). diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 7030939c85..9699bdf0e2 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -606,10 +606,6 @@ - name: View page resources href: ./devtools/resources/index.md displayName: Command Menu, Network tool, Sources tool, Application tool, Network tool - - - name: Service worker improvements - href: ./devtools/service-workers/index.md - displayName: Network tool, Application tool, Sources tool # ----------------------------------------------------------------------------- - name: Performance tool # = upstream TOC bucket "Performance" items: diff --git a/redirects/.openpublishing.redirection.devtools.json b/redirects/.openpublishing.redirection.devtools.json index 598fdd793d..e489b22c08 100644 --- a/redirects/.openpublishing.redirection.devtools.json +++ b/redirects/.openpublishing.redirection.devtools.json @@ -688,7 +688,12 @@ }, { "source_path": "../microsoft-edge/devtools-guide-chromium/service-workers/index.md", - "redirect_url": "/microsoft-edge/devtools/service-workers/index", + "redirect_url": "/microsoft-edge/progressive-web-apps/how-to/background-syncs", + "redirect_document_id": false + }, + { + "source_path": "../microsoft-edge/devtools/service-workers/index.md", + "redirect_url": "/microsoft-edge/progressive-web-apps/how-to/background-syncs", "redirect_document_id": false }, {