了解 Internet Explorer 开发人员工具

  • 项目

Windows Internet Explorer 8 的新增功能

每次安装 Internet Explorer 8 时都会附带安装开发人员工具。 利用此工具，网站开发人员能够快速调试 Microsoft JScript、调查特定于 Internet Explorer 的行为、快速迭代以构建新的设计原型或即时尝试针对问题的解决方案。 本文将向您介绍开发人员工具的主要功能。

  • 简介
  • 开始使用
  • 调试 HTML 和 CSS
    • 检查 HTML 元素
    • 检查 CSS 属性
    • 动态编辑源
    • 保存更改
  • 调试 JScript
    • 启动和停止调试程序
    • 控制执行
    • 检查变量
    • 检查调用堆栈
    • 使用调试程序控制台
  • 分析 JScript 性能
    • 启动和停止探查器
    • 查看数据
    • 分析多个会话并导出数据
  • 搜索内容
  • 查看源
  • 勾勒屏幕上元素的轮廓
  • 使用图像
  • 控制缓存和 Cookie
  • 使用功能强大的工具
  • 验证源
  • 在不同的浏览器模式和文档模式中进行测试
    • 测试浏览器模式
    • 测试文档模式
  • 使用键盘快捷方式
  • 参考界面命令
  • 相关主题

简介

强大的工具在提升开发人员的工作效率方面可起到至关重要的作用，虽然现已存在多种可用的 Web 开发工具，但这些工具可能无法满足您完成所有任务的需要。 例如，您可能希望快速调试 JScript、调查特定于 Internet Explorer 的行为、快速迭代以构建新的设计原型或尝试针对问题的解决方案。 为了提升开发人员在上述应用场景和类似应用场景中的工作效率，Internet Explorer 8 提供了一些易于使用的强大工具，这些工具有以下几个重要特征：

  • 与 Internet Explorer 8 集成在一起，且易于使用： 每次安装 Internet Explorer 8 时将会安装开发人员工具的一个实例。这样做可使得能够在运行 Internet Explorer 8 的任何计算机上进行调试。此外，这些工具仅在需要才会加载，从而减少这些工具对浏览器性能的影响。 利用开发人员工具，可以仅对当前的 Internet Explorer 进程执行动态脚本调试，而不是启用对 Internet Explorer 的整体调试。
  • 提供针对平台的可视界面： 开发人员工具可让您在 Internet Explorer 中查看网站的表示形式，而不用对网站的工作方式进行反向工程或修改网站以输出调试信息。 这样一来，便可以减少调试动态网站（源检查对其起不到任何作用）或调查特定于 Internet Explorer 的行为（一般创作工具对此起不到任何作用）所花费的时间。
  • 启用快速试验： 当您在早期版本的 Internet Explorer 中构建新的设计原型或测试修补程序时，可能会编辑源、保存源并在浏览器中刷新页面，然后重复这些操作。 Internet Explorer 8 开发人员工具对此应用场景进行了简化，它可让您在浏览器中编辑网站并立即查看生效的更改。
  • 优化应用程序性能： 一般来说，确定并解决性能问题是一个迭代方法，此方法通过一次重点针对一个应用场景来完成。 利用 Internet Explorer 8 开发人员工具脚本探测器，您可以在测试应用程序时收集统计信息（如执行时间和调用 JScript 函数的次数），并使用配置文件报告快速确定并解决性能瓶颈。

正因为开发工具包含上述几大特征，当您在 Internet Explorer 中进行开发时，便可利用开发工具的各项功能来大大提升您的工作效率。 本文的其余部分将详细说明其中的一些功能和其他功能。

开始使用

开始使用这些工具很简单： 按 F12 或在“工具”菜单中单击“开发人员工具”即可。

这些工具在打开后将位于各自的窗口中，每个窗口均与 Internet Explorer 中的一个选项卡连接。 如果您更愿意减少打开的窗口的数量，则可通过单击“固定”按钮或按 Ctrl+P 将工具固定到选项卡上。

这些工具的某些功能无需完整的工具界面。 在此情况下，可在固定工具后单击“最小化”按钮或按 Ctrl+M。 这些工具将在窗口底部排成一行，并且仅提供对命令菜单栏的访问。

调试 HTML 和 CSS

