Jaa

IE9 Compat Inspector

  • Artikkeli

With
IE9 now released, we want you to serve IE the same markup as you do for other browsers,
and make sure your site works great running in IE9 standards mode.
We recently blogged about
preparing your site for IE9,
and you can check out the
Internet Explorer 9 Compatibility Cookbook for lists of changes that may impact your site
or the Internet
Explorer 9 Guide for Developers for a more complete list of what's changed.
Today we are introducing a new resource that can help speed up the process of preparing your site: 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 standards mode.
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.
Along the way many members of the IE team contributed to the set of test cases
that make up the rules in Compat Inspector. Now we're making it all available to you.
Check out the
Compat Inspector Test Drive to try it out before using it on your own site.

Compat Inspector is designed to help sites migrating to IE9 Standards Mode,
not those running in legacy modes.
You may still need to refer to the above documentation for some issues.
The best pattern is to use Compat Inspector first,
then fall back to the documentation if nothing is found.


How do I use it?

To use Compat Inspector, add the following script before all other
scripts on each page you want to test:

<script src="https://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js"></script>

Note: If you have Fiddler,
you can automatically load Compat Inspector on all pages you visit by
adding this snippet
to your
FiddlerScript (which is particularly helpful if your page uses frames).
I recommend installing the
FiddlerScript Editor extension if you don’t already have it.

After you have the above script in place, open your page in IE9 and start using
it. Explicitly test any interactions known to be working incorrectly (only executed
code is analyzed). Compat Inspector will keep a running total of all errors and
warnings associated with detected issues. A summary view in the upper right hand
corner of the page displays the results:

A screenshot of the Compat Inspector summary view showing one error, zero warnings, and zero info messages.

Click on this view to expand it and obtain detailed information about each detected
issue with links to relevant documentation:

A screenshot of the Compat Inspector details view. The view has three tabs: "Message Log", "Tests", and "Verifiers". It also contains a link for "Help". The "Message Log" tab is focused. It contains four checkboxes labeled "Show Errors", "Show Warnings", "Show Info Messages", and "Show Duplicates". All checkboxes are checked except for "Show Duplicates". In the content area below the checkboxes one error message is displayed. The message reads "ERROR: The createElement API no longer accepts angle brackets '<>'. This is a deliberate change made in IE9 Standards Mode for interoperability with other web browsers and compliance with DOM Level 3 Core." Additionally the message contains links to resources to help resolve the issue and two unchecked checkboxes labeled "Verify" and "Debug".

Most errors and warnings also provide two additional actions for further investigation:
"Verify" and "Debug."


"Verify" Workflow

Some test cases have built-in "verifiers" that emulate legacy behavior. This allows
you to confirm the root cause of an issue before making any changes to your code.

