Developer Tools

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

Trying to understand why your webpage is rendering incorrectly or throwing an error can be difficult, especially if your page contains a lot of mark-up, CSS and JavaScript. Using View Source can help, but pinpointing an issue with that alone is like finding a needle in a haystack. Since IE8 (IE7 if you count the Web developer Toolbar) we have included Developer Tools in IE to enable developers to examine their code and better understand the browsers behaviours and rendering.

In IE9 we have added a few new features so you can now:

  • Inspect network traffic.
  • Handle Large JavaScript Files (really large like 70k+ lines of code)
  • Un-minify JavaScript

To start the developer tools either just hit F12 or start them from the ‘F12 developer tools’ menu item.

IE9 developer tools Menu

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.

Developer tool loaded at the bottom of the screen

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.

Network Traffic

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.

Detail View

Handling JavaScript

IE Developer tools have always allowed you to debug JavaScript, but now it also lets you work with large files, even if they are minimised.

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.

Firstly IE9 Developer tools now let you add break points to JavaScript even when all the code is on one line. To do this you simply place the cursor wherever you want the breakpoint right Click and select Insert breakpoint, as simple as that.

Insert BreakPoint

This is probably ok if it is your code, but if you need a better understanding then you can use the new Format JavaScript tool, this indents the code to make it more readable. The breakpoints are also persisted so you can switch formatting on and off at will.

Format JavaScript

Formatted Javascript

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>