使用 Microsoft IE Developer Toolbar

引言

告别 Microsoft Explorer 的“查看源代码”吧，嗯，差不多了。对于我们这些经常进行 Web 开发的人来说，一直需要一个工具来检查我们正在处理的文档的结构；现在隆重推出 Microsoft IE Developer Toolbar。IE Developer Toolbar 允许 Web 开发人员检查和修改网站的 CSS、HTML、DOM 和 JavaScript。Firefox Web 浏览器早已拥有一个名为 Firebug 的优秀附加组件，它提供了这种功能一段时间了。然而，本文无意将其与两者进行比较。如果您感兴趣，可以查看 Firebug。另外，还可以查看 Firebug Lite，了解如何将 Firebug 与 Internet Explorer 集成。

安装 IE Developer Toolbar

• 下载 IE Developer Toolbar 并运行安装程序。
• 关闭并重新打开 Internet Explorer。
• 将 IE Developer Toolbar 按钮添加到您的工具栏
  
• 然后关闭窗口
  
• IE Developer Toolbar 按钮将出现在您的工具栏中，方便访问。
  

启动 IE Developer Toolbar

单击您刚刚添加到工具栏的 IE Developer Toolbar 按钮即可显示此附加组件。默认情况下，它固定在 Internet Explorer 窗口的底部，但您可以通过单击工具右上角的按钮来取消固定。请注意，无论何时固定或取消固定附加组件，选定的上下文都会丢失，您需要重新选择正在检查的元素。

从上图可以看出，IE Developer Toolbar 提供了许多选项，可让您检查 HTML 文档。要访问其功能，请使用小工具栏和菜单。

处理文档

也许您最常使用的功能是“通过单击选择元素”，可在 **查找** 菜单或小工具栏按钮 中找到。

此视图特别有趣之处在于，下方显示的结构是源文件中定义的实际 HTML **加上** 任何 JavaScript 生成的 DOM 元素。这意味着，通过简单地使用“查看源代码”，您实际上看不到通过 `document.createElement` 方法等生成的 HTML 元素，但在 IE Developer Toolbar 中却可以看到。

单击“通过单击选择元素”按钮后，文档结构将显示在树视图中，并带有您单击选择的元素。

上面的示例来自选择 Code Project 主页上的 **搜索** 按钮。所有选定项目的预设属性及其当前值都将显示出来。双击网格中的值即可进行修改。此外，您还可以添加属性及其值进行尝试。例如，在仍激活以上选择的情况下，单击加号图标 。
您应该会看到以下内容

从组合框中选择 `background-color`，然后在值列中输入“orange”，然后按 Enter 键。请注意，搜索输入框变为橙色。

若要通过“通过单击选择元素”以外的其他方式定位元素，请选择“查找”>>“查找元素...”菜单。会出现以下对话框。

如您所见，您可以使用各种选项来搜索元素。

快捷方式

右键单击树视图中的节点可获得以下选项

这些选项允许您查看所选元素的源代码，包含或不包含其使用的样式。这比必须在整个文档层次结构中搜索元素的源代码要好得多。例如，选择 **元素源代码** 会为该选择产生以下结果。

在 **当前样式** 列表中还可以找到另一个有趣的快捷方式。右键单击您想要追踪的样式元素，然后选择 **追踪样式** 上下文菜单。

在本例中，将显示以下内容。

这显然使定位实际应用的样式变得相当简单。在处理多个样式表和内联样式块时，这可能特别有用，因为它们可能会相互覆盖，从而很难确定哪个样式实际上生效。

工具菜单

此工具可能对 UI 设计师特别感兴趣。它提供了一个调整分辨率的选项，用于在不同的浏览器分辨率下预览屏幕，例如 800x600、1024x768 等。然而，更有趣的功能是“显示标尺”和“颜色选择器”。

显示标尺

此窗口允许您在任何屏幕元素上绘制标尺以查看其尺寸。您可以单击黑色、红色或绿色框以显示该颜色的标尺，或单击白色以不显示。例如。

颜色选择器

您可以避免在找到使用的颜色之前，进行大量的代码和样式表挖掘。此工具使其变得非常容易。

其他菜单

其他菜单都比较直观，使用它们可以定位文档中的元素或调整 Microsoft Explorer 的行为。

• **禁用** - 禁用或启用脚本、弹出窗口阻止程序和 CSS。
• **视图** - 使您能够使用标签快速在屏幕上查看元素详细信息。特别要查看“视图”>>“源代码”选项。
• **大纲** - 与上面的“视图”类似，不同之处在于它会在显示的元素周围绘制框。特别要查看“大纲”>>“任何元素...”此选项允许您为要大纲的元素指定多个搜索条件。另外，请注意“大纲”>>“清除大纲”选项，在指定了许多选项时非常方便。
• **图像** - 与“视图”和“大纲”类似，但专门处理图像。查看“图像”>>“查看图像报告”。
• **缓存** - 处理 Web 浏览器处理 cookie 和文件缓存的方式。
• **验证器** - 使用 w3.org 和其他在线工具提供页面验证。检查 HTML、CSS、可访问性等的有效性。

注意

一些用户报告在重新安装 IE Developer Toolbar 后 Internet Explorer 7.0 出现问题。如果您遇到这些问题，具体取决于您的安装和许多变量，您可能会发现以下内容很有用：IE Dev Toolbar 1.00.2188.0 annoying popup fix

结论

尽管 IE Developer Toolbar 不是一个非常成熟的工具，但它提供了一些有用的功能，用于检查和调整网页。特别是通过点按方式定位元素的功能非常有用。如果您是处理 Internet Explorer 的 Web 开发人员，IE Developer Toolbar 可能会成为您开发工具箱的一个很好的补充。