Advertisement
Articles

The New IE11 F12 Tools

by

Disclaimer: I work for Microsoft Corporation.

Back in January, I walked you through the features of Internet Explorer 10's F12 Developer Tools. Microsoft's recent release of Windows 8.1 Preview brings with it, not only an update to Internet Explorer (now at v11) but also a welcome refresh to the F12 Developer Tools. The latter is especially important since developers are dependent on them to troubleshoot site-related issues from within IE. Till now the tools have solved most debugging use-cases but it's clear that as sites become more complex, developers need richer tools to work with. This update aims to bring a fresh look and expanded capabilities for developers with a strong focus on the following:

  • An updated, cleaner user interface.
  • New Responsiveness, Memory, and Emulation tools.
  • New and improved functionality in existing tools.
  • An easier and faster workflow.

Some of the updates are simply convenience features meant to streamline developer workflow (e.g.: element breadcrumbs) while some will have a dramatic impact on improving the performance and rendering of web apps.

In this post, we'll go through some of the newest updates and features of the IE11 F12 Developer Tools and in some cases, I'll show you the clear differences in features from previous releases.


UI Reboot

Since its inception, the F12 tools has kept a fairly consistent UI using dropdown menus and a tab-based metaphor to present the various options available. But some nits that always seemed to get in the way were things like the tools popping out into their own window during a debugging session and the tabs taking precious vertical real estate. With IE11, the F12 tools have been greatly redesigned to make the UI more intuitive leveraging a graphics-based navigation system that is positioned as a scrolling ribbon on the left-side of the debugger pane:

ribbon

The menus that used to line the top of the tools have been removed to provide greater clarity to the debugging interface, as well as to free up real estate to work with. In addition, the design of the debugger itself has been greatly refreshed breaking away from a Windows 7 UI-style to a more modern Windows 8 look-and-feel. You can see the major difference below:

win7ui
win8ui

The new user interface is clearly more consistent with the modern elements introduced in Windows 8.


DOM Explorer

While the original DOM inspector tool provided a decent experience, it lacked some key features. The main pain points for me were the lack of live DOM updating, the display order of CSS styles and the inability to see events attached to DOM elements. Thankfully, these have now been addressed in this update.

Since I focus so much on JavaScript, finding attached events was especially frustrating requiring a lot of console-based debugging code and trial-and-error to nail down the called event/method combo. Looking at the screenshot below, you can see how I can click on a specific element, see the event that's attached to it and the method that will be called when the event is fired. This is a huge timesaver from a debugging perspective.

domevents

And while it may seem obvious, a slight but important change to the way the tools display the CSS applied to an element, has just made things substantially easier. Prior to this update the F12 tools would display inherited styles first forcing you to scroll down the styles pane to get to the actual used style for the element.

f12old-css

The team has updated the display so that the most recent styles are displayed first which in my opinion makes a whole lot more sense, especially from a debugging perspective:

f12new-css

Some other great new features that are definitely nice to have are:

  • The ability to right click on any element on a page and inspect that element.
  • Dragging an element to another location from within the DOM explorer.
  • The element breadcrumb that makes navigating an element's hierarchy substantially easier.
  • Intellisense, for easy access to style rules.

Previously, you had to open the F12 tools, click on the DOM inspector arrow and click on an element. This streamlines things quite a bit and brings that experience on par with other debugging tools.

The breadcrumb provides an intuitive way to sift through the hierarchical structure of a DOM element, allowing you to easily click on any part of the breadcrumb to pull up the individual parent element:

breadcrumb

With the new Intellisense-style functionality, when you edit a style or add a new rule, you're immediately presented with a popup that offers you quick access to CSS rules and values. While some of you may be CSS encyclopedias, I for one appreciate not having to remember all of them. :)

intellisense-css

Lastly, with DnD within the DOM explorer, you can interactively test how your elements will look and react when you shift their position within the page layout. The changes are made live, so you receive immediate feedback as you reposition your element.


Tackling UI Responsiveness

There's a LOT more code being placed on the client-side than ever before. Frameworks like Ember.js and Angular are making it substantially easier for developers to build single-page web apps and developers are leveraging HTML5-based features to build immersive games that require high frame rates and response times. With that, comes a whole new set of considerations surrounding page performance and the new F12 tools offer a new tool to help you profile and measure the responsiveness of your user interface. The UI Responsiveness tool is a profiler that allows you to measure framerates and CPU usage to pinpoint any UI performance issues.

By kicking off the profiler, I can track how my CPU reacts to my page and what the visual throughput (AKA frames-per-second) is as different points in the page load cycle.

ui-response

The Timeline details panel offers me even finer details about how specific events or network requests affected the page performance allowing me to dig deeper into any issues and make adjustments to improve my site's performance.

timeline

By looking at each element of the timeline you can see how specific actions, for example styling, can affect the rendering performance.

timer

You can imagine how invaluable this data is, especially to game developers that want to leverage native browser capabilities for gaming and are used to having robust debugging tools in other plugin-based development tools such as Flash.


The Script Debugger

Of all the changes, the most impactful to me have been those to the script debugger, mainly because they helped prevent the rage I felt when I would use it. It was primarily a UX issue in that at the moment you opted to run the debugger, the whole tools panel would pop off the browser viewport and into its own stand-alone popup window. It was a jarring experience to say the least. This update resolves that and ensures that the debugger stays firmly in place.

