IE9 Compat Inspector

 

IE9 现已发布,我们希望您能够为 IE 提供与其他浏览器相同的标记,并确保您的站点能够在 IE9 标准模式下良好运行。最近,我们在博客中讨论了为 IE9 准备您的站点,您可以在 Internet Explorer 9 兼容性手册中找到可能会对您的站点产生影响的更改列表,还可在 Internet Explorer 9 开发人员指南中找到更完整的更改内容列表。今天,我们将介绍一种有助于加速站点准备过程的新资源:Compat Inspector。

关于 Compat Inspector

Compat Inspector 是一种基于 JavaScript 的测试工具,可在站点运行时分析站点。Compat Inspector 报告导致在标准模式中出现问题的交互模式。这使您能够迅速识别问题,而无需熟记大量文档,无需在站点的全部代码中进行搜索。我们在 IE9 开发过程中开发了 Compat Inspector,旨在加速识别各站点中共同问题的过程。在这个过程中,IE 团队的许多成员为构成 Compat Inspector 规则的测试用例集做出了贡献。现在,我们将这种工具奉献给您。请访问 Compat Inspector Test Drive,在试用后再将其用于您自己的站点。

Compat Inspector 设计用于帮助站点迁移到 IE9 标准模式,而非在旧式模式下运行。您可能仍然需要参考上述文档来了解一些问题。最佳模式是首先使用 Compat Inspector,如果未得到任何结果,再回头查阅文档。

如何使用这种工具?

要使用 Compat Inspector,请在您希望测试的各页面的所有其他脚本之前添加以下脚本:

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

注意 如果您拥有 Fiddler 可以将 这个代码片段 添加到您的 FiddlerScript 自动在您访问的所有页面上加载 Compat Inspector 如果您的页面使用了框架 这种方法将非常有帮助 。如果您还没有安装 FiddlerScript Editor 扩展 ,我建议您立即安装。

添加了上述脚本之后,在 IE9 中打开并开始使用您的页面。显式测试任何已知无法正确工作的交互(仅分析执行的代码)。Compat Inspector 将保留与检测到的问题相关的所有错误和警告的总计。页面右上角的汇总视图显示结果:

clip_image003

单击展开这个视图,了解检测到的各问题的具体信息,此处也提供了相关文档的链接:

clip_image005

大多数错误和警告还提供了两项用于进一步调查的操作:“Verify”(验证)和“Debug”(调试)。

“验证”工作流

部分测试用例具有内置的“验证器”,可模拟旧版行为。这允许您确认问题根本原因,之后再更改代码。

先决条件 打开了 Compat Inspector 的具体信息视图,并且显示了包含名为“Verify”的复选框的错误或警告消息。

1. 单击您希望确认的问题的“Verify”复选框
clip_image007

2. 刷新页面(您将看到一条通知,表示验证器已启用)
clip_image009

  1. 重复最初触发了错误或警告的步骤
  2. 如果问题仍然存在
    1. 如果仍然显示错误或警告消息,请为其他各消息重复第 1 步到第 4 步
    2. 否则,Compat Inspector 将无法完全确认此问题。如需其他帮助,请参阅 IE9 文档。
  1. 如果您已经确定了问题的根本原因

a. 取消选中全部“Verify”复选框
clip_image011

    1. 刷新页面
    2. 按照下面的“Debug”工作流在代码中定位各条消息的来源
    3. 按照所显示的错误/警告消息中的说明解决问题
    4. 注意 同时请注意控制存在问题的代码执行的任何 if IE 检查。通常情况下,如果与其他现代浏览器使用相同的代码,则 IE9 的表现最佳。
“调试”工作流

Compat Inspector 还能通过“debug”功能帮助您隔离代码中出现问题的位置。

先决条件 打开了 Compat Inspector 的具体信息视图,并且显示了包含名为“Debug”的复选框的错误或警告消息。

1. 单击您希望调查的问题的“Debug”复选框
clip_image013

2. 按 F12 键打开 F12 开发人员工具
clip_image015

3. 切换到“Script”选项卡
clip_image017

4. 单击“Start debugging”
clip_image019

5. 重复最初触发错误或警告的步骤(这将调用脚本调试器)
clip_image021

6. 切换到 F12 开发人员工具右侧的“Call stack”子选项卡
clip_image023

7. 双击下方可见的条目,在调用堆栈中突出显示条目
clip_image025

8. 观察 F12 开发人员工具的左侧部分,查看触发错误或警告的代码
clip_image027

它是如何工作的?

Compat Inspector 利用了 IE9 中引入的功能。Compat Inspector 的核心在于使用 ECMAScript 第 5 版 getter/setter 覆盖本机 API,依靠浏览器来通过 WebIDL 正确地公开 API。随后,Compat Inspector 利用这些覆盖来跟踪页面与本机平台之间的交互。这使它能够在执行问题代码时,在运行时报告问题。

Compat Inspector 基础结构的其他部分按照需要利用多种其他新功能。部分示例包括 DOM 3 级核心 APIDOM 3 级事件 APICSS3 Border Radius。Compat Inspector 还依靠 IE8 中引入的功能,比如 HTML5 本地存储HTML5 跨文档消息传递本机 JSON 支持Selectors API 等。

我的站点可以正常工作了,接下来该做些什么?

在发布之前,从所有页面中删除 Compat Inspector 脚本。Compat Inspector 是一种测试工具,不应该用于生产之中。此后,请随时关注 IE 博客,我们可能会在将来分享新的测试用例。

—Tony Ross,项目经理,Internet Explorer