April 27th, 2011
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 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:
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.
Click on this view to expand it and obtain detailed information about each detected issue with links to relevant documentation.
Most errors and warnings also provide two additional actions for further investigation: “Verify” and “Debug.”
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.”
- Click the “Verify” checkbox for the issue you want to confirm
- Refresh the page (You’ll see a notification that the verifier has been enabled)
- Repeat the steps that originally triggered the error or warning
- If the issue still occurs
- If error or warning messages are still displayed, repeat steps 1-4 for each remaining message
- Otherwise, Compat Inspector cannot fully identify this issue. Refer to the IE9 documentation for additional help.
- Otherwise, you’ve identified the root cause of the issue
- Uncheck all “Verify” checkboxes
- Refresh the page
- Follow the “Debug” Workflow below to locate the source of each message in your code
- Follow the instructions in the displayed error/warn messages to resolve the issue
- 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.
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.”
- Click the “Debug” checkbox for the issue you want to investigate
- Open the F12 developer tools by pressing the F12 key
- Switch to the “Script” tab
- Click “Start debugging”
- Repeat the steps that originally triggered the error or warning (This will invoke the script debugger)
- Switch to the “Call stack” sub-tab located in the right half of the F12 developer tools
- Double-click the entry visually below the highlighted entry in the call stack
- Look over at the left hand side of the F12 developer tools to see the code that triggered the error or warning
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