IE10 Compat Inspector


Compat Inspector is now available
for IE10. Use Compat Inspector to quickly identify if Internet Explorer platform changes affect your site. Whether you’re
preparing for IE10 or still updating for IE9, run Compat Inspector on any page experiencing problems. Then watch for messages
explaining potential issues and steps you can take to resolve them.

Screen shot of the new IE10 Metro style Compat Inspector.

About Compat Inspector

Compat Inspector is a JavaScript-based testing tool that analyzes your site while it runs. Compat Inspector reports patterns
of interaction which cause issues in recent modes. This allows you to identify problems quickly without memorizing a bunch
of documentation or searching through the entirety of your site’s code. We developed Compat Inspector during the course
of IE9 to speed up the process of recognizing common issues across different sites and have now updated it for IE10. Along
the way, many members of the IE team contributed to the set of test cases that make up the rules in Compat Inspector.

Compat Inspector is designed to help sites migrating to IE9 or IE10 mode—not those running in legacy modes.
You can test sites that run in legacy modes by selecting a more recent mode via the F12 developer tools.
Just press F12 to open the tools, click on “Document Mode” in the menu bar, then select “Standards”.
You may need to refer to more detailed documentation such as the
IE9 Compatibility Cookbook
or the
IE10 Developer Guide
for some issues. The best pattern is to use Compat Inspector
first, then fall back to the documentation if nothing is found.

Using Compat Inspector

Run Compat Inspector by adding the following script before all other scripts on each page you want to test (the need to run before other scripts means Compat Inspector can’t be used as a bookmarklet):

<script src=”http://ie.microsoft.com/TestDrive/HTML5/CompatInspector/inspector.js”></script>

 

This will place a status widget in the upper right hand corner of the page. Click the widget to get more information.

Screen show of the Compat Inspector widget displayed when its installed on a page.

You can streamline this process by using Fiddler to automatically inject Compat Inspector
on pages you visit. Just add
this snippet
to your
Fiddler Script
to get up and running. This configuration also automatically inspects all sub-frames in a page.
Once the snippet is in place you can toggle Compat Inspector on and off from Fiddler’s “Rules” menu.

Screen shot of Fiddler's Rules menu showing the "Use Compat Inspector" menu item.

Go hands-on to get a feel for the improvements using the
Compat Inspector Test Drive
. Then visit the
Compat Inspector User Guide
to learn more about how to test your own sites.

—Tony Ross, Program Manager, Internet Explorer

