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.


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.



Justin James is the Lead Architect for Conigent.

Editor's Picks