这些工具为您提供了浏览器内部的可见性，这样您便可以检查存在于 Internet Explorer 内的网站的 HTML 和级联样式表 (CSS)，而不仅仅检查原始源。 这对于动态网站、复杂网站和使用框架（如 Active Server Page (ASP) 或 PHP）的网站特别有用。

工具中的“主要内容”窗格将显示网站的文档对象模型 (DOM) 树，该树反射由 Internet Explorer 维护的文档对象模型以表示内存中的网站。 可以使用鼠标或键盘导航 DOM 树。 查找与页面上某个特定元素对应的节点的最快方式是使用“单击选择元素”功能。 使用此功能以选择页面上的元素，然后工具将会自动选择相应的树节点。 或者，可以使用搜索框来执行此操作。

检查 HTML 元素

在 DOM 树中选择一个元素后，右侧的“属性”窗格将按以下方式公开有关该元素的更多信息：

  • 样式： “样式”命令将通过提供适用于选定元素的所有规则的列表来改进 CSS 调试。 由于这些规则是按先后次序显示的，因此最后应用的规则将显示在底部，并为任何已由另一个属性覆盖的属性添加删除线，这样您便能够快速了解 CSS 规则对当前元素的影响，而不用手动匹配选择器。 可以通过切换 CSS 规则旁边的复选框的选中状态来启用或禁用相应规则，并且操作将立即在页面上生效。
  • 跟踪样式： 此命令包含与“样式”命令相同的信息，只不过此命令将按属性对样式进行分组。 如果您要查找有关某个特定属性的信息，请切换到“跟踪样式”命令。 若只需查找您感兴趣的属性，请单击加号 (+) 图标，然后查看设置该属性的所有规则的列表（这些规则也是按先后次序列出）。
  • 布局： “布局”命令提供框模型信息，如元素的偏移量、高度和填充。 在调试元素的定位时可使用此命令。
  • 属性： 可使用“属性”检查选定元素的所有已定义的属性。 还可以使用此命令在选定元素中编辑、添加或删除属性。

若要进一步检查 CSS，请切换到对应于当前网站的所有 CSS 文件的列表的 CSS 选项卡。

检查 CSS 属性

通过切换到“CSS”选项卡，您可以访问要检查的所有外部 CSS 文件。 可通过单击“样式表选择器”按钮选择样式表。 通过单击样式属性的名称或值，可以更改该属性并使其立即生效。

动态编辑源

在使用工具检查并收集所需信息后，您可能希望立即对结果执行操作。 若要编辑任何 HTML 属性或 CSS 属性，请单击相应属性，键入新值，然后按 Enter。 所做更改将立即生效，您可以快速测试更改。 在 HTML 中，也可以通过按“编辑”按钮使整个树变为可编辑的，然后添加、删除或编辑整个元素。 在任一情况下，利用开发人员工具均可以快速编辑，而无需修改源。 在对各个项进行所需编辑后，可以保存更改。

保存更改

在工具中进行的所有更改仅存在于 Internet Explorer 的网站内部表示形式中。 因此，刷新页面或离开页面都将返回原始网站。 但在某些情况下，您可能希望保存更改。 在 HTML 和 CSS 选项卡中，单击“保存”按钮可分别将当前的 HTML 或 CSS 保存到一个文件。 请记住，不仅您修改的网站区域会与源不同，而且其他部分也可能会与源不同，这是因为工具会按照如同网站位于 Internet Explorer（而非源）中的方式来显示网站。 为了防止意外覆盖源，工具会以文本形式保存输出，并在文件中添加前导注释。

有关 HTML 和 CSS 的详细信息，请参阅 使用开发人员工具调试 HTML 和 CSS（可能为英文网页） 一文。

调试 JScript

虽然利用 CSS 可以在不使用 JScript 的情况下更轻松地生成动态网站，但大多数复杂网站仍需要一些脚本。 对于任何编程语言，优秀的调试程序对于获得较高的工作效率都很重要，开发人员工具正好能够提供此便利。

启动和停止调试程序

在 Internet Explorer 8 中调试 JScript 很简单。 在任何要调试的网站上，打开开发人员工具并切换到“脚本”选项卡，然后单击“启动调试”。 在启动调试过程时，开发人员工具将刷新页面并解除工具固定（如果工具已固定）。

在开始调试之后，您将可使用一个调试程序所应具有的所有功能。 完成调试后，可再次单击此按钮以停止调试。 在启动调试程序后，开发人员工具可提供针对脚本的强大控制和洞察力。

