How to bring back "Browser mode" in IE11?

Question

UPDATE: The old question applies only to IE11 preview; browser mode had returned in final release of IE11. But there is a catch: it is next to useless, because it does not emulate conditional comments. For example, if you use them to enable HTML5 support in legacy IEs, you will no longer be able to debug your site in IE11.

        <!--[if lte IE 8]>
            <script src="html5shiv.js"></script>
        <![endif]-->

Read another StackOverflow question and IE bug tracker issue. Microsoft never responded to this, so it looks like they introduced this bug on purpose to steer people into buying BrowserStack subscriptions. Conditional comment emulation worked just fine in preview release.

ORIGINAL QUESTION: When IE11 preview is installed on Windows 7, it comes with old-fashioned F12 tool which allows to change browser modes.

However, if you go to "Tools" menu and select "F12" developers tool, it gets replaced with new developer tools, and "Browser mode" is no longer available.

The only way to bring it back is to uninstall IE11 and reinstall it.

Is there easier way to switch between browser modes in IE11?

Solution 1

[UPDATE]

The original question, and the answer below applied specifically to the IE11 preview releases.

The final release version of IE11 does in fact provide the ability to switch browser modes from the Emulation tab in the dev tools:

Having said that, the advice I've given here (and elsewhere) to avoid using compatibility modes for testing is still valid: If you want to test your site for compatibility with older IE versions, you should always do your testing in a real copy of those IE version.

However, this does mean that the registry hack described in @EugeneXa's answer to bring back the old dev tools is no longer necessary, since the new dev tools do now have the feature he was missing.

---

[ORIGINAL ANSWER]

The IE devs have deliberately deprecated the ability to switch browser mode.

There are not many reasons why people would be switching modes in the dev tools, but one of the main reasons is because they want to test their site in old IE versions. Unfortunately, the various compatibility modes that IE supplies have never really been fully compatible with old versions of IE, and testing using compat mode is simply not a good enough substitute for testing in real copies of IE8, IE9, etc.

The IE devs have recognised this and are deliberately making it harder for devs to make this mistake.

The best practice is to use real copies of each IE version to test your site instead.

The various compatiblity modes are still available inside IE11, but can only be accessed if a site explicitly states that it wants to run in compat mode. You would do this by including an X-UA-Compatible header on your page.

And the Document Mode drop-box is still available, but will only ever offer the options of "Edge" (that is, the best mode available to the current IE version, so IE11 mode in IE11) or the mode that the page is running in.

So if you go to a page that is loaded in compat mode, you will have the option to switch between the specific compat mode that the page was loaded in or IE11 "Edge" mode.

And if you go to a page that loads in IE11 mode, then you will only be offered the 'edge' mode and nothing else.

This means that it does still allow you to test how a compat mode page reacts to being updated to work in Edge mode, which is about the only really legitimate use-case for the document mode drop-box anyway.

The IE11 Document Mode drop box has an i icon next to it which takes you to the modern.ie website. The point of this is to encourage you to download the VMs that MS are supplying for us to test our sites using real copies of each version of IE. This will give you a much more accurate testing experience, and is strongly enouraged as a much better practice than testing by switching the mode in dev tools.

Hope that explains things a bit for you.

Solution 2

While using virtual machines is the best way of testing old IEs, it is possible to bring back old-fashioned F12 tools by editing registry as IE11 overwrites this value when new F12 tool is activated.

Thanks to awesome Dimitri Nickolaѕ for this trick.

This works for me (save as .reg file and run):

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Toolbar\WebBrowser]
"ITBar7Layout"=hex:13,00,00,00,00,00,00,00,00,00,00,00,30,00,00,00,10,00,00,00,\
  15,00,00,00,01,00,00,00,00,07,00,00,5e,01,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,69,e3,6f,1a,8c,f2,d9,4a,a3,e6,2b,cb,50,80,7c,f1

Solution 3

You can get this using Emulation (Ctrl + 8) Document mode (10,9,8,7,5), Browser Profile (Desktop, Windows Phone)

Solution 4

Easiest way, especially if in MSDN,,wasted hours of my time, stupid MS

http://support.microsoft.com/kb/2900662/en-us?sd=rss

1. Open the Developer Tools pane. To do this, press F12.
2. Open the Emulation screen. To do this, press Ctrl+8.
3. On the Document mode list under Mode, click 9.
4. On the User agent string list under Mode, click Internet Explorer 9.

Solution 5

You can work around this by setting the X-UA-Compatible meta header for the specific version of IE you are debugging with. This will change the Browser Mode to the version you specify in the header.

For example:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

In order for the Browser Mode to update on the Developer Tools, you must close [the Developer Tools] and reopen again. This will switch to that specific version.

