The new and improved IE F12 Developer Tools

With the Windows 8.1 Update, the latest version of Internet Explorer 11 brought some important updates for the developer community.

For those new to the F12 Developer Tools, these are a set of useful tools aimed at making it easier to develop and test Web pages with Internet Explorer. These tools, for instance, provide advanced DOM analysis and JS debug features right inside the browser. It is thus possible to explore all the applied CSS styles, the DOM nodes, or the loaded scripts, and at the same time make real-time changes to see how they reflect on the page.

First introduced with Internet Explorer 9, the F12 Developer Tools have never stopped improving. And the latest release is definitely the most complete and powerful yet. Let’s take a quick look at the major improvements and new features of this new update.

Change-bars and Changes tab (or “Ehm… what did I do?”)

Yes, it’s great to be able to make changes to the CSS and see them applied real-time. However, it’s also easy to lose track of all the things we change while making the Web page perfect, and this is less great. When making many changes, the new Change-bars of the F12 Developer Tools come really in handy.

IE-F12-ChangeBars

This feature add a colored marker next to all the properties that were changed, using meaningful visual clues to represent the kind of modification that occurred. In particular, changed values show a little orange bar next to the property name, while newly added elements have a green bar.

By right-clicking to any property, it’s also easy to “Revert item” to the original value.

IE-F12-ChangesTab

To avoid having to individually select every node looking for Change bars, the new “Changes” tab will provide a super-helpful summary of all the properties that were changed.

Just My Code: debugging MY script

This has happened to every Web developer at least once: when using a third party library such as jQuery, the debug of your code keeps stepping into the minified JavaScript of that library, making it painful to actually get some work done. Once you get in there, also, it might take a while to “step out”, and a 5-minute modification debug quickly turns into a way longer session of work.

The latest F12 Developer Tools include a new feature called “Just My Code” that can change this situation. In particular, it allows the developer to mark some script files (such as the jQuery ones) as ‘library code’. The debugger, then, will never step into them, making it easier to debug one’s own code. In the same way, no exception raised and handled inside library code will surface to the developer.

IE-F12-JustMyCode

By default, IE F12 considers any “minified” script file (i.e. named *.min.js) as a third party library, but it’s easy to mark or unmark any file as library code.

Other new features

Very quickly, many other features (great for Web development) have been introduced into the latest version of the F12 Developer Tools. Here are some of the most important:

Support for Source Maps: it is now possible to work with Source Maps, a community-driven format that maps source script files written in other languages (like TypeScript) to the actual, compiled JS files.

Improvements to the Console: many improvements were applied to the Console. For example, Local variables are now integrated into the IntelliSense for the Console. Also, console messages are now recorded even when F12 gets lauched.

Debugging: it is now possible to store the breakpoints and watch variables that were set during a debug session to find them the next time.