An Introduction to the Internet Explorer Developer Tools
Pete LePage | July 7, 2010
One the coolest features of Internet Explorer 8 that most developers don’t know about are the built-in developer tools. Think Firebug, except for Internet Explorer, and built by the IE Team, so you don’t have to download anything, install it, or enable it. Heck, my Mom could bring up the developer tools if she really wanted! Over the next week or so, I’m going to do a short series on the Internet Explorer Developer Tools and what you can do with them. Since Internet Explorer 9 is still in the “Platform Preview”, I’m going to focus on Internet Explorer 8, though there are some cool new IE9 tools, I’ll save those for another day.
Starting the Developer Tools
There are two ways you can open the IE Developer Tools, you can either hit F12, or under the Tools menu icon, you can choose “Developer Tools”. Both of these will open the Developer Tools, which you can either run in a separate window, or docked to the bottom of your browser window as I’ve shown below.
When the Developer Tools open, there are four main tabs that provide the major functionality of the tools
This tab allows you to see and edit in real time the HTML and applied styles that make up your page as seen by the Internet Explorer DOM. From here you can move through the DOM either via the tree view on the bottom left, or you can click on the little mouse pointer icon, and grab individual elements. When you do that, IE automatically takes you to the element you’ve selected. On the left side of the HTML panel, is another set of tabs, that show the Style and inheritance information for the CSS that’s being applied, an ability to Trace Styles, so you can see what particular style is being applied, and why. The Layout tab is particularly useful if you’re forgetful like me and mix up margin and padding (for years, I’ve not been able to keep it straight, and every time I think I’m remembering it right, I goof it up again). Finally the Attributes tab shows the attributes that are on that element.
The CSS Tab
Shows you all of the styles that are being pulled down for your site, how they cascade against one another and is useful to view and turn off styles individually or at the entire style level. Like the HTML tab, you can edit your styles in real time to see how changing properties affects the page. So if you’re not sure why something isn’t being styled right, this is a great place to look.
The Script Tab
Like any good development tools, debugging is a vital component of understanding why something isn’t working, or why you’re getting that a 3 instead of a 2. The Internet Explorer 8 developer tools let you do everything that you’d expect in a full-fledge debugger (it’s almost as powerful as the debugging tools in VS2010 – not quite, but pretty good). Like the HTML tab, there are several tabs on the right side of this window. There’s the Console tab, so you can output to the console window if you’ve added debugging code to your scripts. The Break Points tab, to help you be able to apply break points and debug into your code on specific lines. There’s also the Local and Watched Variables tab so you can see what’s happening to your variables as your applications is running. And finally the Call Stack tab to dig into the call stack.
The Profiler Tab
This is the one that I think is probably the coolest feature of the Internet Explorer 8 Developer Tools, and that’s the built in code profiler. Want to know what’s happening, what functions are being called, why things are taking longer than you expect, or not getting called, the Profile is your guide to what’s going on. Once you turn the Profiler on, you can run your code and IE will keep track of the number of times every method is called the length of time spend in that method (Exclusive Time), the length of time spend in that method and any methods called by that method (Inclusive Time), as well as where that method is.
Other Useful Developer Tool Features
There are a couple other things that I want to highlight in this Internet Explorer Developer Tools introduction, that I think are really useful when I’m working on building a new site, or editing an existing one.
Browser Mode and Document Mode
Internet Explorer 8 shipped with two rendering engines, the Internet Explorer 7 rendering engine, and the Internet Explorer 8 rendering engine. By default, as long as you’ve included the right DOCTYPE switch, Internet Explorer 8 will use the Internet Explorer 8 rendering engine. But you can’t always guarantee your users are going to be using IE8, and you want to see how your site will look with the IE7 rendering engine.
Document Mode allows you to manually choose which rendering engine you want IE to render the page with; choosing the Internet Explorer 8 Standards mode uses the IE8 rendering engine, Internet Explorer 7 Standards Mode uses the IE7 rendering engine, or Quirks Mode uses the quirky, IE5.5 rendering engine. Changing the Document Mode does NOT change the user agent string that is sent to the server and is primarily used for testing and seeing how your site will look in IE7.
Browser Mode changes both the Document Mode, and the User Agent string, which allows Internet Explorer 8 to lie about who it says it is.
If you want to see what your browser is reporting for its user agent string, check out http://petelepage.com/samples/uastring.aspx. Then open the Developer Tools and try changing the Browser Mode and Document Mode to see how the page renders in different ways.
Ever wonder what color is on another site, and don’t want to dig into their CSS to find it, or don’t remember what color you picked, the color picker is a little eye dropper tool that lets you click on a particular part of the page and it gives you the HEX color value, so you can just plug it right in where you need it. You can find the Color Picker under the Tools menu!
More to Come!
In my future posts, I’ll dive deeper into each of the above features, and how you can use them to debug your websites!
Pete LePage works at Microsoft on the Internet Explorer team as a Senior Product Manager, helping developers take advantage of the web platform in Internet Explorer. LePage has been designing websites since his early days in high school, evolving from overlapping <blink>, <marquee> and <font> tags on GeoCities to properly styled CSS, managed hosted websites. Prior to joining the product management team, LePage was a tester on Microsoft’s Visual Web Developer where he tested much of the web design experience.
In addition to his career at Microsoft, LePage enjoys travelling and is an avid film photographer; he has studied and taught at the prestigious Photographic Center Northwest in Seattle where he has recently completed his Thesis in Fine Art Photography.
Find Pete on:
More from Pete: