Announcing the redesigned F12 developer tools interface


With two major updates over the spring and summer, we have continued to improve the developer experiences available in IE’s F12 developer tools and today we are excited to provide details around our latest update.

This update addresses concerns that many users had with the vertical navigation model we introduced in IE11, and provides a more traditional horizontal model.

Changes to the F12 user interface

Overall design

When we introduced the vertical navigation model, our goal was to optimize for vertical real estate. Your feedback validated that we successfully achieved that goal. However, it also became clear that using a vertical navigation model with icons identifying complex tools, lead to hesitation and confusion for novice and expert users alike.

In order to address those issues, we implemented a more traditional navigation interface that sits horizontally at the top of the tools. As part of this change, the tool icons were removed and replaced with the tool’s name. We retained the tool notification badges—like the debugger pause icon or the console error count—and removed tool names from their respective toolbars to make more space available to the tools themselves.

New horizontal navigation in F12 tools

Overflow experience

When the tools window isn’t wide enough to fit all of the tool names, a drop-down menu provides access to the tool names that didn’t fit and provides the same notification badges available in the full-width version of the tools.

New horizontal navigation in F12 tools with overflow

Undocked experience

When the tools are undocked, they retain the same experience and functionality of the current tools. In this design, the window “grab area” is in document title region along the top and the window resize area sits along the sides of the tools.

New horizontal navigation in F12 tools

We are grateful for all the feedback you have provided to date, and we want to encourage you to continue to provide suggestions as you find issues, bugs, or experiences you believe could be improved in order to make your daily development activities easier and more impactful.

Try this new change and let us know your thoughts. Leave a comment below, reach out on Twitter, or visit our new User Voice site to share your feedback.

— Ruben Rios, Program Manager, Internet Explorer

