Network

Use the Network panel to monitor, inspect and profile the requests and responses sent over the wire. With it, you can:

The Microsoft Edge F12 DevTools Network panel

Network summary

When you open F12 DevTools, network profiling is turned on by default. All the network traffic from your active browser tab is recorded in the network summary list, even while you are working in a different F12 DevTools panel than Network.

In-progress network profiling indicator

Toolbar

The toolbar provides controls for profiling and filtering the network activity of your page.

Network profiler toolbar

  1. Start / Stop profiling session: By default, network profiling is turned on, and network traffic will be logged in the Network profiler list. You can turn off network capture with the Stop (Ctrl+E) button.

  2. Export as HAR: You can save the current network profiling session (Ctrl+S) as a JSON-formatted HTTP Archive (HAR) file.

  3. Content type filter: Filter the network request list by specific content requests (Documents, Style sheets, Images, Scripts, Media, Fonts, XHR, Other). By default all content types are shown.

  4. Find: Filter (Ctrl+F) the network request list by entry names (resource paths) containing a specified search string.

  5. Always refresh from server: Depressing this button will force page resources to load from the network rather than the browser cache. You can refresh the page from network a single time by pressing Ctrl+F5.

  6. Clear buttons

    • Clear cache: Removes all resources stored in the browser cache (and emulates a first-time experience loading the page).
    • Clear cookies: Removes all cookies for the given domain (and emulates a first-time experience of the site).
    • Clear entries on navigate: Recorded traffic is cleared upon page navigation. This is turned on by default.
    • Clear session: Clears all network request entries from the Network summary list.

Network request list

All network traffic is recorded to a list (until cleared upon navigation, manually cleared, or F12 DevTools are closed). Clicking on any entry will open a more detailed view of the request.

Network request list

The network request list includes the following info:

Column Description
Name Name and URL path of the request
Protocol Type of protocol for the request (such as HTTPS, HTTP/2)
Method HTTP method used for the request
Result HTTP response status code
Content type Type of media requested (MIME type)
Received Size of the response as delivered by the server (not calculated for cached responses)
Time Time to load the server response (not calculated for cached responses)
Initiator Subsystem responsible for initiating the request (such as Parser, Redirect, Script, Other)
Timeline Visual timeline for the network events of the request (such as Stalled, Resolving(DNS), Connecting(TCP), SSL, Sending, Waiting(TTFB), Downloading). Hovering over the chart provides the more granular breakdown of network network timings).

Summary bar

The bar at the bottom of Network panel summarizes the total number of HTTP network errors, requests, data transfered, and load times during the network profiling session (i.e., since F12 DevTools were opened and recording network traffic).

Network summary bar

Elapsed time means the time between the start of the profiling session and when the last resource was downloaded from the network. Resources fetched from the browser cache do not accrue time to this number.

DOM load time means the time between the start of the profiling session and when the DOMContentLoaded event was fired to indicate that the structure of the page document has been loaded and parsed (though not necessarily any stylesheets, images or subframes).

Page load time time means the time between the start of the profiling session and when the load event was fired to indicate that the page document (and all its resources) has been fully loaded.

Request details

Clicking on any entry in the Network summary list will open the Request details pane with further information in each of the following tabs.

Network request details pane

Headers

Displays the HTTP headers sent to and received from the server. Right-click on any header entry to copy it (Ctrl+C) to the clipboard. You can also multi-select entries by holding down the Shift key or select all (Ctrl+A).

Body

Displays the body data (if available) of the request and response payloads.

Image content is displayed with dimensions and size data.

Text content appears in a (read-only) editor with options to format minified content with Pretty print and/or Word wrap for easier readability.

Body tab of the request details pane

Parameters

Displays query string parameters for GET requests. While the parameters of POST requests are sent in the headers, GET requests include them in the URL. They're broken out here for easier reading.

Right-click on any row to copy it (Ctrl+C) to the clipboard. You can also multi-select entries by holding down the Shift key or select all (Ctrl+A).

Cookies

Displays cookies that are sent or received as key/value pairs.

Right-click on any row to copy it (Ctrl+C) to the clipboard. You can also multi-select entries by holding down the Shift key or select all (Ctrl+A).

You can clear the stored cookies for the given domain from the Toolbar (Clear cookies button).

Timings

The Timings tab provides a timeline of network events involved in the loading of the selected resource. This is similar to the information found in the Timeline column of the Network request list, but also includes the events leading up to the request being sent over the wire, such as time spent waiting (Stalled) in the request queue, DNS resolution, and establishing the TCP connection.

Timings tab of the request details pane

Redirections to/from other resources are noted, and clicking on the link will set focus to that resource in the network request details pane.

Resouces loaded from the cache are not affected by network latency, so no network Timings chart will display.

Redirected resource loaded from the cache

Here are the different network events you might see for a given resource, in chronological order:

Stalled

Time spent waiting for an available network connection in the request queue. For HTTP 1.0/1.1, Microsoft Edge allows a maximum of six (6) simultaneous TCP connections per hostname.

Resolving (DNS)

Time spent looking up the IP address for the hostname of the resource in the DNS (Domain Name System).

Connecting (TCP)

Time spent establishing the TCP (Transmission Control Protocol) connection.

SSL

Time spent negotiating a SSL (Secure Sockets Layer) connection with the proxy server for the host.

Sending

Time spent sending the resource request.

Waiting (TTFB)

Time spent waiting for the first byte of the response from the host server ("time to first byte", or TTFB).

Downloading

Time spent reading the response from the server.

Shortcuts

Action Shortcut
Start / Stop profiling session Ctrl + E
Export as HAR Ctrl + S
Find Ctrl + F
Copy Ctrl + C