At MIX 10 we released the IE9 Platform Preview and showed some of the included developer tools. You can access these tools by pressing F12, or click Developer Tools on the Debug menu when you use the Platform Preview.
The developer tools include some new capabilities and improvements over the tools in IE8:
For this first blog post I’m going to talk about the Network tab. The Network tab gives developers insight into what resources a web page is using including the data that is sent to and received from the server. Developers can use this information to see if network responses contain errors, such as file not found or a server side error. The tool also helps debugging AJAX requests as you can examine the data as it was sent and received from the server.
- A new tab for inspecting network traffic.
- Improved performance working with large JavaScript files: think 70k+ lines of code (even if it’s all on one line!)
- Improved CSS view that lets you work with complex CSS. For example, better consistency when working with @ media rules.
To find the Network tab, open the developer tools in the IE9 Platform Preview.
In the Network tab you need to click Start Capturing to begin recording network traffic. The network tool doesn’t capture data until you click start because collecting network data has an impact on performance and consumes memory. Once you’ve started capturing, refresh the page to see the recorded network requests in the Summary View as they occur.
The Summary View contains the list of all the requests made by the page; it includes:
Depending on the page, you may also see requests from:
- The original URL the user requested
- Any files fetched by the HTML and CSS
- HTML example: <img src=”foo.png” />
- CSS example: background-image: url(bar.png)
- Requests made from JavaScript
- Dynamically setting src attributes
- Requests made by XmlHttpRequest and XDomainRequest objects
For each request in the Summary View you can double-click on that request or click the Go To Detailed View button to open the Detailed View and see more information about the request.
- Browser extensions
- ActiveX controls like Flash
- BHOs and Explorer bars
The Detailed View is broken up into 6 tabs:
Request Headers
A list of all the headers sent with the request including the request line.
Request Body
A text view of any data sent in the body of the request, typically used for POST requests such as form submissions.
Response Headers
A list of all the headers received with the response including the status line.
Response Body
A view of the body of the response. The tool has built in viewers for text and images.
Cookies
A view of the cookies sent and received with the request.
Timings
The last tab contains a graph of times associated with the request.
You can click each of the bars in the chart or list view to get more information about what the time represents.
Once you have a capture you can save it to a file. This is handy if you need to file a bug or send the report to someone else to look at. The save icon is on the tool strip just below the tab, and there are two formats to save the data to: XML or CSV.
The first option is to save the file as a CSV. This saves the summary view and is useful if you want to look at the data in a spreadsheet program like Excel. You can also just select the rows in the summary view and then copy and paste them into Excel.
The second option (the default) is to save the file as XML using a format based on the HTTP Archive. The saved file includes all the data associated with a capture and can be used to examine issues in other tools. For example, Eric Lawrence is extending Fiddler to import HTTP Archive files so you can view the contents using Fiddler. The HTTP Archive format contains useful information that can help assess the performance of a page. For example, the site at http://netrules.tablezengarden.com/, lets you paste the contents of an HTTP Archive file and run some of the YSlow rules against it.
Over on the IE test drive site, we published a new Network Monitoring demo which gives you a way to practice using the Network tab to debug your sites.
We will continue to improve the developer tools in future updates to the Platform Preview. In the meantime, we want to hear your feedback and would love to hear how we can make the developer tools in IE9 your developer tool of choice.
-- Andy Sterland
Program Manager
More...