控制执行

可以通过设置断点在指定位置暂停执行。 单击行号或右键单击源，然后选择“插入断点”。 可以在内联函数或事件处理程序中设置断点。 此外，也可以设置条件断点。

如果您无法确定应在何处设置断点，请在下一个 JScript 语句运行之前单击“全部中断”以暂停执行，或在 Internet Explorer 遇到脚本错误时单击“错误时中断”以暂停执行。 暂停执行之后，使用“逐语句”、“逐过程”和“跳出”命令单步调试脚本（包括匿名函数）。

检查变量

在单步调试代码时，检查变量的当前状态很有用。 在“脚本”选项卡内，使用“局部变量”窗格可查看局部变量；使用“监视”窗格可监视变量的自定义列表。 通过在源中右键单击，并单击“添加监视”或在“监视”窗格中键入变量名，可以向此列表中添加变量。

检查调用堆栈

在通过单步调试 JScript 代码来调试应用程序时，可以查看当前调用堆栈中的函数。 单击调用堆栈列表中的函数会在“主要内容”窗格中显示相应的源代码。

使用调试程序控制台

与编辑源以测试语句不同，通过开发人员工具，您只需在控制台窗格中键入 JScript 语句即可执行该语句。 单击“多行模式”可一次输入多个要执行的代码行。 由于 Internet Explorer 会立即执行代码，因此您可以测试在当前断点所处的位置添加代码的结果。 即使没有进行调试，也可以使用控制台。 为了便于您修复页面上的错误，控制台还会使用 console.log 来记录所有的脚本错误消息。 有关详细信息，可在 使用开发人员工具调试脚本（可能为英文网页）的“使用控制台执行代码语句”一节中找到。

有关脚本调试的更多详细信息，请参阅 使用开发人员工具调试脚本（可能为英文网页）一文。

分析 JScript 性能

调试 JScript 有助于获得理想的网站行为，而 JScript 探查器可通过提高网站性能来帮助将网站提升一个级别。 探查器将为您提供有关在网站的每个 JScript 方法甚至内置 JScript 函数（如字符串连接）中所花费的时间量的数据。 由于可以在应用程序执行过程中随时启动和停止 JScript 探查器，因此您可以收集感兴趣的特定方案的多个配置文件的数据。

启动和停止探查器

与调试程序一样，开始使用探查器也很简单： 打开“探查器”选项卡，然后单击“开始配置文件”即可启动会话。 执行要分析的方案，然后单击“停止配置文件”。 然后可以立即检查生成的数据。

查看数据

默认情况下，数据会出现在列出了所有已使用函数的函数视图中。 单击“当前视图”下拉菜单，并选择“调用树”以查看表示调用顺序的树，这样您便可以浏览代码路径并查找热点。 在两种视图中，您都可以对列执行添加、删除、排列和排序操作以查找所需信息。

配置文件报告将为您提供有关函数的 URL 和行号的信息，以帮助您在应用程序中查找代码。 单击函数名称会在“脚本”选项卡的“主要内容”窗格中显示函数的源代码。

注意 仅在启用脚本调试的情况下，才能使用将行号映射到源代码的功能。 有关脚本调试的详细信息，可在 使用开发人员工具调试脚本（可能为英文网页）中找到。

分析多个会话并导出数据

再次单击“开始配置文件”以开始新的分析会话。 在单击“停止配置文件”时，会显示新的数据。 若要查看前面的分析会话中的数据，请单击文件下拉列表并选择另一个报告。 虽然将为当前的 Internet Explorer 进程保留配置文件报告，但您可以通过单击“导出”按钮，以 CSV 格式保存配置文件数据，然后使用其他任何应用程序进行后续调查。

有关分析的详细信息，请参阅 使用开发人员工具分析脚本（可能为英文网页）一文。

搜索内容

开发人员工具提供了一套工具，利用此套工具，您可以检查和修改您的源以便动态测试各项内容。 在需要浏览大量源的情况下，如果能够快速地找到各项内容，不是很好吗？ 利用开发人员工具中提供的搜索框就能够做到这一点。 搜索框与您当前所使用的“模式”选项卡的上下文相关。 例如，如果您当前使用的是“HTML”选项卡，则将在“主要内容”窗格中针对 DOM 执行搜索。 将突出显示所有匹配项，并选定第一个匹配项。 同样，您可以在“CSS”选项卡、“脚本”选项卡和“探查器”选项卡中进行搜索。

