What’s New in IE11’s Developer Tools

It’s been a big week for browsers. Opera 15 was launched, Chrome 28 was released, Firefox won awards and dropped JavaScript options. So it’s time to restore balance to the universe and show some love for IE!

The new features coming to IE11 have been well publicized. SPDY and WebGL: great. Better touch controls and SkyDrive synchronization: nice. Improved tabbing and live tiles: all good. But what we really need are better tools to help our day-to-day development … is Microsoft about to deliver some?

I’ve never been complimentary about IE’s Developer Tools. The first version for IE6 appeared in response to Firebug which had revolutionized in-browser testing. The toolbar was rushed and clunky but better than nothing. It received minor improvements through the IE versions but remained disappointing. The company which created VisualStudio couldn’t match the browser tools offered by competitors.

While IE11 won’t appear for a few months, the latest F12 Developer Tools have been completely overhauled. They look great and have some genuinely innovative features which could surpass the alternatives.

The first change you’ll notice is the ugly gray dialogs have been replaced by a great-looking modern interface:

IE11 F12 Developer Tools

Icons down the left lead to:

  • a DOM explorer
  • a message console (which is also available as an overlay)
  • a JavaScript debugger
  • a network tool
  • a UI responsiveness profiler
  • a script profiler
  • a memory analysis tool
  • an emulation tool to test small screens and GPS

So far, so Firebug. But there are some amazing features you won’t necessarily find elsewhere…

IntelliSense: auto-completion suggestions are available when editing live HTML attributes, CSS properties and JavaScript objects.

DOM drag & drop: nodes can be re-arranged and re-positioned in the live tree.

Event hinting: discover which event handlers have been applied to a DOM node.

IE11 F12 Developer Tools

Code de-minification: convert compressed or minified code to a more readable format.

Execution reversal: it’s not quite a time machine, but it’s possible to move the execution point backward!

Set next statement: skip over statements — a little like temporarily commenting them out.

Tracepoints: automatically log messages to the console — like issuing console.log() without needing to clutter your code.

Break on new worker: interrupts execution when a web worker is called.

Performance profiling: discover the most processor-intensive tasks and how they affect your page framerate.

Memory profiling: take snapshots of memory use, compare them with others, and determine which DOM nodes or JavaScript objects are consuming the most resources.

Perhaps the only missing feature is a tool to analyze HTML5 local storage. But Microsoft has a few weeks to sort that out…

Despite IE’s historical reputation, Microsoft is heading in the right direction. You may even demand IE11 to test your next web project!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://facebook.com/satyaweblog Satya Prakash

    It is looking promising. I think this way MS can bring back developer’s love for IE. Developers love give free crazy advertising to Browser.

    • http://niteodesign.com Blake Petersen

      I agree, because this happens all too often.

      Client: I’m having a problem on my site, the dropdown is rendering blank, but the shadow is still there.
      Dev: What browser are you seeing this on?
      Client: Internet Explorer
      Dev: … Well, there’s your problem.

      Honestly, it’s not a bad remedy when f12 is such a nightmare to work with, especially when web developers have come to expect certain features in a browser-based developer tool set.

      SOOOOO glad this is being spiffied up!

    • http://rob.belics.com Rob

      No. Better tools won’t make all the problems with IE go away, including IE11, It also won’t make IE10/9/8/7 go away either.

      • http://www.optimalworks.net/ Craig Buckler

        Enlighten us Rob – what are the problems with IE10? Or IE11?

        It may have taken Microsoft some time to catch up, but we’re past the IE6/7 days and IE8 is almost dead. IE9 is missing CSS3 effects, but it’s generally well behaved and will also die out soon.

      • Joe

        I have been following the development of IE for a long time. As I am sure most of us have. I agree with Rob. The fundamental differences between the IE version won’t go away with new developer tools.

        A new set of tools that actually make debugging and development in IE useful and efficient are not something we should be thanking MS for. Other browsers have had these tools for a long time.

        We still support IE 7 upward, and the problems with box model rendering in the various versions of IE, z-index handling, and countless other ‘web standard’ issues cannot be fixed with a new set of developer tools. They may be easier to debug, but they are still there.

  • http://eggworks.ch Robin

    Is there a option to emulate the older Versions? I just looked it up in my VM but couldn’t find any option to do this.

    Because it would be great to debug problem which are caused with older versions of IE with the newer developer tools.

    • http://www.optimalworks.net/ Craig Buckler

      I think the browser modes should still be there, although perhaps they’re not in some betas? Remember that they’re not wholly representative of the original browsers but the days testing the old versions are coming to an end.

      • http://www.olddeveloper.com Greg Bulmash

        You can get virtual machines with real versions of IE6 – IE10 for a variety of virtualization platforms (Parallels, Virtual PC, VMWare, etc.) at Modern.ie. Some good testing tools and other freebies there as well.

  • ralph.m

    Definitely some promising new features there. I haven’t checked IE’s tools for a while, but unless you can inspect an element by right clicking on it, then IE’s dev tools will continue to stink, IMHO. Does IE11 (or indeed 10) have that feature now? It’s such a pain to have to drill down through the page code to inspect an element in older versions of IE.

    • http://www.optimalworks.net/ Craig Buckler

      You can do it now by opening the console (F12), clicking the “Select element” icon (it looks like a cursor), then clicking the page element. A right-click menu item should be appearing in IE11 though.

      • ralph.m

        Hehe, thanks Craig. I should have found out about that a long time ago.

      • Karl

        Right-clicking still beats that workflow hands-down. Especially when you need to do this many times through-out the day. If IE 11 still doesn’t have that feature (all of the other major browsers support this and have for a long time now) it will still be a joke to developers.

  • http://www.freljordapps.com FreljordApps

    That’s very cool!

  • http://www.opace.co.uk/seo Adam

    Thanks for the post, good to see MS making some progress in something at least.

    • hermahorma

      Yea – it sucks…Less.

  • http://bani-din.blogspot.com/ randu

    grate article, very interesting information and very helpful for me

  • http://rosenfeld.herokuapp.com Rodrigo Rosenfeld Rosas

    Indeed, hats off to Microsoft for finally delivering a usable developers tool. Better late than never.

    But I wouldn’t say I’ve seen anything innovative so far, when compared to Chrome’s developer’s tool.

    And I’m sad that they took a poor approach to alternating the window object used as the context one. It seems it copied the poor approach from Firebug or Firefox native tool, not sure, and used a special function “cd()” for that, instead of the smarter approach taken by Chrome. And it seems it’s even worse than on Firefox in the sense that you can only cd to some iframe if it has either an id or a name. Also, what would happen if my application happens to declare a “cd” function itself?

    They could fix this before releasing IE11…

  • http://yojance.net Yojance

    If Microsoft keeps improving IE like it has been doing lately, we might soon be developing for IE again and testing and then checking and making adjustments for other browsers.

    IE 10 is very good, can’t wait to try IE 11.

  • http://www.mathewporter.co.uk Mathew Porter

    Nice to get an insight into whats coming, the leaps IE is taking is only positive, the tools do look very good, much more useful and feature packed compared to the current ones.

  • Heath Sims

    Well according to w3school, only 0.7 % of internet users used IE7 in June 2013. And as far as layout, IE8 brought CSS table display into the picture, which is what I now use.