My Tech World

IE8 Developer Tools Need Love Too!

I attended a Microsoft Unplugged session the other day where Giorgio Sardo presented a discussion on creating cross-browser compatible websites using IE8′s Developer Tools and Expression Web SuperPreview. While I went in as a skeptical developer expecting to hear the usual rhetoric around some misguided enthusiasm about a new feature set that other browsers have been doing for years, I came out highly surprised and impressed with some of the tools that are bundled as part of the embattled browser.

Internet Explorer has a well-established track record of not performing. The legacy of IE6 still haunts web developers today and is widely loathed throughout that community, so it should come as no surprise to Microsoft that developers are cynical about any claims of “better performance”, “better standards” or “better tools”. Like most of my peers, I’m a devout Firebug enthusiast. It’s an excellent tool for playing with your styles and markup and quickly visualising your DOM element dimensions. I’ve always felt that IE8′s developer tools never really measured up in this regard. But the IE8 has its own little bag of tricks that present a good argument against dismissing the browser completely.

I’m going to look at some of the more interesting and useful features in future posts, but I’ll quickly cover off a couple now. The first two are found in the Tools menu.

Start by opening up the IE8 Developer Tools by pressing F12 and have a look at the Tools menu. You will see three submenus: Resize >, Show Ruler and Show Color Picker. The Ruler is really useful if you want to measure out page elements (image heights, content block widths, etc). You can select from one of four high-contrast colours, easily snap to page elements, draw multiple rulers on the page and generally measure anything you want, however you want. Compare this to Firefox’s MeasureIt addon which, for starters, is an addon (as opposed to baked-in), and – at time of writing – was basically restricted to a single box outline with fixed ruler tickers. Ultimately, they’re two very basic features and they both do what they’re designed to do, but it’s the little features that make the difference.

The color picker is in a similar vein, except here Firefox has the advantage. I didn’t even know that IE8 had a color picker and have always used the ColorZilla addon instead. Both tools allow you to sample the color of a page, but the Firefox variant adds a lot of extra functionality such as being able to take your chosen color and change its RGB values as well as the Webpage DOM Color Analyzer (didn’t know about that one?! Try it now. Right-click and select Webpage DOM Color Analyzer).

In upcoming posts, I’ll look at some other lesser-known features of the Developer Tools, including script debugging and page optimisation.

Tags: internet explorer, standards, tools, web development