Windows Internet Explorer 8 引入了一组新的开发人员工具，有助于识别和解决有关 HTML、级联样式表 (CSS) 和网页脚本的问题。开发人员工具可帮助 Web 开发人员执行多种任务，包括查看单个属性、确定为何将特定 CSS 规则应用于元素、脚本运行时调试和使用不同的文本兼容性模式预览网页。

此文档介绍了开发人员工具的常规使用以及这些工具包含的四种主要模式的功能和使用。它们分别是：

• HTML 模式。通过该模式，您可以查看页面后的基础代码、概述和选择单个元素、预览某些属性值的更改如何影响页面的呈现，以及查看如何将 CSS 规则应用于单个元素。
• CSS 模式。通过该模式，您可以了解各种样式表如何影响网页，因而此模式最适用于使用多个样式表的站点。
• 脚本模式。通过该模式，您可以调试在网页上使用的脚本。该模式还允许您查看代码、插入断点和监视点以及查看变量。
• 探查器模式。通过该模式，您可以分析页面后的基础代码的性能，找出性能不佳的功能。

打开和关闭开发人员工具

按 F12 或单击 Windows Internet Explorer 工具栏的“工具”菜单中的“开发人员工具”选项，可打开开发人员工具。图 1 显示了在 Windows Internet Explorer 右上角突出显示的“开发人员工具”菜单选项。

图 1

“开发人员工具”窗口显示在 Windows Internet Explorer 窗口的前面。关闭开发人员工具的方法与打开方法相同，即，按 F12 或单击 Windows Internet Explorer 工具栏的“工具”菜单中的“开发人员工具”选项。

重要说明：使用开发人员工具所做的任何更改都是临时的，不影响网页的基础源代码。刷新页面时，将还原更改，浏览器将导航到新的页面或关闭浏览器窗口。单击“开发人员工具”工具栏上的“磁盘(保存)”按钮可将 HTML 和 CSS 更改保存到文本文件。

预览不同的兼容性模式

Windows Internet Explorer 8 引入了文本兼容性模式，这些模式用于更改 Windows Internet Explorer 8 呈现网页的方式。有关支持的不同文本兼容性模式及其实现方法的详细信息，请阅读未来兼容性中的 META 标记和锁定。

通过使用开发人员工具，您可以看到不同兼容性模式在外观上的区别。若要更改给定网页的文本模式，请在“开发人员工具”菜单的“文本模式”菜单上选择所需的模式。复选标记指示已选中的兼容性模式。这些选项包括 Quirks、Internet Explorer 7 标准或 Internet Explorer 8 标准。若要更改浏览器模式，请在“开发人员工具”菜单的“浏览器模式”菜单上选择所需的模式。复选标记指示已选中的兼容性模式。这些选项包括 Internet Explorer 7、Internet Explorer 8 或 Internet Explorer 8 兼容性视图。

勾勒元素轮廓

为了帮助您了解元素在网页中出现的位置以及用于创建特定效果的元素的类型，您可以勾勒某些元素的轮廓。当从“大纲”菜单中选择命令后，Windows Internet Explorer 将列出网页上的相应元素。例如，您从“大纲”菜单中选择 DIV 元素命令后，当前网页上出现 div 元素的各个位置都会显示围住相应元素的轮廓。

HTML 使用模式

通过 HTML 模式，您可以查看页面后的基础标记、选择单个元素并查看其属性、预览某些属性值的更改如何影响页面的呈现方式，以及查看如何将 CSS 规则应用于单个元素。单击“开发人员工具”窗口中的“HTML”选项卡可访问 HTML 模式。在图 2 显示的“开发人员工具”窗口中，左上角的“HTML”选项卡处于选中状态。

图 2

显示在 HTML 窗口窗格右侧的工具，旨在帮助您了解网页的 HTML 元素的呈现样式。

• “样式”工具显示 CSS 规则是如何应用于所选元素的。它可显示受到影响的属性以及指定这些值的属性。通过每个规则左侧的复选标记可启用或禁用该规则；您可以使用这些复选标记体验元素在网页上的显示方式。
• “跟踪样式”工具显示已应用于元素的 CSS 属性、定义属性的元素以及（如果适用）定义属性值的样式表的名称。
• “布局”工具显示元素属性的框模型，该框模型显示如何影响内容区域中心的元素。有关框模型的详细信息，请参阅 W3C 的框模型讨论。
• “属性”工具显示“HTML”选项卡中所选元素的属性。该工具中显示了当前节点。使用此工具可轻松将属性添加到所选的节点或将其删除，然后在浏览器窗口中进行更新。

图 3 显示了位于“HTML”窗格右侧的“样式”、“跟踪样式”、“布局”和“属性”按钮。

图 3

选择元素和更改属性值

您可以通过下列方式选择某个元素：在“HTML”窗格中突出显示要选择的元素，或者使用“开发人员工具”工具栏上的“单击选择元素”工具。