Поделиться через

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 级核心 API、DOM 3 级事件 API 和 CSS3 Border Radius。Compat Inspector 还依靠 IE8 中引入的功能，比如 HTML5 本地存储、HTML5 跨文档消息传递、本机 JSON 支持 和 Selectors API 等。

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

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

—Tony Ross，项目经理，Internet Explorer