IE兼容性检测工具 Compat Inspector 使用教程

Compat Inspector 是一套由 JavaScript 写成的测试工具，就像载入一般的 JavaScript 文件一样，把一个 inspector.js 文件载入到现有的网页中即可生效，此测试工具的操作画面就直接整合在网页的右上角，如下图所示。

载入之后就跟平常一样使用原本网站的功能跟网页进行互动，这过程中浏览器会执行相关页面中的 JavaScript 代码，而在执行的过程中 Compat Inspector 会对你执行过的 JavaScript 程序直接进行分析，只要有执行到 Compat Inspector 认为有问题的代码，其画面右上角的计数器就会不断往上加，而该计数器有三种顏色，分别代表的意思如下：

• 红色：代表你的网页执行到一个较为严重的错误，应该立即修复。
• 黄色：代表你的网页执行到一个潜在的代码错误，属于警告的性质，建议你进一步修正程序。
• 蓝色：代表你的网页执行到一个值得被提醒的信息。例如你正在使用旧版的 jQuery 函式库。

Compat Inspector：http://ie.microsoft.com/testdrive/html5/compatinspector/

基本上它的运作原理如下：

1. 这个 inspector.js 必须是网页中第一个被载入的 JavaScript 文件，这样他才能分析后续执行的 JS：<script src="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js"></script>
2. 在网页运作的过程中 Compat Inspector 会观察使用者与浏览器之间的所有互动，当遇到已知的潜在问题时会自动整理并回报到 Compat Inspector 工具中，这些信息默认是隐藏的，当你点击工具的计数器后分析结果就会被显示出来，其画面如下，若要关闭此画面只要点选左上角【向右箭头】按钮即可回到原本网页的画面：

请注意：使用此工具时必须使用支持 HTML5 的浏览器，但 Compat Inspector 主要还是设计给 IE9 与IE10 浏览器用的，因此还是建议使用 IE9 或 IE10 浏览器来开启网页进行测试，这样可以获得比较准确的执行结果。除此之外的另一个重点是，网页必须呈现在【IE9 标准模式】或【IE10 标准模式】之下 (不要进入 Quirk 模式)，否则就会出现如下图的提示：

开始使用这套工具很简单，但如何阅读检测报告才是真正的精华之处，我们就以 Compat Inspector 网站上的范例来做说明，先来看看其中一个错误报告的例子，让你感受一下 Compat Inspector 的威力所在。

这个网页打开后，你会发现一个奇怪的选单，所有子选单都被开启了，当然，这是一个错误，而且 Compat Inspector 也帮我们侦测了出来，我们先来看一下这个选单的画面：

接著我们点选网页右上角的 Compat Inspector 计数器开启检测报告：

其中这一个标为红色的错误提到，网页中撰写 document.write 动态输出 HTML 内容到网页上时，不可以将 document.write 物件快取成一个变数然后再用此变数来执行 write 方法，这种写法已经不被 IE9 与之后的 IE 版本支持，而且其他浏览器也不支持这种写法，因此建议改善，而下方的 Resolution 就是提供解决方案的参考资料。

不过上图包含了两个核取按钮 (Checkbox)，当你将鼠标移至核取按钮上方即可查看该核取项目的说明，这是个非常神奇的功能！

首先，当你勾选 Verify 之后，Compat Inspector 就会自动的帮你修复这个问题，并让你进一步作验证，验证的方法就是直接重新整理网页 ( 按下 F5 功能键重新整理网页 )，这时你会发现错误已经被修正：

此时你会发现网页上的选单可以正常运作了，也代表 Compat Inspector 已验证这个错误可以被修正：

OK！现在的确通过 Compat Inspector 帮我们修正了这个网页错误，但最终我们还是要手动修正这个错误才行啊！我们一份网页里所载入的 JavaScript 也许非常多，在茫茫大海里我要到哪里找出这段有问题的代码呢？这时，就是勾选 Debug 核取项目的时刻！但因为你已经勾选了 Verify 项目，所以你必须先取消勾选Verify 项目，并重新整理网页才能再次看到 Debug 核取项目。

重整网页之后，我们勾选 Debug 核取项目：

勾选 Debug 选项之后，此时请先不要重新整理网页，而是按下 F12 功能键开启 IE 开发人员工具，切换到【脚本】标签页后点击【启用调试】按钮，开启之后回到网页并按下 F5 重新整理页面。

重新整理网页后，画面会自动停在一个中断点上，这是 Compat Inspector 刻意帮你加上了，目的是为了帮助你快速找到真正发生问题的代码在什么位置！

此时有问题的代码还没找到，你必须切换到【调用堆栈】标签页，并且往前寻找呼叫到这个 function 的前一个进入点，如下图所示，也就是在 Demo.js 的第 103 行的地方，你可以用鼠标左键双击这一项可以自动跳跃到该代码的位置：

很快的我们便抓出真正的兇手，也就是引发这个错误的实际位置，找到正确的文件名称与位置后，你就可以很轻易的依照 Compat Inspector 上的建议修正这段代码，你说有没有很方便呢！^_^

另一种常见的信息提示就是网页载入了旧版的 jQuery 套件，当你按下 Verify 之后，当网页重新整理之后会自动改载入 jQuery 最新版本，此时你便可对该网页进行测试，看看在载入最新版 jQuery 的情况下网页上的 JavaScript 是否会发生错误，如果完全不会有错误的话，便可放心地将 jQuery 直接升级到最新版！

备注：Compat Inspector 还能检测 Dojo, GWT, jQuery UI, Modernizr, MooTools, Prototype 与 script.aculo.us 等其他知名的 JavaScript 框架。

然而，这个 Compat Inspector 工具毕竟是测试用途，如果网站已经上线，总不能在正式机上加入这个检测工具吧?！ 如果我们要针对正式机上的网页进行相容性检测怎么办呢? 还好在 Compat Inspector User Guide 网页有教我们怎么修改/扩充你的 Fiddler 工具，让 Fiddler 帮我们自动在任意网页上载入inspector.js 的神奇功能。

由于 Fiddler 是以 Proxy 的方式运作，所有流经 Fiddler 的 HTTP 封包都是可以被修改的，所以我们只要自订 Fiddler 的 自订规则 (Customize Rules)，就能轻松做到在任意页面自动注入 inspector.js 文件，让我们完全不用修改服务器上的文件的情况下，就能轻松使用 Compat Inspector 帮我们测试任意网页！

首先我先示范设定好之后的使用方法：

1. 开启 Fiddler
2. 点开 Rules 选单，并选取 Use Compat Inspector 选项 ( 此选项要设定正确后才会出现 )
   
3. 开启任意网页，网页的右上角即会出现 Compat Inspector 工具！

&nbsp2

接著我们来看看如何修改 Fiddler 的自订规则：

1. 开启 Fiddler
2. 点开 Rules 选单，并选取 Customize Rules 选项 ( 此时会开启 Notepad 记事本编辑该规则 )
   
3. 我们开启 http://ie.microsoft.com/testdrive/html5/compatinspector/help/snippet.txt 这份文件，依照该文件的说明将代码复製贴上到 Fiddler Rules 文件中。
   Snippet 1 示意图：
   
   Snippet 2 示意图：请将这一长串代码贴上到此文件最后一个 } 右大括弧之前！！
   
4. 按下 Ctrl + S 保存该文件即设定完成！！

via：Will

版权声明：转载时请以超链接形式标明文章 原始出处和作者信息及本声明
文章引用地址： http://www.iefans.net/ie-jianrongxing-jiance-compat-inspector-shiyong-jiaocheng/作者：iefans