Thanks for listening to my developer tools presentation at MIX in Las Vegas, below is a recording of the session and my slides.
More on developer tools
In IE9 we have added a few new features so you can now:
- Inspect network traffic.
To start the developer tools either just hit F12 or start them from the ‘F12 developer tools’ menu item.
The tools will load up nested at the bottom of the page and you can un-nest them and have them as a separate window.
The tools are relatively self-explanatory but there are tutorials over on MSDN if you want to get a better grasp of the basics. For the remainder of the article I will take a look a couple of the newer editions to the Developer Tools.
Inspecting Network Traffic
In a recent blog Mike Taulty showed how easy it was to use the tools to inspect traffic in a project he was working on. You can log all the network requests the browser makes simply by choosing the Network Tab and clicking ‘Start Capturing’. This can be useful to track down 404 errors, or unearth elements that are taking a long time to load and slowing your site.
You can also drill into each of these requests and get more details such as:
- The Request Header that was sent to the server
- Request Body information
- Response Headers that were returned
- Response Body that was returned
- Cookies that are currently used by the session
- Where the request was Initialised from (e.g. by the HTML header or by a script)
- The time taken to process the request broken down by stages( Wait, Start, Request, Response, Gap, DOMContentLoaded, Load)
You can then save this information to a CSV or XML file to view later of compare against other results by clicking the save icon in the top left toolbar.
Developers often minimise code which reduces whitespace, and shortens variable names to improve performance. However, it can cause issues for developers when they are testing because it is less readable.
These new features make is easier than ever to find and fix bugs in IE. If you fancy trying out the new tools, head over to the network monitoring test on IE test Drive and see how many issues you can find. Let us know in the comments how you get on.