In recent years the development story for Internet Explorer wasn't particularly appealing. If you wanted to fix CSS and JavaScript errors, IE was definitely not the tool you wanted to use. Also, seeing what was going over the wire wasn't possible with IE, and as a result developers flocked to FireFox and other browsers offering (plugins) to help with these issues. You don't have to be a genius to understand that in the long run this wasn't helping IE in terms of market share. And with the renewed focus on webbased (HTML5) apps, Microsoft has stepped up and produced built in developer tools, also known as the F12 developer tools. So, what's in there and what can you do with it?

What's taking so long?

As with IE8, there are inspector tools for HTML, CSS, and script. Since I am by no means an HTML/CSS guy, I'm not the best judge when it comes to these tools, but for what I need from those I've been pretty satisfied. For me, the new profiler and network tools are much more interesting, because they respectively hook into the browser rendering engine and what's going over the wire with HTTP. If you've been using tools such as Fiddler or HttpWatch, the latter of the two should be more or less familiar. As you can see in the image below, it shows all the HTTP requests going out to the server, when in the timeline these requests were going out, and how long that took. If you've never seen something like this, you can see that this provides great insight into what goes down under the covers.

If you need more details about the timing information, you can select one of the items, and see more. As you can see below, that information doesn't only include HTTP information, but also information about the time it took to render and JavaScript to fire. If there's a page that is slow to appear in the browser screen, this will give you great insight into where your time is going.



Is this functionality better than commercial tools such as HttpWatch? Not at this time, but I have a feeling Microsoft isn't done yet. Tools like that are specialized, and Microsoft is playing catchup. One annoying thing I found is that if I have multiple requests bouncing back and forth, filling in a form, etc. IE9 tools will only show me the last interaction. It could be I'm missing something, but I haven't been able to figure out how to see the whole list of requests since I started capturing, and I'm too lazy to figure it out. That means I find myself going back to HttpWatch for that (at the moment). That said, the tooling is good, so if you don't want to spend the extra dime for other tooling, this will do in most cases. Except of course that this only works in IE9, whereas some of the tools out there work in multiple browsers. But wait... there's more.

What I'm I getting?

An interesting question is always: what HTML will a certain browser actually get. This is where the F12 tools have another nice new feature. You can change the user agent string the server is receiving, and as a result inspect what happens on the HTML, CSS, script side when other browsers come in. Obviously this doesn't make IE9 behave itself as one of the other browsers, but it can provide nice insights nonetheless, especially to tweak what robots are seeing.

How will it look?

The last thing that I fond really useful is the ability to change the browser so you can check the user experience for users with different settings. As you can see from the image below, you can disable css, script, and the pop-up blocker. In the environment I'm working in now, there's often the need to see whether everything still works if JavaScript is disabled, and there this is a great tool. It definitely beats going into the browser settings and changing these settings every time you have to test.



Last but not least, you can easily resize the browser screen to fit a certain size. I always used Windows Sizer for this, but having this built in is better, because I rarely use it for anything but webdevelopment.

What's more?

There's a whole bunch of stuff I haven't gone into here, so I advise you to play around with the F12 tools for a while. I'm also betting we'll see a lot more where this came from in the not too distant future. Microsoft is investing heavily in HTML5, and is actually trying to use "the best HTML5 support" as a unique selling point for Windows.