At MIX 10 Microsoft 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.
 |
| Debug >> Developer Tools ( F12 ) |
The developer tools include some new capabilities and improvements in tools which is not available in IE8.
- Network Inspection Tab
- Inspecting HTML and CSS
- Script Debugging and Using the Console
- Improving Script Performance
- Changing the UA String and Compatibility Modes
- Putting it Together
I’m going to blog 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.
To find the Network tab, open the developer tools in the IE9 Platform Preview.
 |
| Network Tab |
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.
 |
| Network Tab showing network traffic capture |
The Summary View contains the list of all the requests made by the page; it includes:
- 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
Depending on the page, you may also see requests from:
- Browser extensions
- ActiveX controls like Flash
- BHOs and Explorer bars
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.
 |
| Network tab showing detail view of a network request header |
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.
 |
| Network tab showing timing data |
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.
 |
| Network Tab Save As menu options |
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.
Over on the IE test drive site, Microsoft published a new which gives you a way to practice using the Network tab to debug your sites.We hope Microsoft will continue to improve the developer tools in future updates to
the Platform Preview.
Reference
Posts
No comments:
Post a Comment