Comments (18)

  1. a says:

    When will you release win 8 beta?

  2. fr says:

    Sounds useful. but how about making this an option in the IE developer tools?  If you want to encourage developers to use this to test their sites you need to make it as convenient as possible.

  3. b says:

    Any news future Platform Previews — it would be great to have another one that installs on Windows 7.

  4. Rob says:

    If IE changes will affect my site?! When doesn't anything IE does not affect anyone's site?

  5. cjw says:

    Thanks, but what's Microsoft Expression web for then? Or Superpreview?

  6. N. Sun says:

    This is nice. When is the beta coming out? Also, I like the IE9 Beta logo better than the IE9 RC and stable release logo. It's a little darker, but looks much more beautiful and welcoming to me. Hopefully the IE team will take a look into that.

  7. SiSL says:

    So, when will we able to test it without installing any Windows 8?

  8. Feature Request says:

    Please add a "Paste & Go" and "Paste & Search" context menu item when we right click on the address-bar. Go / Search can be alternatively shown based on the content of the clipboard. This is a tiny but useful feature.

  9. Feature Request 2 says:

    Beyond Paste & Go, lets not forget about "Close all tabs at right of this tab", "Close all tabs left of this tab" context menus 🙂

  10. Marco says:

    Please take the following points from Web Designer's community for extensibility in F12 developer's tools:

    1. While inspecting with the F12 developer tools, the asynchronous page update doesn't immediately update the code in devtools’ HTML tab. We need to press refresh button (in its HTML tab). Live update is missing!

    2. When we click 'edit' in the HTML tab, it should narrow down the inner code to that of the highlighted tag and show it's innerHTML (only) in edit mode; as opposed to show the code of entire body. This makes it more complicated in live update for designers and testers.

    3. Also, let us live edit the DOM in the head section of the document as well.

    4. Implement autocomplete for Style while creating or editing rules in both CSS and HTML tabs.

    5. Preview of images with dimensions onmouseover in tags such as <img src=….>, <input type=image….> or image embedded in stylesheet.

    6. Color picker in Style section of HTML tab and CSS tab as well.

    7. Implement an easy way to add a new Style rule in HTML tab rather than switching to the CSS tab. For example; pressing <enter> for the first time should highlight-to-edit the name of the selected rule, next <enter> should switch the focus to that rule’s value then next rule's name and its value and since so forth, until it reaches the end of the rules of that selector. After that, the next <enter> should cause the creation of new rule's name-value pair under the same selector. Also a double click at the end of the last rule of a selector should create a new-rule. So this way, if the users have to create new rule promptly, rather than going to CSS tab and find the selector then right click to select AddRule, within the (right-side: Styles of) HTML tab, they select the last value of the desired selector and hit enter or double click to create a new rule. (ofcourse this happen in Firefox and this makes the UI debugging and fixing process so very much easier for us!)

    8. In console tab, show the Ajax request which is being called on the current page like Firebug does.

    9. The Style section of HTML tab lists the parent rules/style first then the immediate rule on the element at the bottom… if the inheritance list is long, the immediate rules goes down deep. This has to be in reverse order: immediate rule applied on element > inherited parent's rule > then grand-parent's…. and so on. This happen is Firefox as well. Make us (the designers) more productive and this is more logical as well. 🙂

    These are the few salient features missing in F12 dev tools for developers and designers. For more classical examples, please see the sections of Firebug plugin!

    Thank you for reading my feedback. Honestly, these features means alot for many many designers and UX testers and it shall make them very productive when dealing with IE! FF got firbug and so does Chrome and they both have built-in tools too which are swifter and flexible due to the about mentioned usability features.

  11. Greg says:

    Does the compat inspector know when it finds a hack that is used specifically to overcome IE's broken DOM, JS or CSS?

    Although we would love to see our code work perfectly in all browsers – the reality is that IE still needs hacks applied due to issues with long standing IE bugs and backwards support for the bugs that we have requested over and over and over and over and over that Microsoft remove from IE versions at least when running in standards mode.

    e.g. IE will not be respected as a modern, standards based browser as long as IE continues to merge items into the same namespace if the NAME and ID attributes are similar.  They have **NEVER** been part of the same namespace, and **NEVER** should be – they represent 2 massively different concepts… ID's are unique, singular values on any element…. NAME's are groups of "n" element(s), for things like form elements.

    Until MSFT fixes this IE will never be considered a top 4 browser according to developers.

  12. Win7 says:

    I also really hope for a win7 test version soon – I can't wait for the new html 5 features 🙂

  13. hAl says:

    Not going to bother with testing anything for IE10 untill MS releases a W7 version.

    It is a non-product at this time which is evident as people are not discussing anything IE10 related on this blog.

    You do not give us a Windows 7 version => You do not get feedback !!!

  14. @hAl says:

    Shake your lazy ass and download Win8 dev-preview …

    ~STOP PROCRASTINATING~

  15. Auto112.eu says:

    when will we able to test it without installing any Windows 8?

  16. Waseem says:

    this is a little of subject but I've got a few comments about the new IE 10 !

    did you guys know that on the metro UI of IE 10, youtube does not work ?

    Also without the support for flash, even facebook videos are not playing now !

    and one suggestion, is to show a list of previously visited sites when tapping and holding the back button.  

    Thanx 🙂

  17. Waseem says:

    youtube.com/html5 and enable it… then you can watch youtube.. and flash.. yeah about that!! since HTML5 is becoming more and more industry standard flash is becoming a history.. if you dont believe .. try playing "Cut the Rope" (http://www.cuttherope.ie/) in IE9 or 10.

  18. BetterToday says:

    What about IE10 when running within an application as an ActiveX/.NET control?

    IE8 had the problem that several version related properties could not be set directly. Instead programmers needed to ponderously set these properties somewhere far far away in the registry. (See comments @ connect.microsoft.com/…/internet-explorer-doesnt-render-correctly-when-embedded-as-webbrowser-control )

    Will IE10 finally provide an appropriate public ActiveX interface with properties to set all the "FeatureControl" properties directly (see msdn.microsoft.com/…/ms537184.aspx )?

Skip to main content