Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
3928ddf
todo
mikehoffms Nov 7, 2025
5e25056
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Nov 14, 2025
2f80b97
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Nov 26, 2025
0c25c3d
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Dec 15, 2025
4610eeb
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Dec 18, 2025
ab4092e
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Dec 19, 2025
d97c936
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Jan 14, 2026
97e4044
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Jan 16, 2026
f6c8e77
Update service worker docs and references
mikehoffms Jan 23, 2026
b4bcc7c
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Feb 12, 2026
5e70990
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Feb 19, 2026
169c068
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Mar 10, 2026
d3f72b2
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Mar 11, 2026
990bb74
dissolve .md
mikehoffms Mar 13, 2026
5ade106
design plan
mikehoffms Mar 13, 2026
a153c09
redirect
mikehoffms Mar 13, 2026
c7ca6e9
inc rvw
mikehoffms Mar 13, 2026
b37d36a
date
mikehoffms Mar 13, 2026
c7934da
linkfix
mikehoffms Mar 13, 2026
4f0868a
update local toc
mikehoffms Mar 13, 2026
d10cdc6
Merge branch 'main' into user/mikehoffms/serv-work
mikehoffms Mar 25, 2026
8cff841
Application tool
mikehoffms Mar 25, 2026
b2c4388
sync headings upstream
mikehoffms Mar 26, 2026
85d5d16
linkfix
mikehoffms Mar 26, 2026
d176dec
Cear
mikehoffms Mar 26, 2026
c38df3f
task orient
mikehoffms Mar 26, 2026
8fc901c
replace section
mikehoffms Mar 28, 2026
f70c5f3
fin inc cmts
mikehoffms Mar 30, 2026
a502509
Update microsoft-edge/devtools/progressive-web-apps/index.md
captainbrosset Mar 31, 2026
f18393c
See Also links
mikehoffms Apr 2, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion microsoft-edge/devtools/network/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).


<!-- ------------------------------ -->
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 67 additions & 20 deletions microsoft-edge/devtools/network/reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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)
Expand Down Expand Up @@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -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.


<!-- ---------- -->
Expand All @@ -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.


<!-- ---------- -->
Expand All @@ -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.


<!-- ------------------------------ -->
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading