Main to live, Apr. 1, 2026

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).
 
 
 <!-- ------------------------------ -->

microsoft-edge/devtools/network/reference.md

@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 07/17/2025
+ms.date: 03/25/2026
 ---
 <!-- Copyright Kayce Basques
 
@@ -26,12 +26,12 @@ ms.date: 07/17/2025
 
 <!-- for each png, decide whether to create screenshot -->
 
-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:**
 <!-- https://github.com/captainbrosset/WebToc -->
-
 * [Record network requests](#record-network-requests)
    * [Stop recording network requests](#stop-recording-network-requests)
    * [Clear requests](#clear-requests)
@@ -84,6 +84,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 +93,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 +1358,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 +1371,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 +1380,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**.  When the request is handled by a service worker, **Startup** is the time it took for the service worker to start.
+
+* **respondWith**.  When the request is handled by a service worker, **respondWith** is the time that it took for the service worker to run the `fetchEvent.respondWith()` callback.
+
+* **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).
+
+* **Request sent**. The request is being sent.
+
+* **ServiceWorker Preparation**. The browser is starting up the service worker.
+
+* **Request to ServiceWorker**. The request is being sent to the service worker.
+
+* **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.
+
+* **Receiving Push**. The browser is receiving data for this response via HTTP/2 Server Push.
+
+* **Reading Push**. The browser is reading the local data that was previously received.
+
+
+<!-- ---------- -->
+###### Analyze a service worker request routing
+<!--
+#### Display the timing breakdown of a service worker request
+-->
+
+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.
+
+To display the timing breakdown of a service worker request:
+
+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.
 
-- **Stalled**. The request could be stalled for any of the reasons described in **Queueing**.
+1. Reload the page.
 
-- **DNS Lookup**. The browser is resolving the IP address for the request.
+1. In the list of requests, select a network request that went through a service worker file.  For example, select **about.css**.
 
-- **Initial connection**. The browser is establishing a connection, including TCP handshakes and retries and negotiating a Secure Socket Layer (SSL).
+   The sidebar appears.
 
-- **Proxy negotiation**. The browser is negotiating the request with a [proxy server](https://wikipedia.org/wiki/Proxy_server).
+1. In the sidebar, click the **Timing** tab:
 
-- **Request sent**. The request is being sent.
+   ![The Timing tab within the Network tool](./reference-images/timing-tab.png)
 
-- **ServiceWorker Preparation**. The browser is starting up the service worker.
+   The **Service Worker** section displays timing information about the **Startup** and **respondWith** phases.
 
-- **Request to ServiceWorker**. The request is being sent to the service worker.
+1. Click the expander arrow on the **respondWith** section:
 
-- **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.
+   ![The expanded respondWith section](./reference-images/respondwith-expanded.png)
 
-- **Content Download**. The browser is receiving the response.
+1. Within the **respondWith** section, click the expander arrow on **Original Request**:
 
-- **Receiving Push**. The browser is receiving data for this response via HTTP/2 Server Push.
+   ![The fully expanded respondWith section](./reference-images/respondwith-expanded-fully.png)
 
-- **Reading Push**. The browser is reading the local data that was previously received.
+1. On **Response Received**, click the expander arrow.
 
 
 <!-- ------------------------------ -->