Another great enhancement is the use of a tab metaphor for displaying each open file you're debugging. The previous version of the tool forced you to re-open each file you needed to debug. The new version shows a tab for each file you're working with making navigation substantially easier.

debug-tabs

Additionally, options that were generally buried in context menus are now firmly highlighted and easily discoverable. It's amazing how many times developers have been surprised when I showed them the pretty print function for formatting JavaScript even though it had been in there since IE8. The feature is now highlighted via an icon at the top of the debugging pane alongside the wordwrap icon.

Last but not least, forget about console.log(). The new tools now support Tracepoints easily allowing you to monitor specific values the same way you would via console.log().


Memory Analysis

Pegging memory issues has always been a drag especially if it's a slow memory degradation issue. The new F12 tools aims to tackle this with its new memory profiler. The tool allows you to take snapshots of your site or app's memory usage over a period of time allowing you to pinpoint which actions or areas of your app may be the root cause of the issue.

memory

By creating a baseline snapshot of your memory footprint followed by subsequent snapshots, you can compare the data gathered to determine the number of active objects and which types of objects are persisting. This includes HTML elements, DOM nodes and JavaScript objects and you can drill into the comparisons of the snapshots to see the change in memory between them for individual objects.

memory-detail

Emulating Other Devices

You're probably all too familiar with the complex dropdowns called "Browser Mode" and "Document Mode". They were meant to help developers troubleshoot issues related to non-modern versions of Internet Explorer. In reality, they were a bit confusing to use and only offered marginal testing support for non-modern IEs. With this new update, the F12 tools have streamlined this to help developers focus testing on the most standards-compliant version of IE, especially if their site is currently running in some compatibility mode.

By changing the document mode to "Edge", a developer can force their site to render in the most recent standards mode supported by that version of IE and work to make the necessary standards-based changes to have their site render cross-browser. In addition, an informational link is provided directly in the tool which takes developers directly to modern.IE, an online resource which offers a scanner for common compatibility issues, virtual machines for the different versions of Internet Explorer, and best-practices for ensuring site compatibility in modern versions of IE.

A new feature that explicitly targets mobile and tablet devices is Geolocation simulation. This allows you to leverage the Geolocation API even if your device isn't connected.


A Great Update

This is a great update to a suite of tools that have served us well, but were definitely in need of some sprucing up. There was a clear focus on offering tools that helped you troubleshoot performance-related issues, something that's incredibly important especially with trends heading towards single-page, native-style apps.

I've done my best to roll-up the great new features added in, but to truly get caught up on the full-breadth of functionality provided in the IE11 F12 Developer Tools, check out the walkthrough offered by the team.

Related Posts
  • Code
    Tools & Tips
    Check Out Atom, GitHub's New Development EditorAtom wide retina preview
    It's been awhile since we've seen any updates in the editor space. The last big splash was made by Sublime Text which took the web development community by storm, especially once Package Control came around to serve as the package manager for the editor.Read More…
  • Code
    Tools & Tips
    Browser Testing in the Cloud ReduxBrowser testing cloud redux retina preview
    I've written quite a bit about browser testing solutions trying to help identify techniques and tools that make cross-browser development easier. My last article on the subject covered how to use BrowserStack to test any number of browsers all from one central tool; your own browser. I was on a Windows PC back then so testing multiple browsers was a bit easier and testing tools were mainly complementary to my work. Now that I'm on OS X, the need for tools to round out my testing strategies is even more important, specifically because of the lack of Internet Explorer on the OS. I'm a bit of a stickler for what I install on my computers and I prefer online tools when available. I'm also always on the hunt for new tools that make cross-browser testing easier and decided to give CrossBrowserTesting.com a run. I'll go over some of the key features of the service and how to leverage it to improve your testing capabilities.Read More…
  • Code
    News
    Recently in Web Development Nov 2013News nov2013 retina preview
    We used to have an awesome series called "Recently in Web Development" which listed out cool happenings around the web development industry. It touched on interesting frameworks, tools, articles and tutorials, helping to organize information in a quick and easy-to-read format. Based on feedback, we've decided to bring it back and hope that it helps you, our faithful readers, stay on top of the news and announcements of this fast-changing industry. So without further ado...Read More…
  • Code
    iOS SDK
    Xcode 5 EssentialsLearn objective c
    Xcode 5 is a major step forward for the Apple ecosystem, bringing more possibilities, features, and tools to developers than ever before. With Version 5, Xcode has grown into an extremely powerful IDE. Read this article to learn what's new!Read More…
  • Code
    Tools & Tips
    Using BrowserStack for Cross-Browser TestingBrowserstack retina preview
    Browser testing is the bane of our existence. Well, that's a bit of an exaggeration, but not by much. Multiple browser versions and browser fragmentation can make it difficult to get good test coverage for your sites especially when you factor in the different operating systems developers use to build with. Over the years, we've relied on a variety of tools to help us with this challenge including virtual machines, tools that simulate browsers and even having multiple devices on hand to work with. It'd be great if there were a way to have one viewport that allowed us to easily test across any major browser and their individual versions without jumping through hoops. BrowserStack.com aims to offer this via it's browser-based virtualization service and in this article we'll cover the service and how it helps tackle the cross-browser testing problem.Read More…
  • Code
    Tools & Tips
    A Peek at Internet Explorer's Developer ToolsIe
    I hate debugging, and have never met any developer who argued otherwise. It's a drag to have to go through your code and figure out why it's broken. And most importantly, it's an admission that my code is broken and that I'm not infallible! Heresy, I say!Read More…