在网页开发领域，经常需要一个工具来检查正在工作的文档结构。微软的IE开发者工具栏就是这样一个工具，它允许网页开发者检查和修改网站的CSS、HTML、DOM和JavaScript。虽然Firefox浏览器有一个名为Firebug的优秀插件，提供了类似的功能，但本文并不是要比较这两个产品。如果感兴趣，可以查看Firebug。此外，还可以查看Firebug Lite，了解如何将Firebug集成到Internet Explorer中。
要安装IE开发者工具栏，请下载并运行安装程序。完成后，关闭并重新打开Internet Explorer。然后，将IE开发者工具栏按钮添加到工具栏中。完成后，关闭窗口。IE开发者工具栏按钮将出现在工具栏中，方便随时访问。
点击刚刚添加到工具栏的IE开发者工具栏按钮，将显示该插件。默认情况下，它被固定在Internet Explorer窗口的底部，但可以通过点击工具右上角的按钮来取消固定。请注意，每当固定或取消固定插件时，选定的上下文就会丢失，需要重新选择正在检查的元素。
正如从上面的图片中看到的，IE开发者工具栏提供了许多选项，使能够检查HTML文档。要访问它的功能，请使用小工具栏和菜单。
可能最常使用的功能是“通过点击选择元素”，它可以通过“查找”菜单或小工具栏按钮获得。这个视图特别有趣的是，暴露的结构是源文件中定义的实际HTML加上任何JavaScript生成的DOM元素。这意味着，通过查看源代码，实际上看不到任何使用document.createElement方法生成的HTML元素，但在IE开发者工具栏中可以看到。
点击“通过点击选择元素”按钮后，文档的结构将以树状视图显示，点击选择的元素将被突出显示：
上面的示例来自于选择Code Project首页的“搜索”按钮。所有选定项的预设属性及其当前值都会显示出来。双击网格中的值以修改它。此外，可以添加属性及其值来尝试它们。例如，在上面的选择仍然有效的情况下，点击加号图标：
应该看到以下内容：
<input type="text" name="search" value="" background-color="orange">
从组合框中选择background-color，然后在值列中输入“orange”，然后按回车键。注意搜索输入框变成了橙色。
除了“通过点击选择元素”之外，还有其他方法可以定位元素。选择“查找”>>“查找元素...”菜单。将出现以下对话框：
正如看到的，可以使用各种选项来搜索元素。
右键单击树状视图中的节点，将获得以下选项：
这些选项允许查看选定元素的源代码，无论是否使用它使用的风格。这比在整个文档层次结构中搜索元素的源代码要好得多。例如，选择“元素源代码”会产生以下结果：
<div id="element-id" style="color: red;">...</div>
另一个有趣的快捷方式可以在“当前样式”列表中找到。右键单击想要跟踪的样式元素，然后选择“跟踪样式”上下文菜单。
对于这个示例，以下内容将显示出来：
<style>
#element-id {
color: red;
}
</style>
这显然使定位实际应用的样式变得非常简单。这在处理多个样式表和内联样式块可能会相互覆盖时特别有用，这使得确定哪一个实际上在起作用变得非常困难。
这个工具可能对UI设计师特别感兴趣。它具有调整大小的选项，可以预览不同浏览器分辨率下的屏幕，例如800x600、1024x768等。然而，更有趣的功能是“显示标尺”和“颜色选择器”：
“显示标尺”这个窗口允许在任何屏幕元素上绘制标尺，以查看它的尺寸。可以点击黑色、红色或绿色框来显示那种颜色的标尺，或者点击白色来不显示任何标尺。例如：
“颜色选择器”可以避免在代码和样式表中大量挖掘，以找到使用的颜色。这个工具使它变得非常简单。
其他菜单相当直观，使用它们在文档中定位元素或调整Microsoft Explorer的行为。