靠谱的软件下载站
当前位置:  IEfans/IE专区/IE相关/IE兼容性检测工具 Compat Inspector 使用教程

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

IE相关 互联网 2013-04-26 阅读(3100)
Compat Inspector 是一套由 JavaScript 写成的测试工具,就像载入一般的 JavaScript 文件一样,把一个 inspector.js 文件载入到现有的网页中即可生效,此测试工具的操作画面就直接整合在网页的右上角,如下图所示。 载入之后就跟平常一样使用原本网站的功能跟网页进行互动,这过程中浏览器会执行相关页面中的 JavaScript 代码,而在执行的过程中 Compat Inspector 会对你执行过的 JavaScript 程序直接进行分析,只要有执行到 Compat Inspector 认为有问题的代码,其画面右上角的计数器就会不断往上加,而该计数器有三种顏色,分别代表的意思如下: Compat Inspector 整合在网页的右上角
  • 红色:代表你的网页执行到一个较为严重的错误,应该立即修复。
  • 黄色:代表你的网页执行到一个潜在的代码错误,属于警告的性质,建议你进一步修正程序。
  • 蓝色:代表你的网页执行到一个值得被提醒的信息。例如你正在使用旧版的 jQuery 函式库。
Compat Inspector:http://ie.microsoft.com/testdrive/html5/compatinspector/ 基本上它的运作原理如下:
  1. 这个 inspector.js 必须是网页中第一个被载入的 JavaScript 文件,这样他才能分析后续执行的 JS:
  2. 在网页运作的过程中 Compat Inspector 会观察使用者与浏览器之间的所有互动,当遇到已知的潜在问题时会自动整理并回报到 Compat Inspector 工具中,这些信息默认是隐藏的,当你点击工具的计数器后分析结果就会被显示出来,其画面如下,若要关闭此画面只要点选左上角【向右箭头】按钮即可回到原本网页的画面:
Compat Inspector 回到原本网页 请注意:使用此工具时必须使用支持 HTML5 的浏览器,但 Compat Inspector 主要还是设计给 IE9IE10 浏览器用的,因此还是建议使用 IE9 或 IE10 浏览器来开启网页进行测试,这样可以获得比较准确的执行结果。除此之外的另一个重点是,网页必须呈现在【IE9 标准模式】或【IE10 标准模式】之下 (不要进入 Quirk 模式),否则就会出现如下图的提示: Compat Inspector 在 Quirk 模式下报错 开始使用这套工具很简单,但如何阅读检测报告才是真正的精华之处,我们就以 Compat Inspector 网站上的范例来做说明,先来看看其中一个错误报告的例子,让你感受一下 Compat Inspector 的威力所在。 这个网页打开后,你会发现一个奇怪的选单,所有子选单都被开启了,当然,这是一个错误,而且 Compat Inspector 也帮我们侦测了出来,我们先来看一下这个选单的画面: 错误提示信息 接著我们点选网页右上角的 Compat Inspector 计数器开启检测报告: 计数器开启检测报告 其中这一个标为红色的错误提到,网页中撰写 document.write 动态输出 HTML 内容到网页上时,不可以将 document.write 物件快取成一个变数然后再用此变数来执行 write 方法,这种写法已经不被 IE9 与之后的 IE 版本支持,而且其他浏览器也不支持这种写法,因此建议改善,而下方的 Resolution 就是提供解决方案的参考资料。 Verify 和 Debug 选项 不过上图包含了两个核取按钮 (Checkbox),当你将鼠标移至核取按钮上方即可查看该核取项目的说明,这是个非常神奇的功能! Verify 选项功能简介 Debug 选项功能简介 首先,当你勾选 Verify 之后,Compat Inspector 就会自动的帮你修复这个问题,并让你进一步作验证,验证的方法就是直接重新整理网页 ( 按下 F5 功能键重新整理网页 ),这时你会发现错误已经被修正: 错误修正提示信息变化 此时你会发现网页上的选单可以正常运作了,也代表 Compat Inspector 已验证这个错误可以被修正: 已验证这个错误可以被修正 OK!现在的确通过 Compat Inspector 帮我们修正了这个网页错误,但最终我们还是要手动修正这个错误才行啊!我们一份网页里所载入的 JavaScript 也许非常多,在茫茫大海里我要到哪里找出这段有问题的代码呢?这时,就是勾选 Debug 核取项目的时刻!但因为你已经勾选了 Verify 项目,所以你必须先取消勾选 Verify 项目,并重新整理网页才能再次看到 Debug 核取项目。 勾选 Verify 项目 重整网页之后,我们勾选 Debug 核取项目: 勾选 Debug 核取项目 勾选 Debug 选项之后,此时请先不要重新整理网页,而是按下 F12 功能键开启 IE 开发人员工具,切换到【脚本】标签页后点击【启用调试】按钮,开启之后回到网页并按下 F5 重新整理页面。 IE 脚本启用调试 重新整理网页后,画面会自动停在一个中断点上,这是 Compat Inspector 刻意帮你加上了,目的是为了帮助你快速找到真正发生问题的代码在什么位置! 快速找到真正发生问题的代码在什么位置 此时有问题的代码还没找到,你必须切换到【调用堆栈】标签页,并且往前寻找呼叫到这个 function 的前一个进入点,如下图所示,也就是在 Demo.js 的第 103 行的地方,你可以用鼠标左键双击这一项可以自动跳跃到该代码的位置: IE 调用堆栈 很快的我们便抓出真正的兇手,也就是引发这个错误的实际位置,找到正确的文件名称与位置后,你就可以很轻易的依照 Compat Inspector 上的建议修正这段代码,你说有没有很方便呢!^_^ Compat Inspector  修正错误代码建议 另一种常见的信息提示就是网页载入了旧版的 jQuery 套件,当你按下 Verify 之后,当网页重新整理之后会自动改载入 jQuery 最新版本,此时你便可对该网页进行测试,看看在载入最新版 jQuery 的情况下网页上的 JavaScript 是否会发生错误,如果完全不会有错误的话,便可放心地将 jQuery 直接升级到最新版! 提示可升级到 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 选项 ( 此选项要设定正确后才会出现 ) 选取 Use Compat Inspector 选项
  3. 开启任意网页,网页的右上角即会出现 Compat Inspector 工具!
 2 接著我们来看看如何修改 Fiddler 的自订规则:
  1. 开启 Fiddler
  2. 点开 Rules 选单,并选取 Customize Rules 选项 ( 此时会开启 Notepad 记事本编辑该规则 ) 选取 Customize Rules 选项
  3. 我们开启 http://ie.microsoft.com/testdrive/html5/compatinspector/help/snippet.txt 这份文件,依照该文件的说明将代码复製贴上到 Fiddler Rules 文件中。 Snippet 1 示意图: Snippet 1 示意图 Snippet 2 示意图:请将这一长串代码贴上到此文件最后一个 } 右大括弧之前!! Snippet 2 示意图
  4. 按下 Ctrl + S 保存该文件即设定完成!!
via:Will

标签:开发人员工具检测Compat InspectorIE Web

Copyright © 1998-2017 www.iefans.net All Rights Reserved 湘ICP备13012168号-17