Comments (51)

  1. Yannick says:

    Very nice update. Finaly kills the annoying scrolling issue. Thanks.

  2. Dan says:

    Thanks, even after using F12 tools regularly the icons in the vertical tool bar were hard to distinguish and their functions were not obvious.

  3. Brendan says:

    "Try this new change and let us know your thoughts."

    Am I missing something?  How do I try these changes (or, where / how do I get this update installed on my machine)?

  4. Patrick H. Lauke says:

    Now if we could have a dark theme, that'd be amazing 🙂

  5. Prakash says:

    Great!  Appears like there is more real estate now!!

  6. Shamil says:

    I think you might rearrange tab order so 2 most important and useful tabs would be first and last.

    My personal favorites – DOM explorer (should be first) and Console (should be last)

    1. DOM Explorer is by far the most frequent tab

    2. Switching to Console is the operation you use when you need an instant sneak peek.

    Other tabs can wait an extra second when you search for them 😉

  7. Ruben Rios says:

    @Brendan, the changes are part of the updates that were rolled out today for IE11. Make sure you install all Windows updates and you should be able to see the changes.

  8. Jonathan Sampson [MSFT] says:

    Brendan,

    These updates are available via Windows Update.

  9. Dale says:

    Is the update automatic? or do we need to download something?  I'm still stuck with the horrible vertical menu!

    Please DO NOT TIE this to Windows Update as that is often locked down at an IT level but the browser/tools are not.  The Dev Tools should always be upgradable by the user at ANY time without WU restrictions!

  10. MgSm88 says:

    Great! Now just get rid of the absurd singleline/multiline edit mode that is a hold-over from Firebug. All edits should be "multiline" mode- like almost every other REPL in existence.

  11. Awesome! Much nicer and clearer IMO.

  12. updates says:

    IE 11.0.15

    Flash Player 16 stable

  13. KS says:

    It seems the tools are still missing what was part of them before IE11: all those settings that you could do from the various menus. Set default View Source editor. Delete Cache, Cookies etc. only for this page or this domain. Toggle Javascript, CSS etc. on/off. All these valuable options still gone. Users keep asking me in the forums how they can do it now easily. Please reintroduce them.

  14. Tup says:

    We really need an option for HEX or RGB instead of RGBA when the colour doesn't use alpha channel.

  15. Sharlin says:

    Really! it's good……

  16. coldstar says:

    Nice work F12 team.

  17. Stilgar says:

    Cool. I just learned what icon is what and they are removed 🙂

  18. Feng says:

    still missing Sources tab like the one in Chrome.

  19. Michael Haberle says:

    This is fantastic and very much appreciated!

  20. AIVARS says:

    VAI KADA NEVELAS IZGERPTIES SKAIPAA UN PAVELET MAN AR SO TO/?

  21. K Mishra says:

    This is definitely appreciable. It will add more value to the tool if you have "Sources" tab.

  22. SaschaNaz says:

    Well… it seems I cannot scroll anymore, this time horizontally. Do I have to click the arrow and select the wanted item? I don't think clicking an arrow button is better than scrolling…

  23. Yuhong Bao says:

    @Dale: unfortunately the dev tools is part of the browser itself and can't be updated separately.

  24. RichardDeeming says:

    Still no fix for the empty emulation drop-down lists problem which was closed as "fixed" in July.

    connect.microsoft.com/…/ie11-emulation-screen-document-mode-and-user-agent-dropdowns-blank-for-all-sites

  25. DvdBrink says:

    Looks great guys very nice. Can't wait to try it out!

  26. John says:

    Can this updated f12 tool be installed as a standalone for IE8/or upgrade existing f12 devtool(in IE8)?

  27. bucha says:

    is this update available for IE11 on Windows 10?

  28. Yannick says:

    @Bucha – Nop. Saddly. When it comes to features, the IE11 in Windows 10 stands at the same level as version 11.0.8 for Windows 8.1 from May earlier this year. There isn't a search bar on the new tab page either, etc. They probably fix that with the next build on September 21th, when we hopefully get to see IE12.

  29. hchan says:

    Unfortunately, I can't use the new debugger at all. No files found by the debugger tab, and the DOM explorer tab shows a stacktrace from an exception: "Exception in window.onload: Error: An error has occurred JSPlugin.3005"

    Seems to be a JS function being called in F12Resources.dll/23/pluginhost/plugin.f12.js

    Of the tabs available, the only ones that work are the Network and Profiler tabs.

  30. Feng says:

    css sources are still not available

  31. Ankit says:

    Everything is so good but fu***** Dev channel ie stopped working.  Now you force me to install windows 10 to just tried ie12. If I do it support  blame me for install win10. So how I can install it in future.

  32. Tim says:

    What's the KB # for this update?

  33. Ben says:

    I second hchan's report… see this forum post for others' report… answers.microsoft.com/…/09b4f305-e436-4615-a8a5-705b0bc85bbd

    HELP! 🙂

  34. aaa says:

    It'll be a comment unrelated to an article, but please stop to teach some bugs and defects by an update every month.

    Very perplexed.

    Is it inspected with a test accurately for your production?

  35. mherchel says:

    Can you update the images on modern.ie with these changes?

  36. Chris Love says:

    @Feng, @K Mishra – Chrome's Sources is IE's Debugger, they have screen shots in this article if you are still confused.

  37. NumbStill says:

    @Chris Love –

    It is not the equivalent… you cannot live edit scripts, for example. The hierarchy is practically non existent. I do not think CSS shows up there, too.

    I think it is kind of like the equivalent of the "Scripts" panel that shipped with Chrome 1 – 4 (approximately), though.

  38. Jason says:

    Redesigning, renaming, rebranding.. Microsoft is just good for this kind of stuff.

    Use Chrome for a day (if you know how to) and LEARN something!! You guys are looking like a joke.. You can't make a multi line selection and multi-line pasting in Styles mode in a WPF control? You have the whole Microsoft resources at your disposal: people who invented WPF. I heard this F12 tool is written in TypeScript? Those guys still work for Microsoft right? I can do that in one hour (at least multi line copy).

    This drama is not interesting anymore. Get real! No real developer in the world uses your F12 dev tools for real business, because:

    1- You guys do NOT want to address the BASIC needs of majority (90+%) of front-end developer: |improve DOM and Styles explorer| PERIOD.

    2- You guys are investing on features, which nobody is interested in. Chrome is setting the trends here. Live with it or live with yourself!

    3- You guys do NOT want to get criticized anywhere: github.com/internetexplorer, uservoice, or connect.  Where can we have open discussion? Twitter? No way! You never answer a real question there. Enough being fanbois thakyous savvy. Get REAL GET REAL! You are already too late..

    4- You guys still think you are in position of deciding how to constraint the features of OPEN web: where is input[type=date/time/dayofmonth] with validations and all, where is the micro-styling for type=range control, where is XYZ feature which Chrome has for like 3+ years. Under consideration? This is absurd. Hire more force. Web is the present and Web is the future.

    5- The color picker should appear on changing colors in style. It could be color/background-color/gradient etc. But no, you will put it on TOP, which makes no sense.

  39. Jason says:

    6- VS team already has EXCELLENT AST for CSS, LESS and SASS, why not reuse it and enhance in those dimensions? The style part of DOM is worse than IE7. Get help from Mads Kristensen, Peter Spada and those next-gen folks. GET REAL with the ERA!!

    7- Name one IDE of the world, which has excellent support for schema-based JSON? Visual Studio 2013. Name one browser in the world, which is so dumb that it can't even render JSON: Internet Explorer! Visual Studio and Internet Explorer belongs to same corporation. See the "missing part"?

    8- Compare your "simulator" toy with Chrome's. Don't tell us you are trying hard (its being 25 years now). Its not enough. IE is the oldest team out there and yet the worse. Chrome, Opera, FF, they all are new!

    9- Fuzzy-search intellisense in Console! "classname" should show getElementsByclassname. No, we will still have 1990's looking suggestion box with no sense of syntax highlighting. It was Microsoft guys who "invented" syntax highlighting back in 80's right?

    10- I can design the entire theme in Chrome, copy-paste the CSS back to IDE or even publish it directly to WordPress from Chrome tools (it supports plugins!). I know I can do the same in IE11 but it will double my effort. How? after typing every property value, I have to mouseclick to add new! And there is no free style editing mode, where you can copy-paste chunks and comment some stuff (with intellisense).

    These are some basic features, which every bang-for-a-buck browser is offering today, but missing from IE.

    This version of F12 tools is a resource hog as the previous version. Takes down the whole system resources in couple of minutes of usage..

    In next 10 years, we will probably be asking for the same basic features, which Chrome would be prevailing with ECMA7 or 8, HTML6 and many superset languages.

    If Microsoft do no want to invest on Web Browser seriously, then they should open source it or dump it sooner rather than later.

  40. Yannick says:

    @Jason – Relax, if you think Chrome is so much better, go scream there. But a couple of notes to your comments:

    2 – What features are that?

    3 – It's your kind of comments that make them not listen in the first place.

    4 – Go read some of the previous blogposts about prety much exactly the features you mention. To move to your Chrome-note: Chome might have these features for some time already, that doesn't mean they are implemented corretly (and they wheren't, for the matter of fact).

    8 – Opera is older the Internet Explorer. Also, how is Opera better if they don't have their own developer tools in the first place? They are just using those from Chromium.

    And "every bang-for-a-buck browser" is a weird statement to make when there are only 3 of these: Internet Explorer and Firefox are using their developer tools, and Chromium browsers are just copying each other. Also, not all of your points are features in the first place.

    Also, there are no plans for a HTML6 for some time, we're going to stick with updates to HTML5 for a while (HTML5.1 and HTML5.2 beeing the first ones).

  41. NumbStill says:

    @Yannick –

    4. I came to realize that Chrome is not the only browser that does not fully implement features or standards, Internet Explorer does it too (and of course, the rest). Different features get different levels of implementations. Every browser does that.

    The rest of your comment really deals with semantics (Opera is Chromium based, Opera does not have its own developer tools, HTML5.1 instead of HTML6 and so on). Semantics do not justify stuff.

  42. Jason says:

    @Yannick, read lot of your comments previously. I didn't take you as fanboy. But you never know right? Defending IE's incapabilities would not put you in a better place than you are now.. chew on that!

    > What features are that?

    Have you read my first point? DOM explorer and styles editor need serious attention, more than memory profiler, UI responsiveness test (? I am yet to meet a developer — a real person — who actually has EVER used this responsiveness test thing)?

    BTW Have you used Chrome F12 tool? If you have at some point use the latest one again and go compare features one-by-one again. Also try firebug. There is a LOT MORE things that can happen in the arena of CSS and HTML editor part of dev tools…

    > It's your kind of comments that make them not listen in the first place.

    No, its people like you who make them believe that they are on the right track and everything is OK when its not. Being a nodding head is not going to improve things with your beloved browser. Had you been a front-end developer like me, you would have known the reality of working with IE dev tools vs Firebug and Chrome's tools everyday for 6+ hours. I work on various dev tools on daily basis (more than VS2013 IDE, which is always connected with browser via Browserlink/signalr). Normally I don't try to justify my frustration, for me it is what it is.. but seriously ask ANY front-end/UI designer  or developer in your vicinity and you will come to know about more reasons why people are least interested. And who is happy with these "enigmatic" features, folks who don't (or seldom) use it.. So please stop picking on my HTML6 reference, because I am taking time to comment on where they are heading, when nobody is caring!

    Historical references were not accurate, but you get the point.. IE has most experience. More than FF and Chromium. We NEED them to bring something better, something revolutionized to the table, which makes the UI folks life easy! Also, IE gets one version update over the course of 1-1.5years, when FF and Chrome are going @ 3-5+ updates each year. So they NEED to make changes somewhere to catchup with standards QUICKLY or go open source and cut the deep ties with OS! (btw this "because IE is integrated with OS" is the same excuse which VC team gives for cl.exe being integrated with VS and yet inseparable, which concerned people know is a bunch of crap)

    Hint: try to follow what WebDev (Mads Kristensen et al.) team at MSFT (guys who make web tools for VS: blogs.msdn.com/…/webdev), they have done a lot of stuff which IE tools are yet to come closer to. This major disconnect between Microsoft teams is the sole reason of disparity of features among their related products.

    Do I want them to "improve" or just bashing them without giving them reasons? Think twice.

  43. Frank says:

    The text menus are much better, the overflow secondary menus are great and the fact that they were pushed out to current existing versions (at least here on Windows 7 with IE11) are three simultaneous wins. Debugging with IE 11 was a burden, now I can simply concentrate on being productive: thank you!

  44. NumbStill says:

    @Jason –

    You are referring to main areas in general, but Yannick asked for specific features, really.

    "The DOM Explorer is not good enough" is not a good enough comment, what should be improved? What is missing? What is buggy?

    You cannot say that everything is buggy, because some stuff does work.

    You can use UserVoice for features you are missing and Connect (yeah, I know) for bugs.

  45. Anirudha says:

    I blogged about killing developer channel IE for windows 7 here geekswithblogs.net/…/internet-explorer-developer-channel-is-discontinued-for-win7.aspx

  46. Singh says:

    Definitely the better with the tab names, instead of having to guess which tab is which.

    The following features would help:

    1. In the debugger, having the console window.  Or the ability to pull the console window from the bottom in any tab.

    2. Easier to discover settings like disable cache, etc.

    3. Button to enable automatic network logging.

  47. hchan says:

    Update to the issue I was having before, I ran a round of windows updates and found IE-related updates KB3008923 and KB2976627. Installed both and now have a working debugger in IE11. I'm not sure which one fixed it.

  48. Samuel MacLachlan says:

    I love the new Developer toolbar. The horizontal view is so much easier and even quicker to work in (not having to think what the icons might mean). Great job!

  49. Vitor Canova says:

    Why does this changes are not currently present in Windows 10 build 9879?

  50. Curtis Sellers says:

    Can you get yahoo to change my phone number to 601-408-5460  ?  My old number was 601-408-5559  my email is b31curtis@yahoo.com