Analyzing your webpage's network traffic
Use the Network tool to view communication between the browser and server(s), inspect request and reply headers, see response codes, and debug AJAX.
Monitor your browser's communications
The Network tool in F12 developer tools helps you inspect page load times, responses to AJAX requests, and all network activity used to load and run modern webpages and applications.
Start with the top row
The top row of icons in the Network tool control the recording of network traffic and give you tools to provide better accuracy, manage your results, and search through the traffic you capture.
.png)
From left to right, the tools are:
- Enable/Disable network traffic capturing (F5/SHIFT+ F5) starts and stops the recording of network traffic.
- Export captured traffic saves the data you've recorded to an XML or CSV (comma separated value) format.
- Always refresh from server is a toggle switch with on and off states. When on, Internet Explorer 11 downloads all page elements from the remote server, not from the browser cache.
- Clear browser cache (CTRL + R) removes saved files from the browser's cache. Browsers commonly save page elements to disk and use them again for faster reloads. When you're trying to get the true measure of a page's load time, clearing the cache makes sure all elements are being downloaded from the network.
- Clear cookies ensures that all cookies related to the current domain are removed, so that you get the experience of loading the page for the first time.
- Clear entries on navigate is a toggle switch with on and off states. When in the off state, network traffic for a window or tab is recorded continuously as the browser moves from page to page. When in the on state, recorded traffic is cleared each time you navigate to a new page. This is turned on by default.
- Clear all entries clears all recorded network traffic from the tool.
- Traffic search lets you search for text strings throughout the captured traffic. Type your search text in the box and press ENTER. The network transaction detail containing the text is opened and the text is highlighted. To search for more occurrences of the text, you can place your cursor back in the text box and press ENTER or press F5.
By default, recorded traffic is shown in the Summary view, as seen here.
.png)
Reading and interpreting the data
The Network tool includes two views of network traffic. The Summary view gives a quick look at all captured info for a tab or webpage, and the Details view gives you details of each connection, such as request and response headers and detailed timing info. You can switch between views by using the Summary and Details links.
Summary view
The Summary view shows all network traffic for a page in a table. By default, the info is presented chronologically, but you can sort the table differently by clicking the header of any column. This table describes the type of info you can view.
| Column header | Description |
|---|---|
| URL | The requested URL. |
| Protocol | The connection protocol. For example, connections to a standard web server use HTTP, while encrypted connections generally use HTTPS. Internet Explorer supports a number of connection protocols. |
| Method | The HTTP method verb (for example, POST or GET). |
| Result | The HTTP response code. |
| Type | The type of content that's received. |
| Received | The total amount of data that's received, in bytes. |
| Taken | The total time elapsed to receive the content, in milliseconds. |
| Initiator | The type of browser action or DOM node that prompted the network request. Common initiators are page refreshes, linked images and stylesheets within pages, and XMLHttpRequest events. |
| Timings | A timeline of the network events. |
Details view
The Details view provides info about a specific request. To see the details, double-click an entry in the Summary view or click the Details link near the top of the tool.
.png)
You'll find this info in each tab of detailed view.
| Tab | Description |
|---|---|
| Request headers | Displays the request headers that are sent to the server. |
| Request body | Displays the request data sent to the server. For the majority of verbs, the body is blank. For a |
| Response headers | Displays the response headers received from the server. |
| Response body | Indicates the response data received from the server. If the response is an image, the image is shown. If the response is binary, a link to save the content to disk is shown. Otherwise, the response text is shown in a scrollable text area |
| Cookies | Indicates the cookies that are sent or received. There are eight columns in the Cookies tab.
Column headerDescription
Direction The cookie that is sent or received.
Key The identifier of the Key-Value pair.
Value The value of the Key-Value pair.
Expires The cookie expiry date.
Domain The cookie domain.
Path The cookie path.
Secure Indicates if the cookie is accessible only through Secure Hypertext Transfer Protocol (HTTPS) connections.
HTTP Only Indicates if the cookie is accessible only through HTTP (not JavaScript).
|
| Initiator | Summarizes the details of the Windows Internet Explorer download action. Actions can include user refresh, tokenization during source parsing, speculative download during HTML pre-parsing, navigation of a frame, and script initiated events such as an XMLHttpRequest. |
| Timings | Lists events and their corresponding times that are relevant to the request. The timing info is displayed as table and a graphical timeline. The following events are captured: Wait, Start, Request, Response, Gap, DOMContentLoaded, and Load. Clicking an event in the table or the timeline highlights it and shows an explanation of the event type. |
Limitations
IE11 captures and reports network traffic efficiently, but there are some limitations. The network traffic measured and displayed in the Network tool has similar characteristics to unmeasured traffic, but the timings don't precisely match the unmonitored results.
HTTP traffic is captured only for the process associated with the Internet Explorer window/tab that is open when you start capturing traffic in the Network tool. To debug two windows/tabs at the same time, you must open a F12 developer tools window for each. The network tools also cannot monitor network traffic for tabs that create multiple processes.