Web Development

Internet Explorer's F12 Developers Tools: A feature walk-through

Learn how to gain insight into how your HTML, CSS, and JavaScript are being processed within IE by using the browser's F12 Developer Tools.

There has been a good assortment of browser-based development tools for a very long time, ranging from HTML editors to JavaScript debuggers. One of the best known is Firebug.

Internet Explorer has had its own F12 Developer Tools for some time. While the F12 Developer Tools don't do anything radically new or different from Firebug and similar tools, they do one thing the other tools don't, which is give you insight into how your HTML, CSS, and JavaScript are being processed within Internet Explorer. This is reason enough why it's worth your time to be familiar with the F12 Developer Tools.

To access the tools, simply press F12 or select it from the menu. This brings up a Firebug-like window at the bottom of the screen (Figure A). From here, you can use the tabs to inspect the HTML, CSS, access a JavaScript console, start debugging, do profiling, or inspect network traffic. Even better, dropdowns above the tabs let you check out the page in various Internet Explorer modes to give you an idea of what other users might see; this feature alone is worth the price of admission, since it beats maintaining VMs with each of the different versions. The menu bar also provides access to a variety of useful tools, including HTML and CSS validation. Figure A

Click the image to enlarge.
When viewing the page's details, you can make changes to the HTML, CSS, and JavaScript directly within the display to see a real-time update on the screen reflecting your change. Selecting elements in the HTML tabs shows a bevy of details on the right, including a list of the styles and where they came from, the box model (and the pixel sizes in each portion -- see Figure B), and the attributes. Figure B

Click the image to enlarge.

The script debugger is a little bit more complex. First, switch to the Script tab, then click the Start Debugging button. You may need to refresh the screen to have it connect to all of the items on the page. You can click the left "gutter" next to a line of code to set a breakpoint (or right click it) on it. There is a dropdown that lets you select which script to look at specifically. Since it can often be tough to remember which script has what in it, the Search Script box works well to help you locate the code you're trying to find. The Console main tab (or sub-tab of Script) lets you keep an eye on errors and warnings as they occur.

The CSS tab is straightforward. Like the Script tab, you select which CSS file you want to inspect from a dropdown. There isn't anything here that you can't do on the HTML tab, but you can see what happens when you modify the CSS within certain files and not just the resultant style.

The Network tab acts a lot like a less-full-featured version of Fiddler. There is a simple button to toggle whether it is on or not. I feel that this feature is pretty weak, and that Fiddler is a better choice all around.

Conclusion

If you've used Firebug or other similar options, you will be comfortable using the F12 Developer Tools too. Also, it is good to do these things within Internet Explorer to see why it is working differently from other browsers.

J.Ja

About

Justin James is the Lead Architect for Conigent.

6 comments
bjorn.hagen
bjorn.hagen

Recently we had a IE8 and earlier javascript problem in our web-app. I only had IE9 in my Win7, and discovered the possibility to select earlier versions of IE using the F12 tool. However the bug is not present when selecting IE8-mode while in IE9, only when you're actually using IE8 directly. The bug turned out to related to the fact that the javascript [b]arguments[/b] variable in a function is not an actual array. In all late-version browser I've tested it in, the arguments-variable kan be traversed using the [b]for (var i in arguments)[/b] construct. This includes IE9. In IE8 such an attempt will result in zero iterations regardless of the number of arguments to the function. We had to revert to the good old (and according to many, faster) [b]for(var i = 0; i < a.length; i++)[/b] construct. This is of course only when traversing arrays, when intentionally traversing hash-objects, the [b]i in a[/b] construct is the only way. Regarding this article, the point is that one should be aware of that a correct rendering and user interaction in IE9 in IE8 mode is not a guarantee that it will actually work in IE8.

aureolin
aureolin

Google Chrome has a similar set of tools, also available via F12. Personally, of the three main available in-browser developer tools (IE's F12, Chrome's F12 and Firebug) I find that the Chrome tool set is superior to the others.

taersious.rox
taersious.rox

Thanks for the article. Didn't notice you mention that the inspection window can be detached. This feature is very useful with multiple monitors. All in all, I enjoyed the article.

Justin James
Justin James

... I almost always use it with the detached window, but when I wrote this article, I was out of town and using my one-screen laptop with the small screen, so I completely left out that end if it, thanks for the reminder! J.Ja

RudHud
RudHud

Thanks for the multiple monitor info. That was one of my questions. I, too, appreciated this article. However, it left me wondering: Which versions? The linked MS site implies (without explicitly stating) that it's only good with IE9. Of course, IE6-8 are the problem children, and they make up half the browser market. A web developer tool which would allow analysis of the messes these make of pages would be really useful.

grayknight
grayknight

The web developer toolbar for IE has been around a long time. I think it is in IE8 and 9 by default and you can install it for IE6 and IE7. Since you can select IE7 or IE8 views using the toolbar in IE9, you don't need to IE7 or IE8 installed.

Editor's Picks