搜索框还支持 “HTML”选项卡的 W3C 选择器 API（可能为英文网页）  万维网链接 语法。 若要使用选择器语法，请以“@”符号开始搜索。 例如，若要查找所有 div 元素，请键入“@div”。 若要仅查找带有特定 CSS 类名称的 div 元素，请键入“@div.myClassName”；若要查找带有该类名称的所有元素，请键入“@.myClassName”。 也可以搜索带有定义的 id 的元素，键入“@#myID”即可。 若要了解有关 CSS 选择器的详细信息，请参阅 了解 CSS 选择器（可能为英文网页）。

注意  在搜索框中使用选择器语法时，CSS 类名称是区分大小写的。

查看源

在 Internet Explorer 8 之前的版本中，当您右键单击网页并选择“查看源文件”时，只能查看原始源。 上述情况仍然存在；不过，通过使用开发人员工具中的“查看”命令，可以更好地控制要查看的源。 您可以选择仅查看某个特定元素及其 DOM 源，或者查看该特定元素及其 DOM 源以及应用于该元素的样式。 这将隔离该元素，使您能够集中注意力来发现任何可能存在的问题。 也可以查看网页的原始源或 Internet Explorer 表示的 DOM 源。 其中包括原始源和脚本插入的源。 现在，您可以看到 Internet Explorer 浏览器查看的全部内容。

此外，通过使用“查看”命令的一部分也可以查看链接报告。 链接报告在单独的浏览器选项卡中生成，其中包含可在页面上找到的所有链接的信息。

注意  开发人员工具为您提供了一个选项，利用此选项可选择用于查看源的您自己的应用程序。 可以在“文件”菜单下找到此选项。

勾勒屏幕上元素的轮廓

您是否曾经想知道特定元素的边框位于屏幕上的哪个位置？ 您是否有过这样的经历，必须将元素的边框设置为 1 才能查看边框的外观？ 利用开发人员工具中的“轮廓”命令，可以查看所有元素的轮廓，而无需修改您的源。 此命令提供了几个常用的元素，如表、Div 元素和图像。 它还为您提供一个对话框，用于添加要为其勾勒轮廓的任何元素。 您也可以为每个元素指定一种颜色，以便于区分它们。 在您关闭轮廓或刷新页面之前，轮廓将保留。 有关“轮廓”菜单的详细信息，可在 开发人员工具用户界面参考（可能为英文网页）的“‘轮廓’菜单”一节中找到。

使用图像

在使用图像时，开发人员工具将为您提供几个命令，帮助您在屏幕右侧标识有关图像的信息，如文件大小、维度和路径。 它还允许您打开或关闭图像呈现。 它甚至还为您提供一个选项，用于为在网页上找到的每个图像生成图像报告。

利用“缓存”命令菜单，您可以控制缓存和 Cookie 设置。 可以将浏览器设置为“始终从服务器中刷新”，这样您便能够确定获取的是最新信息。 也可以使用“清除浏览器缓存”或“清除此域的浏览器缓存”来控制缓存。

通过使用 Cookie，可以选择禁用 Cookie，这样便不会将任何 Cookie 写入计算机中。 通过单击“查看 Cookie 信息”，可以快速查看所有 Cookie 的完整列表。 也可以选择“清除会话 Cookie”或“清除域的 Cookie”。

在使用缓存和 Cookie 的这两种情况下，这些命令都将派上用场，因为它们可让您快速访问和紧密控制您的浏览器环境。

使用功能强大的工具

当您在网站上执行操作时，“工具”命令菜单将为您提供三类功能强大的工具。

  1. “调整大小”工具： 此工具可帮助您快速将浏览器窗口的大小调整为标准大小（如 800x600 或 1024x768），甚至可以添加自定义窗口大小。 有关此工具的几种键盘快捷方式可在 开发人员工具键盘快捷方式参考（可能为英文网页）中找到。
  2. “显示标尺”工具： 利用此工具，可在屏幕上绘制标尺，以帮助捕获对象之间的距离。 可以将标尺设置为“与 X/Y 轴对齐”、“与元素对齐”或自由格式。 可以绘制所需数量的标尺，也可以通过调整标尺的大小并四处拖动标尺来重新使用标尺。
  3. “显示颜色选取器”工具： 此工具将帮助您选取颜色。 通过将选取器置于屏幕上显示的任何文本、对象或背景上方，您可以查看选取器当前采用的颜色样本以及其十六进制值。 单击某个颜色后，可将该颜色的十六进制值复制到代码中。