Prerequisite: Compat Inspector is opened in the detailed information view
and displaying an error or warning message containing a checkbox labeled "Verify."

  1. Click the "Verify" checkbox for the issue you want to confirm

    Another screenshot of the "createElement" error message. This time the checkbox labeled "Verify" is checked.

  2. Refresh the page (You'll see a notification that the verifier has been enabled)

    A screenshot of an informational message stating "INFO: The verifier The createElement API no longer accepts angle brackets '<>'. has been enabled. This message contains a single checkbox labeled "Verify" which is checked.

  3. Repeat the steps that originally triggered the error or warning

  4. If the issue still occurs

    1. If error or warning messages are still displayed, repeat steps 1-4 for each remaining
      message
    2. Otherwise, Compat Inspector cannot fully identify this issue. Refer to the IE9 documentation
      for additional help.

  5. Otherwise, you've identified the root cause of the issue

    1. Uncheck all "Verify" checkboxes

      Another screenshot of the "createElement" informational message. This time the checkbox labeled "Verify" is unchecked.

    2. Refresh the page

    3. Follow the "Debug" Workflow below to locate the source of each message in your code

    4. Follow the instructions in the displayed error/warn messages to resolve the issue

    5. Note: Also look for any "if IE" checks controlling the execution of the problematic
      code. IE9 typically works best when given the same code as other modern browsers.


"Debug" Workflow

Compat Inspector can also help you isolate where in your code things went wrong
via the "debug" feature.

Prerequisite: Compat Inspector is opened in the detailed information view
and displaying an error or warning message containing a checkbox labeled "Debug."

  1. Click the "Debug" checkbox for the issue you want to investigate

    Another screenshot of the "createElement" error message. This time the checkbox labeled "Debug" is checked.

  2. Open the F12 developer tools by pressing the F12 key

    A screenshot showing the initial view of the F12 tools.

  3. Switch to the "Script" tab

    A screenshot showing the "Script" tab as focused in the F12 tools.

  4. Click "Start debugging"

    A screenshot showing the "Start Debugging" button as focused in the F12 tools.

  5. Repeat the steps that originally triggered the error or warning (This will invoke
    the script debugger)

    A screenshot showing a snippet of JavaScript paused in the F12 tools. The code contains the JavaScript statement "debugger;" with a comment informing readers that the break point was triggered by Compat Inspector with instructions to look at the next item up in the call stack.

  6. Switch to the "Call stack" sub-tab located in the right half of the F12 developer
    tools

    A screenshot of the "Call stack" sub-tab of the "Script" tab in the F12 tools. The call stack contains two entries (from top to bottom): "inspectorFunction" and "JScript global code". The entry "inspectorFunction" is selected.

  7. Double-click the entry visually below the highlighted entry in the call stack

    Another screenshot of the "Call stack" sub-tab of the "Script" tab in the F12 tools. This time the entry "JScript global code" is selected.

  8. Look over at the left hand side of the F12 developer tools to see the code that
    triggered the error or warning

    A screenshot showing the JavaScript code: document.createElement("<div>").


How does it work?

Compat Inspector uses features introduced in IE9. At its core, Compat Inspector
overrides native APIs using
ECMAScript 5th edition getters/setters and depends on the browser to correctly
expose APIs per WebIDL. Compat
Inspector then uses these overrides to track interactions between the page and the
native platform. This allows it to report issues at runtime as the problem code
is executed.

The rest of the Compat Inspector infrastructure makes use of various other new features
as needed. Some examples include
DOM Level 3 Core APIs,
DOM Level 3 Events APIs, and
CSS3 Border Radius. Compat Inspector also depends on features introduced
in IE8 such as
HTML5 Local Storage, HTML5
Cross-Document Messaging,
native JSON support, and
Selectors API.


My site works, now what?

Remove the Compat Inspector script from all your pages before publishing. Compat
Inspector is a test tool and should not be used in production. After that, keep an
eye on the IE blog; we may have new test cases to share in the future.

—Tony Ross, Program Manager, Internet Explorer

Comments

  • Anonymous
    April 27, 2011
    Excellent!

  • Anonymous
    April 27, 2011
    Wow! Didn't see that coming. Well done.

  • Anonymous
    April 27, 2011
    Awesome! Brilliant! :) .. Take a bow :D

  • Anonymous
    April 27, 2011
    Will this work as a bookmarklet? If so, could you make it into one for us? Thanks.

  • Anonymous
    April 27, 2011
    @Dave H No, I dont think this will work as a bookmarklet - atleast not easily. The script needs to initialize itself before page scripts run, so that it can override native APIs with custom getters and setters. That is why, the instructions in the post say it needs to be refered as the first script on the page.

  • Anonymous
    April 27, 2011
    Simple 'header body footer' use case: How to convert the following from quirks to standard mode? It should be easy but it is not. In Firefox and Webkit browsers it is doable. But not in IE standards mode (unless you give me a working example (=upgrade path)). Quirks example: <html style="width:100%;height:100%;padding:0px;margin:0px;"> <body style="width:100%;height:100%;padding:0px;margin:0px;"> <table cellspacing="0px" cellpadding="0px" style="width:100%;height:100%;">    <tr>    <td style="background-color:green;">            Green header of unspecified height </td> </tr> <tr style="height:100%;background-color:blue;"> <td> <div style="height:100%;width:100%;background-color:yellow;overflow-y:auto;">Stretching yellow body, should fill up space between header and footer<br /> A vertical scrollbar should show up when this text doesn't fit in this yellow body. </div> </td> </tr> <tr> <td style="background-color:red;"> Red footer of unspecified height </td> </tr> </table> </body> </html> Standard equivalent (in IE): <!DOCTYPE HTML> ???

  • Anonymous
    April 27, 2011
    Hi, I tried to make a bookmarklet that script but in DevTools' said:SCRIPT5007: Unable to get value of the property 'substring': object is null or undefined What I'm doing wrong? I can't use as bookmarklet?

  • Anonymous
    April 27, 2011
    Very cool tool. IE needed this about 8 years ago.  Though i'll take it now even if it is too late for IE to compete.

  • Anonymous
    April 27, 2011
    Very nice! BTW: Could you maybe release the numbers on what number of the top sites rely on which compatibility modes?

  • Anonymous
    April 27, 2011
    What I meant was: Could you please release statistics on how many of the major sites rely on which compatibility modes and therefore which compatibility modes would be the likeliest candidates for being dropped in future versions?

  • Anonymous
    April 27, 2011
    The comment has been removed

  • Anonymous
    April 27, 2011
    The comment has been removed

  • Anonymous
    April 28, 2011
    teste

  • Anonymous
    April 28, 2011
    @Steve I'm not sure I understand why you can't test your "old code" in standards mode. Even if the page doesn't run in standards mode by default, you can still use the developer toolbar to temporarily switch over so you can test. Just press F12 to open the tools, click on "Document Mode" in the menu bar, then select "Internet Explorer 9 standards".

  • Anonymous
    April 28, 2011
    @Tony that's because Steve is a hysterical wuss. Instead of trying to resolve issues he complains left and right.

  • Anonymous
    May 09, 2011
    I've come across DOZENS of pages that will not work in IE9, most from very main-stream sites.  Gmail video for one... it gives an error message about the constant and runtime values not matching (IE6 vs IE9).  Time Magazine had an interactive survey, and none of the radio-buttons or voting buttons worked.  Similarly, on several real estate sites, the "slide shows" utterly fail to work.  I've actually had to download and install Chrome as my "fall back" browser just to view and work with these pages.  It's very frustrating, as I've rarely if ever had to do this before.  In most cases, even "compatibility mode" (when it's an option) won't fix things.  It seems each week that goes by, I find one or two more pages that just don't work in IE9. This is a report as a frustrated user, rather than from wearing my developer hat.