Switching from a minor version to a greater version will work just fine by refreshing, but if you want to switch back from a greater version to a minor version, such as from 9 to 7, you would need to open a new tab and load the page again.

Here's a screenshot:

View more solutions

Comments

[Evgeny]

So what I see on screenshot 1 is, basically, a bug in IE11?

[Evgeny]

And browser mode is still here, it is just that MS does not want me to use it. Thank you very much, MSFT. I would appreciate, if you somehow forced IE7 and 8 and 9 users to upgrade instead of making testing on old IEs as hard as possible.

[Spudley]

@EugeneXa - re screen 1 being a bug... yes, I think so. The old IE10 dev tools should never appear in IE11. I got the same thing, and it is definitely wrong.

[Spudley]

Re your second comment.... in fact, IE9 onward upward has an auto-update feature and MS are forcing IE9 users to upgrade. The auto-upgrade can be switched off but a fairly large chunk of the IE9 userbase has moved to IE10 fairly quickly since they started the update program. IE10 will do the same to IE11 when the time comes. But in any case, testing using compat mode is a bad idea; that's the whole point here. It isn't really compatible enough to be used for testing. It's only there as an aid for corporate users with internal sites written for specific IE versions to allow them to upgrade.

[Evgeny]

I haven't tried X-UA-Compatible trick yet, but I am already thinking of writing a browser plugin that injects this header into a page to allow developer to switch to a different browser mode.

[Evgeny]

Sorry I un-accepted this answer, but I just found a way to do exactly what I wanted - to bring back old tools to IE11 by editing registry (see another answer).

[Spudley]

@EugeneXa - fair enough if you really want to do that, but seriously, the new IE11 dev tools are so much better than the old one; I can't believe you actually want to do that just for the sake of getting the compat mode toggle.

[Spudley]

I don't know whether to be impressed that someone managed to find a way to hack IE11 to get the old dev tools back, or depressed that they were willing to sacrifice all the amazing new stuff in the IE11 dev tools just for the sake of being able to switch the browser mode. :-(

[Evgeny]

They are much better, completely agree with that. And yet IE adoption among web developers is very very small: people are already used to Firebug and Chrome Dev Tools (although hopefully it will go up in the future). So the most popular use for IE F12 tools is to emulate older IEs before everything goes to QA who have proper virtual machines with XP and IE8.

[Evgeny]

That has everything to do with Microsoft's legacy of producing non-W3C standard compliant browsers. There is nothing wrong with IE10 or 11 - they are fine modern browser. It's all about 9 and 8 and, until recently 7 and 6. Since it is impossible to install them alongside modern IE in, Windows 8, good emulation tool is needed.

[Spudley]

You can use a VM to run old IEs; MS provide them for free on modern.ie (tho granted it's a large download!). Or you could use browserstack.com to test them online and other browsers too including mobiles. (that's a paid service, but also on modern.ie MS are giving away three-month subs to browserstack at the moment. But the main point I'd make is that testing for IE8/9 compatibility using compat mode in IE10 (or 11) is wrong, because compat mode is seriously flawed to the point of making your tests irrelevant. Which really does make this whole hack a bit pointless.

[EricLaw]

The trick here is interesting, but obviously not supported by Microsoft and could have side-effect that are unintended.

[ivarni]

I don't think this is pointless at all. My workflow when testing IE is to first use the F12 compat mode and flesh out any problems I find and THEN I go through the trouble of firing up a VM. This is a lot more efficient than doing all IE testing in (different) VM(s).

[ivarni]

While testing using the free VMs provided by MS is absolutely better it is also more time-consuming. I have to fire up the VM, I have to switch between several different VMs and I have to reinstall the little buggers every time the activation timer runs out as they didn't provide any activation keys. Still, I guess we should be thankful they actually took the trouble of setting these VMs up. You could catch a lot of gotchas with the old F12 compat modes and then verify once using the VMs. But I digress.

[lnostdal]

Ah, the wonders of easy to use MS tech – and people keep telling me this "Linux terminal stuff" I do is silly and hard...

[LocalPCGuy]

I understand why they think it's a good idea to deprecate the Compatibility mode dropdown, but I think it is also a slap in the face to any dev who actually spends time making sure their site works in IE. As others have mentioned, checking for obvious bugs using the compatibility checker worked well. Plus you had the advantage of a halfway decent set of dev tools (compared to the garbage that was the tools in IE7 and even 8.) I make a practice of checking in the VMs also, any good dev would. But this change is just going to mean less devs care about getting things working in old IE.

[LocalPCGuy]

As an aside, I should not have to load up a full OS in a VM to test a stupid browser. If Microsoft really wanted devs to make sure their stuff works in older versions of IE, they should provide a better FREE option for doing so. Otherwise, it sure seems like they are encouraging devs to just ignore the old versions and only worry about working around the bugs in the newer versions.

[Spudley]

@LocalPCGuy: VMs are provided for free (see modern.ie). Also, if you want a better option, try BrowserStack.com. That isn't free, but is a very useful service. And MS have done a deal with them to give away free 3-month subs, so there you go; they've done what you wanted. Again, go to modern.ie for more info (as an aside, browserstack also allows you to test other platforms like Safari on macOS and various mobile platforms, which can be even harder to test against - you think a VM for IE8 is a pain, but at least it doesn't require buying extra hardware)

[LocalPCGuy]

Spudley, any good dev will ALSO test in a VM on a real version. But compatibility mode was extremely useful for catching layout and other minor issues before doing a full compatibility sweep with actual browsers in their native OS. It also gave the ability to use a halfway decent dev tools rather than the garbage that shipped with older versions of IE.

[LocalPCGuy]

Nope...BrowserStack isn't free, VMs are a pain in the butt to use (don't tell me otherwise, I have them all setup, and have to reset them every 3 months, etc...they are a pain). I know all about Modern.ie and Microsoft's offerings. Microsoft is taking away a simple, free method that worked for about 90% of the things most devs need to test, and replacing it with cludgy VMs or pay services. Color me not impressed. And I am one of the Microsoft supporters, work primarily in a .NET shop. And I think this is DUMB.

[Ian Yates]

To make this reg hack work for me I also had to update the ITBar7Layout64 value. It worked then, however closing and opening F12 tools crashed IE :) Good thing I made a backup of the reg key.

