使用开发人员工具调试 HTML 和 CSS

Internet Explorer 8 提供增强的开发人员工具，以帮助您研究和解决与 HTML、级联样式表 (CSS) 和 Microsoft JavaScript 相关的问题。 本文重点介绍开发人员工具中的 HTML 和 CSS 工具。

• 简介
• 打开和关闭开发人员工具
• 选择网页上的对象
• 检查 HTML 元素
  • 使用“样式”和“跟踪样式”工具
  • 使用“布局”工具
  • 使用“特性”工具
• 检查 CSS 规则
• 保存更改
• 总结
• 相关主题

简介

Internet Explorer 8 的开发人员工具功能使您可查看网页的浏览器内部表示形式。 您可使用开发人员工具执行多种任务，包括但不限于查看单个特性、确定特定 CSS 规则应用于单个元素的原因及预览不同的文档兼容性模式。 通过公开浏览器解释网页的方式，开发人员工具为研究和解决问题提供了多种方法，且比旧版本的 Internet Explorer 提供的方法更快。

本文重点介绍 HTML 和 CSS 开发人员工具。 有关如何使用开发人员工具在 JScript 中调试的信息，请参阅使用开发人员工具调试脚本（可能为英文网页）。

打开和关闭开发人员工具

要打开“开发人员工具”，请按下 F12；还可在 Internet Explorer 8 工具栏的“工具”菜单上单击“开发人员工具”。 下图显示了“开发人员工具”窗口。

图 1.“开发人员工具”命令和“关闭”按钮。

开发人员工具一旦启动，可位于自己的窗口或固定到打开它的浏览器实例。 每个 Internet Explorer 选项卡拥有自己的开发人员工具实例。 处理多个开发人员工具实例时，使用“固定”功能（其按钮出现在“开发人员工具”窗口的右上角）将每个开发人员工具固定到其窗口。 固定后，可调整“开发人员工具”窗口的大小以显示更大的可视区域。

可用以下几种方式之一关闭开发人员工具： 按下 F12；单击“工具”菜单上的“开发人员工具”按钮；单击“开发人员工具”窗口右上角的“关闭”按钮或关闭打开该“开发人员工具”窗口的 Internet Explorer 窗口或选项卡。

选择网页上的对象

许多 HTML 和 CSS 开发人员工具对网页上的单个元素进行操作。 要选择某个元素，可在 HTML 选项卡中突出显示它或在开发人员工具的“查找”菜单上单击“单击选择元素” 按钮。 如果您单击此按钮，您将可以使用鼠标选择网页上的元素。 移动光标经过元素；出现突出显示元素边框的蓝色框时，单击选中元素。 下图显示了选中元素的结果。

图 3. “单击选择元素” 按钮和选中元素的结果。

突出显示并单击 HTML 元素后，HTML 选项卡显示选中元素的特性及其在 Internet Explorer 8 中显示网页所使用的内部表示形式中的位置。 您可以查看元素的当前特性值并使用 HTML 选项卡对其进行更改以体验新值。 要更改某个特性值，请单击它，输入新值，然后按下 ENTER；Internet Explorer 8 将显示更改的效果。 可通过按下 ESC 放弃部分值。 若要恢复网页的原始外观，刷新页面即可。

注意 使用 HTML 选项卡进行的更改不影响网页的基础源代码；在刷新网页、浏览器导航到新网页或被关闭前，源代码保持不变。 有关保存更改的信息，请参阅下面的保存更改部分。

检查 HTML 元素

HTML 选项卡帮助检查 HTML 元素在网页上的显示效果。 HTML 选项卡提供两个查看窗格。 左边的窗格是“主要内容窗格”，右边的窗格是“属性”窗格。

• “主要内容窗格”是以树节点结构（可展开或折叠）显示整个文档对象模型 (DOM) 的地方。 使用此窗格检查您的 HTML 源代码。 可通过单击 HTML 元素的特性和值来编辑它们。 文本节点也以此模式进行编辑。 但是，如果您希望以编辑器格式编辑整个网页，您可单击“编辑”按钮。 处于编辑模式时，“自动换行”按钮处于激活状态。 您还将注意到此网页的内容可能并不与原始源代码完全相同，因为这是此网页的 Internet Explorer 内部表示形式。 如果有将内容写到网页的 JScript 调用，您将在此编辑模式中看到它们。 编辑完成后，再次单击“编辑”按钮，更改将立即生效。
• “属性”窗格在顶端提供了“属性类型选择器”菜单栏。 “属性类型选择器”提供的若干工具可帮助您更密切地检查源代码。 例如，“主要内容窗格”处于“DOM”模式时，可单击选择任何要检查的 HTML 元素。 单击后，元素的属性将在“属性”窗格中显示。 信息的显示方式和显示内容取决于当前选择的属性类型。 例如，如果当前类型是“样式”，则您将看到的内容是应用于此元素的 CSS 规则列表。 其他属性类型为“跟踪样式”、“布局”和“特性”。