验证源

在您完成开发工作后，最好是搞清楚您的代码是否符合各种标准，如 HTML、CSS 和可访问性。 开发人员工具已收集这些有用的资源，以帮助您针对这些验证程序检查您的源。 只需选择要执行的验证的类型或选择执行“多个验证...”会话。

在不同的浏览器模式和文档模式中进行测试

Internet Explorer 8 具有像 Internet Explorer 7 一样呈现页面并报告版本信息的功能。Web 开发人员和最终用户可以使用此功能来确保网站能够继续正常工作（即使该网站不是针对 Internet Explorer 8 构建的），并且您可以使用此功能来测试您的网站将呈现给 Internet Explorer 7 用户的外观。

测试浏览器模式

利用“浏览器模式”菜单，您可以选择 Internet Explorer 报告以下三个重要属性的方式：

  • 用户代理字符串： Internet Explorer 发送给 Web 服务器的用于标识自身的值。
  • 版本向量： 在评估条件注释时使用的值。
  • 文档模式： 一个值，该值用于确定 Internet Explorer 使用的是否为 CSS、DOM 和 JScript 操作的最新行为或 Internet Explorer 是否出于兼容性的原因模拟了上一个版本的 Internet Explorer。

存在三个浏览器模式选项，每个选项均按照不同的方式修改这些值：

  • Internet Explorer 7： 在此模式中，Internet Explorer 报告与 Internet Explorer 7 使用的用户代理、版本向量和文档模式相同的用户代理、版本向量和文档模式。使用此模式可测试 Internet Explorer 7 用户体验您的网站的方式。
  • Internet Explorer 8： 在此模式中，Internet Explorer 将报告用户代理、版本向量和文档模式以匹配默认的 Internet Explorer 8 行为，此行为是 Internet Explorer 8 中提供的最符合标准的行为。如果您要测试 Internet Explorer 8 用户体验您的网站的方式，请使用此模式。
  • IE8 兼容性视图： 在此模式中，Internet Explorer 8 会像 Internet Explorer 7 一样报告版本向量、文档模式和用户代理字符串；只不过该用户代理字符串还将包含一个标记，此标记可指示浏览器确实是 Internet Explorer 8。在 Internet Explorer 8 用户已选择“兼容性视图”选项的情况下，使用此模式可测试这些用户体验您的网站的方式。

测试文档模式

虽然文档模式定义了 Internet Explorer 呈现您的页面的方式，但不会对版本向量或用户代理字符串产生任何影响。 通过将此选项与浏览器模式结合使用，可以快速测试应对您的网站使用的文档模式。 有以下三个选项：

  • Quirks 模式： 在呈现不带任何 doctype 或带有 Quirks doctype 的文档时，此行为与 Internet Explorer 的行为匹配。 这与 Microsoft Internet Explorer 5 的行为和 Internet Explorer 6 的 Quirks 模式行为类似，并与 Internet Explorer 7 的 Quirks 模式相同。
  • Internet Explorer 7 标准模式： 在呈现带有严格的 doctype 或未知的 doctype 的文档时，此行为与 Internet Explorer 7 的行为匹配。
  • Internet Explorer 8 标准模式： 此行为是 Internet Explorer 8 中提供的符合标准的最新行为，并且在呈现带有严格的或未知的 doctype 的文档时，此行为是 Internet Explorer 8 使用的默认模式。

有关文档兼容性模式的详细信息，请参阅 使用开发人员工具测试浏览器模式和文档兼容性模式（可能为英文网页）一文

使用键盘快捷方式

Internet Explorer 8 开发人员工具提供了大量键盘快捷方式，从而能够让用户更轻松地完成各项任务。 使用标准的 Windows 惯例，如使用 F12 来打开或关闭开发人员工具；使用 F5 来刷新页面。通过转到 开发人员工具键盘快捷方式参考（可能为英文网页），可以找到完整列表。

参考界面命令

本文只是为您介绍了开发人员的主要功能中的一部分，通过转到 开发人员工具用户界面参考（可能为英文网页），可以找到有关所有可用工具的详细信息。

相关主题