Enterprise IT Admin IE11 Upgrade Guide "16"-use Compat inspector to quickly locate IE compatibility issues

Enterprise IT Administrator IE11 Upgrade Guide series:

"1"--internet Explorer 11 Enhanced Protected Mode (EPM) Introduction

"2"--internet Explorer 11 support for Adobe Flash

"3"--ie11 new GPO settings

Introduction of "4"--ie Enterprise model

"5"--No Tracking (DNT) exception

"6"--internet Explorer 11 FAQ for IT Pros

Comparison of IE11 functions on "7"--win7 and Win8.1

"8"--win7 IE8 and Win7 IE11 contrast

Comparison of the functions of "9"--ie10 and IE11

"10"--How to prevent the installation of IE11

"11"-Deploying Internet Explorer 11 through SCCM 2012 and WSUS

"12"--Compatibility View list Introduction

"13"--How to migrate iemp to GPP

"14"--IE11 Proxy server Configuration

"15"--Proxy automatic configuration script

"16"--use Compat inspector to quickly locate IE compatibility issues

Use Compat Inspector to quickly locate Internet Explorer compatibility issues Compat Inspector Introduction

Compat Inspector is a JavaScript-based, automated scanning tool for quickly analyzing compatibility issues with Web sites in new versions of Internet Explorer.

Unlike other chatty compatibility scanning tools, its detection rules are based on a variety of compatibility issues found in practice, so that more targeted detection reports can be obtained. To speed up the migration of Web sites to modern browsers, during the development of the new version of Internet Explorer, many engineers of the Internet Explorer product group wrote highly targeted, high-quality test cases for the Compat Inspector Tool.

Compat Inspector also provides interactive problem location support, allowing development testers to quickly and efficiently locate compatibility issues without having to traverse documents or review the entire site's code.

It is worth noting that the design of the Compat inspector is based on the help site migrating to IE 9,10,11 Standard mode--not to test the ability of the Web site to continue running in traditional compatibility mode in the new version of Internet Explorer. Its test case is based on the differences between the standard mode and the compatibility mode.

Enable Compat Inspector

To use Compat Inspector, you need to add the following script tag before all other script content for the Web page to be tested

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

If working properly, Compat inspector will place the following status bar in the upper-right corner of the page. Click on the status bar to obtain the appropriate detailed inspection report information.

More often, we expect the testing process to avoid changes to the existing code. At this point, consider using the Fiddler tool to automatically inject the above script into the test page to achieve the same effect as adding it manually. The steps are as follows:

1. Download and install the Fiddler tool

2. Open the directory in the current user's documents\fiddler2\scripts directory of Customrules.js

3. Follow the instructions in the example to add the code into the Customrules.js:

   ..... static function Onbeforeresponse (osession:session) {          injectinspectorscript (osession);                ..... public static rulesoption ("Use Compat Inspector")       var M_usecompatinspector:boolean = false;       static function Injectinspectorscript (osession:session)       {              if (!m_usecompatinspector) return;                           Ensure we only inject into HTML              if (OSession.url.EndsWith (". js")) return;       ...

4. If you add it correctly, you can see the following menu items in fiddler.

Tick the use Compat inspector and make sure the Fiddler is in the capturing state.

5. When the page is refreshed, Internet Explorer gets the Web content that was modified via fiddler and injected into the Compat Inspector script.

Using the Verify tick option

If you click on the Compat Inspector status bar in the upper right corner of the webpage, you will see a detailed test report. Most test report projects provide verify tick options to help users interactively verify problems.

For example, the following report item detects that the current Web page uses navigator.useragent to check the browser type. This is often an unreliable detection mechanism because, even if Internet Explorer is the same, different versions will support different features. The more recommended approach is a function-based detection mechanism.

When you tick verify and refresh the page, Compat inspector will return different results to navigator.useragent. If the page does not really depend on the return value, the page should still be displayed correctly. For example, the output of the script initially looks like this:

When you tick verify and refresh the page, the output is as follows:

Using the debug tick option

Also for the above detection report item, use the following steps to expose the code location of the page calling Navigator.useragent:

1. Tick Debug

2. Open Internet Explorer F12 toolbar, switch to Code Debug tab

3. Refresh the page. Code execution stays at a breakpoint injected by Compat inspect

4. At this point in the call stack, double-click the function immediately following inspectorfunction to see the corresponding code in the Web page

Compat Inspector Test Case Introduction

Compat Inspector offers dozens of test cases. Click the Tests tab of the test report to see a complete list of cases and their corresponding descriptions. If you want to disable a rule, you can also remove the tick before the corresponding rule.

Enterprise IT Administrator IE11 Upgrade Guide 16-use Compat inspector to quickly locate IE compatibility issues