使用“样式”和“跟踪样式”工具

“样式”和“跟踪样式”工具遇到多个应用于选中元素的 CSS 规则时，将根据 CSS 规范中规则的特性显示这些规则。 列表顶部的规则是应用于选中元素的第一个规则，而列表底部的规则定义了当前选中元素的样式属性。 可以编辑以下这些规则的值： 单击某个值，键入新值并按下 ENTER，更改将立即显示在网页上。 所有属性类型中找到的信息是相同的。 但在“跟踪样式”属性类型中，同样的信息按属性分组，规则显示在属性下。 属性以字母顺序列出，规则仍按特性排序。

使用“布局”工具

“布局”工具提供元素在网页中相对定位的框模型信息。 可用信息包括：

• 偏移量： 这些值描述了选中对象及其父对象之间的距离，由 offsetLeft 和 offsetTop 属性表示。
• 边距、边框和填充： 这三个值显示网页源代码中指定的相应值。 如果未指定任何值，工具将显示由 Internet Explorer 使用的默认值。
• 宽度和高度： 最内部的值是元素的高度和宽度，由 offsetHeight 和 offsetWidth 属性定义。

对于每个框模型特性，将显示其值和度量单位。 单击要编辑的值，然后按下 ENTER 提交新值或 ESC 取消它。 按下 ENTER 后，新值将立即生效。 默认情况下（如果没有显示度量单位），“布局”工具以像素为单位处理框模型值。

使用“特性”工具

“特性”工具将 HTML 元素的特性显示为名称/值对的列表。 您可通过双击特性检查信息及特性的名称和值。 还可通过在“主要内容窗格”中单击特性的名称和值信息对其进行编辑。 特性的值可能为空或 null，但特性名称不能为空。 对此信息的更改将立即反映到网页上。 “特性”工具还使您可通过单击窗格顶部的相应按钮向元素添加附加的特性或从元素删除特性。

检查 CSS 规则

CSS 选项卡可使您了解样式表之间的相互影响。 这对于使用多个样式表的站点尤其有用。 要在样式表之间进行切换，请使用“样式表选择器”。 选中某个样式表时，规则和其相关联的样式属性将出现在“主要内容窗格”中。 此信息按样式规则进行分组。 默认情况下，此按钮显示网页中引用的第一个样式表。 如图 4 所示，样式表的规则出现在“样式表选择器”按钮下方。

图 4. CSS 工具显示网页使用的所有样式表所定义的各种规则。

要展开或折叠规则的属性，请单击标记有 + 或 - 符号的框。 此样式表视图中的所有元素都是可编辑的，编辑结果将立即生效。 可通过单击样式名旁边的复选框打开或关闭样式规则。 还可选择打开或关闭单个属性或几个属性以查看它应用于规则的效果。

保存更改

对 HTML 页面和 CSS 文件进行更改之后，单击“保存”按钮保存更改。 “另存为”对话框提示您将文件另存为 .txt 而不是 .html 或 .css。 这将防止您意外覆盖主源文件。此外，这样做是因为在开发人员工具中所作的全部更改是在网页的 Internet Explorer 内部表示形式中而不是在原始源代码中进行的。 因此，刷新当前网页，导航离开此网页或执行“全部撤消”将回到原始网页内容。

注意  在开发人员工具中工作时，请牢记不仅网页的修改区域与源代码中的不同，网页的其他部分也与源代码中的不同，因为开发人员工具显示的网页是存在于 Internet Explorer 中的网页，而不是存在于源代码中的网页。 为了防止意外覆盖源代码，开发人员工具会以文本形式保存输出，并在保存的文件中添加前导注释。

总结

Internet Explorer 8 开发人员工具帮助您排除网页故障并解决网页问题。 HTML 工具使您可重点关注网页上单个 HTML 元素的特定特性和属性。 CSS 工具提供更大的视图，说明 Internet Explorer 8 如何解释样式表中的各种规则和属性。因为您对开发人员工具中源代码的更改仅影响网站的 Internet Explorer 内部表示形式，而不是直接影响原始源代码，提供的“保存”按钮使您可保存更改并使用其更新源代码。 这将节省您的时间并提高维护网页的效率。

相关主题

• 使用开发人员工具调试脚本（可能为英文网页）
• 使用开发人员工具分析脚本（可能为英文网页）
• 开发人员工具用户接口参考（可能为英文网页）
• 开发人员工具键盘快捷方式参考（可能为英文网页）
• 定义文档兼容性（可能为英文网页）
• 进程调试管理器（可能为英文网页）
• Windows 脚本接口（可能为英文网页）