Using Windows Internet Explorer Developer Tools Network Capture
This content refers to an older version of F12 developer tools. Please visit our latest F12 tools documentation.
The Network tab in the Windows Internet Explorer 9 Developer Tools can help you diagnose network-related issues by showing all the traffic that is related to a page and exposing details about individual connections. You can see the relative timing that each item on a webpage takes to load and render, so you can quickly see and solve problems. For more on F12 tools in Internet Explorer 9 see How to use F12 Developer Tools to Debug your Webpages.
- Overview
- Getting Started
- Viewing Network Traffic
- Summary View
- Detailed View
- Searching, Saving, and Restarting
- Limitations
- Related topics
Overview
Communication between Windows Internet Explorer and a web server occurs by using HTTP or Secure Hypertext Transfer Protocol (HTTPS) network traffic. For each webpage that Internet Explorer displays, numerous requests and responses are completed between the browser and the web server. Even more requests and responses are completed if the page is modified after it is loaded. You can trace script or HTML code to discover problems, but sometimes that is not enough.
The Network tab in the Internet Explorer 9 Developer Tools can help you diagnose network-related issues, such as incorrectly configured servers or malformed AJAX requests. By capturing and inspecting HTTP traffic, you can analyze most connections that affect your site and find more details about a specific connection, such as cookies or headers that are sent. If you use the Internet Explorer Developer Tools to view script, CSS, or HTML, this topic can help you get started with the Network tab.
Getting Started
To start capturing network traffic in Internet Explorer 9, press F12 to open the Developer Tools, click the Network tab, and then click the Start Capturing button. Internet Explorer 9 starts to capture and display HTTP traffic and information that is related to the current webpage, such as response status, bytes received, and timing information. By default, the Network tab displays the following summary view, which displays all connections that are associated with the current webpage.
.png "Screen shot of the summary view in the Network tab of Internet Explorer Developer Tools")
Viewing Network Traffic
The Network tab includes two views of network traffic: the summary view and the detailed view. The summary view displays a quick look at all captured information for a tab or webpage, and the detailed view enables you to find more information about individual connections. You can switch between views by using the Go To Detailed View and Back to Summary View buttons.
Summary View
The summary view shows all network traffic for a page in a table. By default, the information is presented chronologically (sorted by timing), but you can sort the table by clicking the header of any column. The following screen shot and table describe the type of information that you can view. Items without data are not shown.
.png "Screen shot of the column headers in summary view")
| Column header | Description |
|---|---|
| URL | The requested URL. |
| Method | The HTTP method verb (for example, POST or GET). |
| Result | The HTTP response code. |
| Type | The type of content that is received. |
| Received | The total amount of data that is received, in bytes. |
| Taken | The total time elapsed to receive the content, in milliseconds. |
| Initiator | The Internet Explorer subsystem that initiated the request (if it is known). |
| Timings | A timeline of the network events. The request time is indicated in yellow, and the response time is shown in blue. |
Detailed View
The detailed view provides information about a specific request. To see this information, select an entry in the summary view, and then click the Go To Detailed View button.
.png "Screen shot of the detailed view")
The following information is available 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 that is sent to the server. For the majority of verbs, the body is blank. For a POST, the request body contains the data that is sent to the server |
| Response Headers | Displays the response headers that are received from the server. |
| Response Body | Indicates the response data that is received from the server. If the response is an image, the image is displayed. If the response is binary, a link to save the content to disk is displayed. Otherwise, the response text is displayed 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 HTTPS connections
HTTP Only Indicates if the cookie is accessible only through HTTP (not JavaScript)
|
| Initiator | Summarizes the details of the Internet Explorer download action. Actions can include user refresh, speculative download that is initiated by tokenization during source parsing, speculative download during HTML pre-parsing, and download that is initiated by navigation of a frame. For requests that are initiated with an HTTP POST, such as form submissions, this tab is blank. |
| Timings | Summarizes events and their corresponding times that are relevant to the request. The timing information is displayed graphically and in a table format. Offset times that are noted in the following table are in relation to the time when the page is initially navigated to (that is, offset = 0ms). The following events are captured.
EventDescription
Wait The start time, an offset of zero, from the original request. The duration value is the time between the start of the current request and the original request.
Request The offset value that is taken when the current request starts. The duration is the time between that start time and when the end of the request is sent to the server.
>Response The offset value that is taken when a response is first received from the server. The duration is the time between that start time and when the last byte is received from the server.
Gap The offset value that is taken when the response has been received. The duration is the time between that start time and when the end of the last request is associated with the original HTTP request.
OnDomContentLoaded
The time when the
onDomContentLoaded DOM L2 event occurred, relative to the start of the current request. This event does not have an associated duration.
OnLoad
The time when the
onLoad event occurred, relative to the start of the current request. This event does not have an associated duration.
|
Searching, Saving, and Restarting
As you analyze the network traffic for a particular webpage, you might want to search for specific information, save the capture for later, or clear the slate and get new captured data. The following list and screen shot describe how you can accomplish these actions:
- The Search box helps you find specific data in any column of your captured network traffic. To find what you want, in the Network tab, enter a keyword or search term in the Search box in the upper-right corner of the Developer Tools.
- The Save button writes the current HTTP session to an XML file by using the HTTP Archive schema or a .CSV file. After saving the session, you can open the session by using any tool that can read HTTP archive files, or .CSV files. Internet Explorer 9 can export your data, but it can view only live HTTP sessions and cannot read saved files.
- The Clear button removes all the current requests without stopping and restarting the capture. To clear the network traffic, press the Clear button in the upper-right corner of the Developer Tools.
.png "Screen shot of the Search, Save, and Clear buttons in the Developer Tools")
Limitations
Internet Explorer 9 captures and reports network traffic efficiently, but there are some limitations. The network traffic that is measured and displayed in the Network tab has similar characteristics to unmeasured traffic, but the timings do not precisely match the unmonitored results.
Internet Explorer also cannot capture compression information or all types of requests. HTTP traffic is captured only for the process that is associated with the Internet Explorer tab that is open when you start capturing traffic in the Network tab. To debug two tabs at the same time, you must open two Developer Tools windows. The network tools also cannot monitor network traffic for tabs that create multiple processes.