Internet Explorer's Developer Tools (F12) Overview

Developing a web page is not always a simple matter of creating code on your computer, uploading it to the server and it works.  The interaction of your page, CSS stylesheets, javascript code (sometimes yours, sometimes external) and the framework of other files that may wrap around your code often produce odd results that you need to debug within the browser itself to figure out.  Until browser-based developer tools like Microsoft's F12 Developer Tools or Firebug came along, all you could do was view the source of your page and stare until you went cross-eyed.  Now that these tools exist, by all means use them!  I plan to write a series of posts about developer tools, starting with this overview of Microsoft's F12 Developer Tool.

The F12 Developer tool was available as a download in Internet Explorer 7, and became standard as of IE8.  To open it, just press the F12 key as the name implies.  The browsing window will split, displaying the tools below your page, like so:

There are many nooks and crannies to explore in the tool, but for now I'll focus on some of the more common ones.  Looking across the tabs, you will see:

• HTML
• CSS
• Script
• Profiler

HTML Tab

On the left side of the tool, you will see a representation of your page's HTML in a tree structure.  I say a representation because it is not the actual code you wrote, but IE's interpretation of it as it exists in the DOM.  Because of this, if you are using any code that dynamically changes the contents of the DOM you will need to refresh this view occasionally by pressing the 4th icon in - the 2 blue arrows - or clicking within the DOM view and pressing F5.  (If your focus were within the page itself, pressing F5 would reload the page)  

To inspect a certain element, you can either browse through the tree by expanding each node, or press the arrow icon below the tab (or CTRL-B) and click on the element within the rendered web page.  Either will bring the focus of the tool to that element.  Then in the right pane, you will see various properties assigned to that element:

• Style - The current styles associated with the element, in the order they were applied.  Any that were assigned by one CSS rule or javascript call, but then overwritten by another rule are crossed out.  You can selectively enable or disable any rule by setting or clearing the checkbox next to it.
  
  
• Trace Styles - Each of the current styles for that element will be displayed, grouped by style.  By expanding each node, you can see that CSS rules were applied to result in the current style.  For instance, the BODY may declare that all text on a page is black, but later in the CSS a rule for ".greenText" would override that and set the text to be green.
  
• Layout - Draws a diagram of the object itself, surrounded by its padding, border, margin and offset to give a representation of where the object sits and what spacing it wrapped around it.
  
• Attributes - Lists (with the option to add, edit and remove) any attributes assigned to the object, such as id, class, title, href, and so on.
  

CSS Tab

The CSS tab allows you to browse, inspect and optionally edit all CSS attached to the current page.  Editing this in place lets you experiment with settings live, rather than needing to save your changes, upload to the server and refresh your page to see each change.  This experimentation happens within the browser, greatly improving your efficiency, since you can make and undo changes much faster.

Script Tab

The script tab has 2 panes - on the left you can select a script from the dropdown to view its contents, and on the right you can interact with the browser through javascript (including any libraries you have loaded, like jQuery).  The most commonly used feature here is the console.  By entering javascript commands in the input field and either pressing Enter or the Run Script button, your command is sent to the browser, and its results, including any error messages) are returned in the Console window.

The Console window is also very useful for writing debug information to the log instead of having it displayed as a dialog box through a series of alert() calls.  In some cases, using alert to show you the value of a variable, or letting you know your code has reached a certain spot in the routine can be enough to help you debug the code.  The act of popping up an alert box pauses the script until you press OK, and can interrupt the flow of the code by changing the focus.  Instead, a common technique is to use console.log to write yourself notes at certain points within the code.  A script like this one can make it easier, and reduce errors:
There are many other tools within the Script tab, mostly focused on step-by-step debugging.  Because of the detail involved in interactive debugging, I'll be writing that up as its own post soon rather than make this overview too long.  (Tip: Look for posts with the label "F12")

Profiler Tab

If you are interested in the speed and performance of your javascript, the Profiler tab can help you see what functions are being run, how many times, how much time they take, and where they are being called from (file and line number).  This information can point you towards functions that are slowing down the performance of you page.  Once you've found the culprit, you can use the Script tab to step through the code and see what's causing the delays.   Because of the detail involved in profiling scripts, I'll be writing that up as its own post soon rather than make this overview too long.  (Tip: Look for posts with the label "F12")

Conclusion

Many people don't know the F12 tool exists, and those who do know about it may not be using it to its fullest potential simply because they haven't taken the time to figure out how it works.  Hopefully this post and the ones to follow will take some of the fear out of using the tool, allowing you to find, improve and fix your pages with ease.  Even using some of the more basic features can save you a lot of programming pain!  Keep an eye out for further posts in the "F12" series, as well as similar tools for other browsers like the FireBug tool for Firefox.  (One of my personal favorites, but we don't always get the luxury of being able to debug in a given browser... sometimes the bug only happens in another browser and you need to know the tools available)