JavaScript
One of the best new features of JavaScript debugging is the ability to indicate scripts or libraries you do not want to step into. How often are you trying to debug a script by stepping into a function (F11) only to find yourself wading through jQuery's minified code? Look it is always good to examine other libraries, but when you are trying to fix your bug you just want to focus on your code. By rolling over a script in the debugger you will notice a little icon to the right. By toggling the icon you can easily enable what is call 'just my script' debugging. This should save you time and confusion when you are tracking down issues.
Speaking of minimized 3rd party scripts. Wouldn't it be nice if you step into those libraries and actually be able to set a break point or at least read the script? Well now you can thanks to F12's new source mapping feature. If you are not familiar with source maps it is a way for a library to generate sort of an index when it goes through the minification process. Now when the browser's debugger encounters the minified file it can specify the location of its source map. The browser can then use the source map to download the unminified version and know how to correlate or map the source in the minified file to the human readable version. You can read more about source mapping in the latest specification.
CSS
If you have ever edited CSS in any browser's developer tools no doubt you lost track of what you changed. The new Internet Explorer developer tools visually highlight changes with color codes. You can quickly see what you added, modified and removed. To top that off there is a new view called changes. Here all the rules you modified are curated, making it easier to copy them or see exactly what you changed without any other rules in the way.
Another cool feature in the developer tools inspector panel is the ability to trigger hover and active states. This feature lets you toggle those states on the selected element, triggering any CSS selectors defined for those states. I cannot tell how valuable this feature is going to be, as many pages have these states defined in their CSS.
Console
The best new console feature is echoing the actual contents of an object. In the past the IE console used a JavaScript's native toString function to write its value to the log. This produces a useless [object] [object] value. Now a JavaScript object will be written out in a formatted string, which is actually readable! This will serve a valuable role in more efficient debugging.
The console toolbar has some new buttons. Now you can toggle the console being cleared on each request. By default setting is to clear the console each time you refesh the page or load a new page. The reason the default setting is to clear the console is for performance. Maintaining the console state across requests create a small performance hit and you do not want that for non-debugging sessions.
Conclusion
These are some of my favorite new features of the Internet Explorer F12 tools. There are a few more features and I hope to have time to share those in the near future. To be honest there are some features I am still anxiously awaiting and possibly you too. Open up Internet Explorer and try out the tools today.
My friend Aaron Powell also has a series of articles discussing the new features I encourage you to read. He has some cool animated gifs demonstrating the new features.