[Zenexer]

I see this as: "We screwed up, and we gave you the wrong tools to deal with our mistakes, so now we're going to point you toward tools that give us money."

[rbu]

Has no effect in current IE11 release which has its own Document Mode chooser. Unfortunately, their new document mode is nowhere near as good as browser mode was in IE10.

[Mark Amery]

You say The final release version of IE11 does in fact provide the ability to switch browser modes using the dev tools. How? I don't see such an option. A screenshot would make this answer far more useful.

[Spudley]

@MarkAmery - There's a link posted in the comments on the question which points to an article that includes a screenshot. For completeness, I'll repeat the link here: IE11: Browser Modes Return. To help you find it, the "Emulation" tool is the bottom-most icon in the list of tools in the new F12 window, and the browser mode is the first item on that panel.

[satyavrat]

@Spudley unfortunately IE11 is causing us issues within Sharepoint editing the OOTB web parts so we have also had to go back to IE10. I wish I could make use of the new tools..

[Michelle]

Thank you for sharing where to find that, I was stumped! :)

[Anil]

Just a courteous FYI, try to include the details of the resolution, rather than simply providing a link. If the link ever goes down, then the answer is useless to a person in the future. The link is helpful, but keep it as a linked reference to the information you include in your detailed answer.

[Rama]

Last time I looked Expression Web / Super Preview only provide static snapshots of a page in various browers. Whilst this is what pixel-perfect web designers want, its not what devs want - we want to interact with pages, debug js and CSS and manipulate the DOM, and that's where the IE developer tools come in.

[Spudley]

@DannyG: there has never been an IE6 mode in any IE version. The only way to test your site for IE6 compatibility is to actually use IE6.

[DJG22]

@Spudley ok ok, thanks, it's amazing still that some people email you telling you some customer site doesn't look good on ie6

[Spudley]

@DannyG - I haven't supported IE6 (or IE7) for some time. I suggest you do the same. If people are complaining, you might want to remind them that formal support for IE6 (and WinXP) ends in just a couple of months, after which anyone still running it can expect their systems to be hacked almost immediately.

[Neeraj]

Is it possible to make IE9 Default Browser Mode (Changed from IE11 to IE9) until i change it manually?

[Spudley]

@neeraj: not that I'm aware of, no. (If you have a specific reason for needing this, try asking a new SO question with a bit more detail about your situation; maybe someone will be able to offer a solution for you)

[enigment]

On my machine, the Document mode dropdown contains only blank entries. Does anyone else see this? Am I missing something obvious? Any direct (w/o registry hacks or VMs) ways to get this working? I'm on Windows 7 Pro SP 1 using IE 11.0.9600.16476, which I believe is the latest as of now.

[Zenexer]

@saille I don't have it in front of me at the moment, but I'm pretty sure it's interactive.

[Zenexer]

That just changes the user agent string; it doesn't change how the browser behaves. It's completely useless for compatibility testing.

[Zenexer]

That just changes the user agent string; it doesn't change how the browser behaves. It's completely useless for compatibility testing. Also, your example is using X-UA-Compatible.