企业IT管理员IE11升级指南【17】—— F12 开发者工具

企业IT管理员IE11升级指南系列：

F12 开发者工具

简介

使用 F12 开发人员工具，你可以调试、测试网页并加快其速度。无论你是需要微调你的 CSS 布局还是查找内存泄漏，你都能在此处找到帮助工具。

如果你正在 Internet Explorer 11 中查找“工具”菜单或工具栏，请尝试：

“Internet Explorer 中缺少菜单栏和工具栏。”

如果你通过单击错误消息转至此处，并仅希望在以后避免错误消息，请尝试：

关于 Internet Explorer 脚本错误应采取什么措施？

问题：我无法在 Internet Explorer 的选项下关闭自动脚本调试程序。

正在工作的

F12

工具

在 IE11 中，我们重头开始重建 F12 工具。它们具有全新的 UI 和新功能性，可使你更快、更轻松地进行开发和调试。

在键盘上按“F12”键以打开工具。如果你的键盘没有功能键，则可以使用

“工具”

菜单。

有八个不同工具，每个工具在 F12 工具界面中都带有其自己的选项卡。你将在此处找到每个工具的图像、工具的作用和新增功能小结，以及该工具简化的几个典型开发或调试任务。

DOM

资源管理器工具

(CTRL + 1)

DOM 资源管理器工具

显示了在浏览器中渲染网页时网页的结构，并使在活动页中编辑 HTML 和样式的操作成为可能。不必编辑或重新加载源，即可执行此操作，以便你可以快速解决显示问题或试用新思路。

以下新功能

包含在

DOM 资源管理器工具

中：

编辑 HTML 属性和 CSS 属性时，会提供 IntelliSense 自动完成建议。

拖动 DOM 节点以将其重新排列。

它简化的开发和调试任务：

确定不以正确位置或正确大小显示元素的原因。

指出哪些 CSS 演示和媒体查询被应用于元素。

测试元素的一系列不同颜色，以查看哪种颜色最佳。

了解有关 DOM 资源管理器工具的详细信息

。

“

控制台

”

工具

(CTRL + 2)

“控制台”工具

提供了与运行代码交互、使用控制台的命令行发送信息和使用

控制台调试 API

获取信息的方式。“控制台”工具对开发人员而言非常有用，我们已使其更易于获得。现在你可以使用 UI 右上角“帮助”按钮旁边的“控制台”按钮或按 CTRL + `在任何其他工具的底部打开它。

以下新功能

包含在

“控制台”工具

中：

使用“控制台”按钮或 CTRL + ` 在任何其他工具的底部打开控制台。

用于计时、计数、编组等的新

控制台调试 API

方法。

命令行上的 IntelliSense 自动完成建议可加快输入速度、减少拼写错误并帮助你发现 JavaScript API 的各个方面。

它简化的开发和调试任务：

查看系统错误消息、异常警告和调试输出。

使用新的计时方法将计时代码执行下拉至该语句。

在不重新加载的情况下，更改运行代码中的变量值。

了解有关“控制台”工具的详细信息

。

“

调试程序

”

工具

(CTRL + 3)

你可以使用

“调试程序”工具

检查代码的作用、代码执行时间及其执行方式。在执行过程中暂停代码，逐行操作代码，然后查看每个步骤中变量和对象的状态。

以下新功能

包含在

“调试程序”工具

中：

无刷新调试。设置断点，无需在运行时重新加载和丢失状态。

用于更轻松管理多个脚本的选项卡式文档界面。

突出显示断点和搜索匹配的滚动条。

它简化的开发和调试任务：

使用调用栈查看导致函数调用的原因。

使压缩或精简的代码更易于读取。

监视 Web Worker 创建和执行。

了解有关“调试程序”工具的详细信息

。

“

网络

”

工具

(CTRL + 4)

“网络”工具

向你提供了涉及加载和网页操作的任何网络请求的详细信息。

以下新功能

包含在

“网络”工具

中：

改进的请求计时信息。

改进的压缩信息捕获。

它简化的开发和调试任务：

查看页面跨资源消耗的带宽量。

通过查看请求和响应标头及正文调试 AJAX 请求。

标识减慢网页加载速度的网络请求。

了解有关“网络”工具的详细信息

。

“UI

响应能力

”

工具

(CTRL + 5)

“UI 响应能力”工具

可帮助你在页面速度减慢时了解出了什么问题。使用它分析速度缓慢的特定点可显示导致这些问题的操作。

UI 响应能力工具

在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：

标识导致 UI 缓慢的 CPU 活动的不同源。

洞察网页的帧率。

在时间线上设置标签以隔离用户方案。

它简化的开发和调试任务：

测试代码优化。

加快你的网页速度。

了解有关“UI 响应能力”工具的详细信息

。

“

探查器

”

工具

(CTRL + 6)

“探查器”工具

是 JavaScript 速度的单纯计量工具，向你显示了在分析会话过程中调用的函数、调用次数以及完成所需的时间。

以下新功能

包含在

“探查器”工具

中：

跟踪在 Web Worker 中执行了哪些函数。

更干净、更快的响应 UI。

它简化的开发和调试任务：

隔离代码中最慢的部分。

测试代码优化。

加快你的网页速度

了解有关“探查器”工具的详细信息

。

“

内存

”

工具

(CTRL + 7)

如果某个网页开始很快，但使用一会后就变慢，主要原因通常是内存泄漏。

“内存”工具

跟踪网页的内存使用情况，帮助你标识何处的内存使用处于增长趋势、增长原因以及如何修复它。

“内存”工具

在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：

使用时间线可以查看内存使用的进度更改。

使用快照可以在特定点检查内存使用的详细信息。

使用快照比较可以标识特定增长点。

它简化的开发和调试任务：

标识断开的 DOM 节点。

标识内存增长点。

计量对象的内存使用情况。

了解有关“内存”工具的详细信息

。

“

模拟

”

工具

(CTRL + 8)

“模拟”工具

可帮助你测试你的网页在不同屏幕大小和硬件功能上的运行方式，以及它们如何响应不同的用户代理字符串。

“模拟”工具

在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：

你可以模拟不同的屏幕大小和分辨率。

GPS 模拟。

它简化的开发和调试任务：

在多个屏幕类型上测试响应设计。

对移动站点测试位置感知功能。

了解有关“模拟”工具的详细信息

。

DOM资源管理器

使用“DOM 资源管理器”工具查看网页的 DOM（文档对象模型）状态、检查 HTML 结构和 CSS 样式，并测试更改以解决显示问题。

进入 DOM

HTML 和 CSS 文件是浏览器用于构建 DOM（文档对象模型）的蓝图，它将使用该蓝图呈现网页。“DOM 资源管理器”工具将向你显示网页的集成结构，并允许你无需编辑页面的源文件，即可更改样式、移动 HTML 元素，以及更改元素属性。

这可以在元素位置错误或行为异常时帮助你诊断问题，然后解决问题。

元素窗格

左侧的元素窗格实时显示当前创建的 DOM。使用你的鼠标浏览它，单击父元素旁的箭头将其展开，并查看其子元素。你也可以使用键盘上的箭头键浏览它，使用向左键和向右键以展开和折叠元素。

选择元素

可以使用四种方法选择要检查的元素：

通过元素窗格

：使用键盘或鼠标在“元素窗格”中浏览。
选择元素

：单击“DOM 资源管理器”标题旁的按钮（或按 CTRL + B）以激活“选择元素”工具。然后，单击网页中的任意位置，将选中你单击的元素。
检查元素

：右键单击网页中的任意元素，并从上下文菜单中选择“检查元素”。
痕迹

：选中一个元素后，“元素窗格”底部将显示其父元素（如果存在）的痕迹线索。单击痕迹磁贴选择它代表的元素。

检查完元素后，它将突出显示。

突出显示不仅显示元素边界，还显示其填充的边界、边框和边距。可以使用“DOM 资源管理器”工具标题右侧的第二个按钮切换启用或禁用状态。

编辑元素

可以使用三种方法编辑元素：

编辑属性

：可以通过双击或选择属性，按

Enter

，然后通过选项卡浏览属性以进行编辑。

当你编辑类属性时，将提供来自样式的匹配类的建议列表。双击建议或使用箭头键导航到建议，然后按

Tab

或

Enter

选择它。

添加属性

：右键单击元素，并单击“添加属性”。
作为 HTML

编辑

：右键单击元素，并单击“作为 HTML 编辑”。该元素及其子元素将在边界框内显示为纯文本。按照你在文本编辑器中的方式编辑文本，然后单击框外任意位置提交更改。

要点

不能在“DOM 资源管理器”中以 HTML 的形式编辑
doctype
、
html
、
head
、
body
和
script
元素。

如果你的更改没有产生需要的结果，请按 CTRL + Z 撤销上一处更改。

移动元素

你可以采用两种方法移动元素：

拖动 DOM

节点

：在 Internet Explorer 11 中，你可以拖动元素窗格中的元素。单击元素并将其拖动到新位置，操作方法与其他任何类型的可移动项目相同。
剪切/

复制和粘贴

：使用右键单击上下文菜单或键盘快捷方式来剪切、复制和粘贴元素。

当复制某个元素并使用 CTRL + V 进行粘贴时，剪切板上的元素将作为选中元素的子元素粘贴。右键单击该元素以使用上下文菜单中的“粘贴之前的内容”选项。

注意

请勿使用上下文菜单中的“复制带有样式的元素”选项来移动 DOM 中的元素。它将包含该元素的 HTML 文档及其所有相关样式放置在剪切板上，以便粘贴到外部编辑器。

样式窗格

“样式窗格”提供不同视图，用于查看向元素应用了哪些样式，以及元素关联事件触发了哪个代码。该窗格有五个选项卡。

样式

“样式”选项卡是应用到元素的所有样式以及应用的样式属性的列表。它将直接面向元素的样式与继承样式分开，并识别继承样式来自哪些上级元素。它还可以根据

CSS 媒体查询

查找应用了哪些元素。

它可以实时更新，因此如果你执行了基于窗口宽度的媒体查询，调整窗口大小将改变应用的样式列表，这是因为匹配了不同的媒体查询。

编辑样式

你可以通过选中或取消选中属性左侧的框来启用或禁用样式属性。

若要编辑规则名称或属性，请单击它。IntelliSense 自动完成建议是 IE11 中的新功能。键入属性名称时，将建议匹配的 CSS 属性名称。键入属性值时，如果该属性具有一组已定义的可能的值，将建议匹配的值。双击建议或使用箭头键导航到建议，然后按

Tab

或

Enter

以选择它。

要添加新规则或将属性添加到现有规则，请在选项卡中右键单击，然后单击“添加规则”或“添加属性”。

跟踪

“跟踪”选项卡可以跟踪元素样式的源。

该图像显示了元素的颜色以及已覆盖的父元素的颜色属性链。如果元素上的特定属性与预期不同，可以使用跟踪以查找该属性的来源和它覆盖的元素。

在“跟踪”选项卡中，不能编辑属性，但可以使用属性旁的复选框切换其启用或禁用状态。关闭当前活动属性将激活链中的下一个属性。

已计算

“已计算”样式选项卡与“跟踪”选项卡非常相似，但具有以下两处明显的差异：

精确计算

：所有没有硬编码度量值的属性（例如
calc()
表达式、百分比或
em
单位）都在显示时带有为其计算的像素值。
隐式默认值

：“已计算”样式选项卡具有“显示所有样式”按钮

。

打开该按钮时，它仅显示用户定义的样式。关闭时，它显示 Internet Explorer 的默认样式和任何应用到元素的隐式样式。该列表可能很长，因此它旁边有“筛选属性”框。在该框中键入文本，将筛选属性列表，仅显示匹配文本的属性。

布局

“布局”选项卡显示用于选定元素定位的框模型图表，它采用的颜色与选定元素突出显示的颜色相同。你可以通过单击图表中的任意值以进行编辑。

事件

“事件”选项卡显示元素的 DOM 事件或 CSS 选择器，这些选择器具有采用 JavaScript 方式分配给它们的处理程序。可以单击文件名以在

调试程序

中显示文件

在上图中，一个元素的单击事件由两个脚本中的两个函数进行处理。如果单击该元素时发生异常行为，可能是因为一个处理程序在侦听另一个元素的事件。

控制台

使用“控制台”工具查看错误和其他信息、发送调试输出、检查 JavaScript 对象和 XML 节点，以及在所选窗口或框架的上下文中运行 JavaScript。

用于了解代码的窗口

“控制台”工具的主要用途是与运行的网页进行向内和向外的通信：

向内：

你可以运行 JavaScript 以查看和更改正在运行的网页中的值、向运行的代码添加函数，以及在执行代码时运行调试代码。
向外：

Internet Explorer 和 JavaScript 代码将向开发人员提供状态、错误和调试消息，包括可检查的 JavaScript 对象和 DOM 节点。

将信息发送到“控制台”。

Internet Explorer 发送到控制台的消息

只有启动“控制台”，它才会显示消息。通过打开 F12 开发人员工具并选择“控制台”工具 (CTRL + 2) 来启动它。你还可以使用工具面板右上方的“显示控制台”按钮或按 CTRL + `，以使用另一个工具打开“控制台”。

从该图像中，你可以看到 Internet Explorer 系统消息具有三个分类。它们是（按顺序排列）：

信息：

你可能希望了解的非重要信息。
警告：

网页中可能存在错误，它不一定会打断网页，但可能导致异常行为。
错误：

使代码无法运行的严重错误。有关详细信息，请参阅

控制台中使用的 Internet Explorer 错误代码列表

。

可以从控制台输出中筛选出这些消息。“控制台”窗格顶部的用于每种消息类型的图标可以用于切换。单击一个图标以删除其关联的消息类型，再次单击以将其返回。还可以在控制台输出中右键单击，并在上下文菜单中查找用于每种类型的复选框。

单击消息后跟的文件名时，将打开

“调试程序”

工具，并在“脚本”窗格中加载文件。

开发人员可以从代码发送到控制台的消息

控制台调试 API

向你提供用于从你的代码将信息发送到控制台的方法。信息细分为以下类型：

自定义消息

你有四个用于自定义消息的选项。三个选项使用系统消息的格式：

console.info()

用于信息消息、

console.warn()

用于警告、

console.error()

用于错误。第四个选项 (

console.log()

) 显示不带警报图标的纯文本。这四个选项都为消息采用相同的参数形式。

仅文本：

JavaScript

console.log('This is some text');

This is some text

仅变量：

JavaScript

var mytext = 'This is some text';
console.log(mytext);

This is some text

混合的文本和变量：

JavaScript

var mytext = 'pieces';
var myval = 0;
console.log("The number of " + mytext + "is " + myval);

The number of pieces is 0

变量替换：

JavaScript

var mytext = 'pieces';
var myval = 5;
console.log("The number of %s is %d", mytext, myval);

The number of pieces is 5

变量替换具有五种变量类型：

- %s
  
  – 字符串
- %d
  
  – 整数
- %f
  
  – 浮点数
- %i
  
  – 整数
- %o
  
  – 无类型/任意

变量类型控制变量的呈现方式。例如，由整数变量类型表示的浮点数值显示为一个整数。

可检查的对象和节点

可检查的对象是 Internet Explorer 11 中的新增功能。它们采用折叠的树格式显示在控制台中，并具有可展开的节点。

要显示可检查的 JavaScript 对象，请使用

console.dir()

将其发送到控制台

要显示可检查的 DOM 节点，请使用

console.dirxml()

将其发送到控制台

HTML

<div id="thediv">
   <p>Click the button to show this div as a JavaScript object and a 
   <em>DOM</em> node.</p>
   <button id="thebutton">show it</button>
</div>
<script>
  document.getElementById('thebutton').addEventListener('click', function(){
    var divid = document.getElementById('thediv');
    console.log('Showing the div element as a DOM node.');
    console.dirxml(divid);
    console.log('Showing the div element as a JavaScript object.');
    console.dir(divid);
  });
</script>

使用左侧箭头展开对象和节点。

右键单击 DOM 节点可以提供上下文菜单中的“评估为对象”选项。如果选择该选项，会将节点作为对象发送到控制台。同样，表示 DOM 节点的 JavaScript 对象在上下文菜单中提供“评估为 HTML”选项。

计数器

虽然在代码中设置计数器相对简单，但它仍是一项重复的任务。为了加速开发人员工作流，

控制台调试 API

提供简单的速记。

使用

console.count()

，其字符串包含作为参数的计数器标签。首次与特定标签一起使用时，将在控制台输出中建立一个计数器。之后使用带有相同标签的
console.count()
时，计数器的计数将增加。要将计数器重置为零，请使用带有标签的
console.countReset()
。

JavaScript

console.count('mylabel');
for(var i = 0; i < 10; i++){
  console.count('mylabel');
}

mylabel:         11

计时器

类似于创建

计数器

，在代码中创建计时器相对简单，但

控制台调试 API

提供可使其进一步简化的简单速记。

在代码的任意位置使用

console.time()

以启动计时器，并使用

console.timeEnd()

以结束计时器并将结果发送到控制台。如果要为你的计时器添加标签或需要多个计时器，请为
console.time()
和
console.timeEnd()
方法传递具有作为参数的唯一标签的字符串。如果不传递参数，这些方法将使用“default”作为标签。

断言

断言是另一种用于加速开发人员工作流的速记。如果与

console.assert()

一起使用的第一个参数评估为

false

，它将运行

console.error()

，并将断言的额外参数用于错误消息。

使用以下代码行：

JavaScript

console.assert(f < 25, 'f is not less than %d, but is instead %o', 25, f);

它等效于写入

JavaScript

if(!(f < 25)){
  console.error('f is not less than %d, but is instead %o', 25, f)
}

。在示例代码中，我们使用了
%o
输出变量。由于上述评估在变量值不为数字时将失败，所以使用
%o
使你可以查看变量本身，而非使其采用特定类型。

跟踪和分析

了解从何处调用你的代码、正在运行哪个代码，以及执行任务需要多长时间，这些信息对于分析速度缓慢或异常行为非常有用。

堆栈跟踪

通过向上追溯路径的跟踪请求向你显示到达当前代码的执行路径。在代码中使用

console.trace()

以显示堆栈跟踪。

该代码…

JavaScript

function a(){
  c();
}
function b(){
  c();
}
function c(){
  console.trace()
}
function d(){
  b();
}
 
a();
d();

…在控制台中显示此输出。

console.trace()

at c (http://www.contoso.com/trace.html:24:3)

at a (http://www.contoso.com/trace.html:18:3)

at Global code (http://www.contoso.com/trace.html:30:1)

console.trace()

at c (http://www.contoso.com/trace.html:24:3)

at b (http://www.contoso.com/trace.html:21:3)

at d (http://www.contoso.com/trace.html:27:3)

at Global code (http://www.contoso.com/trace.html:31:1)

在其他实例中，查看两点间运行的代码的每个部分将十分有用。

探查器

是用于该目的的最佳工具，但在一些情况下可能需要比手动停止和开始更高的精确度。

要从代码中精确地开始和停止

探查器

，请使用

console.profile()

开始记录探查器会话，并使用

console.profileEnd()

停止记录。

将字符串作为方法的参数传递到

console.profile()

，以将其用作分析报告的名称。

小心

覆盖分析会话可能会创建异常报告。在首次测试运行时使用

console.trace()

替代

console.profile()

，以确保不会在结束分析会话前多次调用
console.profile()
。如果发现获取的跟踪比预计的多，这可能是你的问题。

管理消息以增强可读性

对消息进行编组。

由于要处理发送到控制台的所有类型的消息和内容，跟踪它们可能十分困难。使用以下命令以保持井然有序：

console.group()

将启动处于展开状态的可折叠组。将此命令放置在组中后，每条消息都将发送至控制台，直到使用

console.groupEnd()

命令为止。如果将字符串提供为方法的首个参数，该字符串将用作组的标签。
console.groupCollapsed()

将启动处于折叠状态的可折叠组。在所有其他方面，它与

console.group()

的行为相同。
console.groupEnd()

将关闭最新打开的组。
console.clear()

将删除当前显示在控制台中的所有消息。

可以在另一个组中嵌套组，以便获得更详细的编组级别。

要启用或禁用不同类型的消息，请使用筛选。

在“控制台”工具的顶部，存在用于错误、警告和信息消息的图标，旁边带有每种类型的数量。单击某个图标以切换该类消息显示的启用或禁用状态。切换为禁用时，将隐藏该类消息（但没有删除），可以通过将该类消息重新切换为启用来还原它们。

在控制台输出中右键单击显示具有复选框的上下文菜单，这些复选框可以切换三种主要消息类型以及使用

console.log()

发送的消息。

将 JavaScript 发送到“控制台”。

控制台不仅从代码显示输出，还提供用于执行代码的界面。仅需在“控制台”底部的命令行窗格中输入任何有效 JavaScript。

在命令行中输入的所有脚本将在当前选定窗口的

全局范围

内执行。如果使用

frameset

或

iframes

构建了你的网页，这些框架会将其自己的文档加载到自己的窗口中。

要面向 frameset 框架或 iframe 的窗口，请使用
cd()
命令，并将框架/iframe 的名称或 ID 属性用作参数。例如，你具有称为 microsoftFrame 的框架，并且要向其加载 Microsoft 主页。

JavaScript

cd(microsoftFrame);

Current window: www.microsoft.com/en-us/default.aspx

要点

请注意，框架名称旁没有引号。仅将未带引号的名称或 ID 值传递为参数。

要返回顶层窗口，请使用不带参数的
cd()
。

在

“

控制台

”

中选择元素

控制台选择器是 IE11 中的新增功能。它们提供简单的速记，可以在 DOM 结构中快速选择元素。这些选择器是：

$()

是用于

document.getElementById()

的速记。
$()

是用于

document.querySelectorAll()

的速记。

要点

如果网页中的代码将函数分配到

$

或

$$

，当控制台与该页面或其框架交互时，该函数将覆盖控制台选择器函数。

The multiline command line

虽然使用单行命令发送非常有用，但某些任务需要执行较长的脚本。单击向上双箭头符号以展开命令行。在多行模式中，根据需要输入多行，然后单击绿色箭头符号以在控制台中执行它。

调试程序

使用“调试程序”工具在代码运行时对其导航、设置监视点和断点、查看调用堆栈，以及提高编译/精简 JavaScript 的可读性。

何时需要“调试程序”工具？

“调试程序”工具可帮助你了解为何你的代码片段出现以下情况：

未按照预期方式运行。
未在预期时间运行。
在不应运行的时候运行。

“调试程序”工具可以暂停执行中的代码，这使你可以备份和重复代码块，并使你可以从不同角度检查代码以查看以下方面：

JavaScript 引擎到达该位置的过程。
正在执行的特定变量的值。
分布更改过程。

启动“调试程序”工具

在 Internet Explorer 11 中加载出现问题的网页，并按

F12

键或从

“工具”

菜单选择“F12 开发人员工具”选项以打开 F12 开发人员工具。单击“调试程序”工具图标或按 CTRL + 3 以打开该工具。

“调试程序”工具布局

“调试程序”工具的默认布局显示三个窗格，可以调整其宽度和/或高度。

“脚本”窗格（左边）在选项卡式界面中显示网页的 HTML 和 JavaScript 的源。“脚本”窗格的滚动条区域还突出显示断点的位置和搜索字词的匹配项。
“监视点”窗格（右上方）显示变量值。在断开模式时，它以代码形式显示当前位置的本地变量（称为

区域设置

），以及要求它跟踪的特定变量（称为

监视点

）。
右下方的“调用堆栈和断点”窗格包含以下内容：
- 调用堆栈
  
  ：该模式显示导向当前执行点的函数调用链。例如，如果函数
  
  a()
  
  调用了函数
  
  b()
  
  ，而后者调用了函数
  
  c()
  
  ，并且在
  
  c()
  
  中暂停执行，它将显示从
  
  a()
  
  到
  
  b()
  
  到
  
  c()
  
  的路径。
- 断点
  
  ：该模式显示已设置的断点和跟踪点的列表，并提供用于删除、切换和编辑断点的函数。

“控制台”图标（位于 F12 工具顶部的“帮助”图标旁）或 CTRL + ` 均可以在“脚本”窗格下的第四个窗格中打开

“控制台”工具

。当你要查看“控制台”输出时，可以打开它或使用“控制台”命令行。

启动调试会话

可以使用两种方法启动调试会话。

设置断点

。当你的代码执行到断点时，你将进入断开模式，可以开始逐步运行代码。
在代码中断开。单击工具顶部的“断开”图标（两条垂直平行线）或按 CTRL + SHIFT + B。“调试程序”工具将在下一个执行的语句处断开。

“调试程序”工具是 IE11 中的新工具，它无需页面刷新和保存状态，即可进行调试，并且 F12 工具可以保持附加在浏览器窗口上。

控制会话流

如果“调试程序”工具到达断点，且你已准备好从该点继续执行操作，你可以使用执行控制图标来决定接下来要进行的操作。

按照从左到右的顺序，这些图标分别为：

继续

（F5 或 F8）：离开断开模式，继续执行到下一个断点。
断开

(CTRL + SHIFT + B)：在下一个运行的语句处断开。
单步执行

(F11)：单步执行调用的函数，如果不是函数，则单步执行下一个语句。
逐过程执行

(F10)：逐过程执行调用的函数，如果不是函数，则逐过程执行下一个语句。
跳出

(SHIFT + F11)：跳出当前函数，并单步执行调用的函数。
在创建新的

Worker

时断开

(CTRL + SHIFT + W)：在创建新的

Web Worker

时断开。
异常控制

(CTRL+ SHIFT + E)：

默认情况下，它将忽略异常，仅将其记录到

“控制台”工具

。你可以选择在出现所有异常时断开，或仅在出现未由代码中
try... catch
异常处理程序处理过的异常时断开。

注意

当你的网页中包含一个或多个大型 JavaScript 库时，请谨慎选择在出现未处理的异常时断开。你可能会发现自己在逐步执行许多不属于你的精简代码。

此外，在语句上断开后，你可以右键单击“脚本”窗格以显示三个额外的控件：

显示下一个语句

：通过单击“单步执行”突出显示下一个要运行的语句。
运行到光标

(CTRL + F10)：在光标所在位置创建断点（只要是有效的断开位置），并继续执行到该点。
设置下一个语句

(CTRL + SHIFT + F10)：该控件使你可以跳过函数中的语句，而无需跳出它，类似于临时注释语句。也可以向后跳到已运行的语句。执行此操作时，不会倒回网页。仅从该点重复你的代码。

设置代码格式以增强可读性

“异常控制”右侧的最后两个图标可以使较大代码块更易在“脚本”窗格中读取。

“出色打印”可以获取压缩或精简的代码块，并设置其格式以增强可读性。

JavaScript

function _ge(n){return _d.getElementById(n)}function sj_wf(n)
{var t=arguments;return function(){n.apply(null,[].slice.apply(t).slice(1))}}
function sj_ce(n,t,i){var r=_d.createElement(n);return t&&(r.id=t),i&&(r.className=i),r}

将变为

JavaScript

 function _ge(n) {
  return _d.getElementById(n);
}
function sj_wf(n) {  
  var t = arguments;
  return function () {
    n.apply(null, [].slice.apply(t).slice(1));
  };
}
function sj_ce(n, t, i) {
  var r = _d.createElement(n);
  return t && (r.id = t) , i && (r.className = i) , r;
}

自动换行

可以打断较长的行以使其适合“脚本”窗格，你无需水平滚动即可查看完整的行。

设置和管理断点

不同类型的点使你可以在“调试程序”工具到达这些点时指示它执行不同操作。

常规断点

最容易设置（如果每行都有一个语句）。在“脚本”窗格最左侧带有阴影的边缘，单击行号旁的位置。将出现一个点，断点即设置完毕。

在具有多个语句的行上，可以设置单个语句的断点。在语句上右键单击，然后从上下文菜单中设置断点，或者将光标放置在语句内，并单击 F9。

条件断点

仅当设置的条件评估为 true 时，才会断开。例如，我们假设你的代码中存在
students
变量，你希望仅在
students
的值大于 20 时断开。

请右键单击断点或语句，然后从上下文菜单中单击“条件”，或者按 ALT + F9。在条件对话框中，输入
students > 20
，然后提交条件。你的断点将显示 + 符号，仅当
students > 20
评估为 true 时，你的代码才在该点断开。

跟踪点

是 IE11 中的新功能。它们的作用类似于临时

console.log()

命令。

要设置跟踪点，请右键单击语句，然后从上下文菜单中单击“插入跟踪点”。在对话框中，采用用于
console.log()
命令的参数的同一格式输入消息。它可以访问的本地和全局变量与单击的语句相同。

“断点”窗格

除了在“脚本”窗格的语句旁显示，完整的断点集将显示在“断点”窗格中。

你可以在“断点”窗格中管理多个点。右键单击其中的任意位置以获取上下文菜单选项，以删除所有点或切换其启用或禁用状态。这些选项还作为图标显示在窗格的右上角以及单个断点的左侧和右侧。右键单击任何单个点将显示上下文菜单中的“条件”或“跟踪消息”选项，以便你可以更改消息或使断点成为条件断点。

该面板可以跟踪多个不同脚本中的多个断点，这些脚本可能用于你的页面。单击任何断点相关联文件名将使该活动文件在“脚本”窗格中打开并滚动到相应行。

检查对象和变量

设置你的断点并单步执行代码后，“调试程序”工具向你提供几种方式以查看情况。

在“脚本”窗格中，当调试程序在语句上暂停时，将鼠标悬停在任何变量、函数或对象上，以查看覆盖中的详细信息。将你的鼠标向下移动到覆盖中，展开和检查对象，操作方法非常类似于使用

dirxml()

方法将其记录到

“控制台”

时可以进行的操作。

单击覆盖底部的“添加监视点”，以向 “监视点”窗格添加变量或对象。

“监视点”中的“区域设置”节点为你提供所有对象和变量的目录（本地和全局范围），可用于当前断开中作为焦点的语句。这有助于识别位于错误作用域中的变量。
使用“添加监视点”命令添加到“监视点”窗格的变量或对象显示在“区域设置”节点下，并在断开模式的每一步中受到监视，即使当前断点属于不同作用域也是如此。
异常调用函数的情况非常常见。这可能导致数据损坏和速度问题。“调用堆栈”窗格显示 JavaScript 引擎到达该函数所使用的路由。当前函数将显示在顶部，调用的函数按照逆序显示在其下。

管理多个脚本

IE11“调试程序”工具中的“脚本”窗格提供选项卡式界面，你可以在其中通过单击其选项卡选择打开的文件，并使用 CTRL + TAB 快速浏览打开的选项卡。

可以通过单击文件夹图标打开文件，或按 CTRL + O 打开文件列表。在文件列表中，将在框架或窗口的主文档下采用节点为文档编组，文档在该框架或窗口中运行。在单个文件上方悬停以显示文件的完整 URI。

Web Worker 显示为独立于创建它们的文档的节点。Iframes 显示为主文档的子节点。

文件列表顶部的“要筛选的类型”框可以按文件名筛选可用文件。要在所有可用文件中运行文本搜索，请使用 F12 工具右上方的“在文件中查找”(CTRL + F) 框。如果找到了你的文本，它将打开匹配搜索文本的第一个文件，并在“脚本”窗格的滚动条上标识该文件中的匹配项。按 F3 可以将你定位到下一处匹配。

请勿调试和分析

由于同时运行“调试程序”和“探查器”工具需要额外开销，所以分析报告中的值不会反映代码的实际加载和运行时间。不支持尝试同时运行两个函数。

网络

使用网络工具来查看浏览器和服务器之间的通信、检查请求和回复标头、查看响应代码，以及调试 AJAX。

监视浏览器的通信

F12 开发人员工具中的

Network

工具可帮助你检查页面加载时间、针对 AJAX 请求的响应以及所有用于加载和运行现代网页和应用程序的网络活动。

从顶行开始

Network

工具中的顶行图标控制网络流量的记录，并为你提供工具来提供更高的准确性、管理你的结果以及在你捕获的流量中进行搜索。

从左至右，这些工具分别为：

“启用/禁用网络流量捕获 (F5/SHIFT+ F5)”启动和停止记录网络流量。
“导出捕获的流量”将你记录的数据保存为 XML 或 CSV（逗号分隔值）格式。
“总是从服务器刷新”是带有打开和关闭状态的切换开关。当打开时，Internet Explorer 11 从远程服务器下载所有页面元素，而不是从浏览器缓存。
“清除浏览器缓存 (CTRL + R)”删除浏览器缓存中保存的文件。浏览器通常会将页面元素保存在磁盘中，并再次使用它们来更快地重载。当你尝试衡量页面加载的实际时间时，清除缓存可确保从网络下载所有元素。
“清除 Cookie”可确保删除与当前域相关的所有 Cookie，以使你获得首次加载页面的体验。
“清除导航时的条目”是带有打开和关闭状态的切换开关。处于关闭状态时，会随着浏览器在页面间的移动，连续记录窗口或选项卡的网络流量。处于打开状态时，在你每次导航到新页面时会清除记录的流量。默认情况下，此开关处于打开状态。
“清除所有条目”可清除工具中所有记录的网络流量。
“流量搜索”允许你在捕获的流量中搜索文本字符串。在框中键入搜索文本并按 ENTER 键。包含该文本的网络交易详细信息将打开，且文本将突出显示。要搜索该文本的更多匹配项，你可以将光标放回文本框中，然后按 ENTER 键或按 F5。

默认情况下，记录的流量会在“摘要”视图中显示，如下所示。

读取和解释数据

Network

工具包括两种网络流量视图。“摘要”视图提供为选项卡或网页捕获的所有信息的快速概览，而“详细信息”视图则提供每个连接的详细信息，例如请求和响应标头以及详细的计时信息。你可以使用

Summary

和

Details

链接在视图之间切换。

“摘要”视图

“摘要”视图将页面的所有网络流量显示在一个表格中。默认情况下，将按时间顺序显示这些信息，但是你可以通过单击任意列的标头以其他方式排序表格。此表格介绍了你可以查看的信息类型。

列标头	说明
URL	请求的 URL。
协议	连接协议。例如，标准 Web 服务器的连接使用 HTTP，而加密连接通常使用 HTTPS。Internet Explorer 支持许多连接协议。
方法	HTTP 方法谓词（例如 `POST` 或 `GET` ）。
结果	HTTP 响应代码。
类型	已接收的内容类型。
已接收	已接收的数据总量（以字节为单位）。
花费的时间	接收内容所耗费的总时间（以毫秒为单位）。
启动程序	引发网络请求的浏览器操作类型或 DOM 节点。常见的启动程序包括页面刷新、页面中链接的图像和样式表以及 XMLHttpRequest 事件。
计时	网络事件的时间线。

详细信息视图

Details

视图提供有关特定请求的信息。要查看详细信息，请双击“摘要”视图中的某个条目或单击工具顶部旁的

Details

链接。

你可以在每个选项卡的详细视图中找到此信息。

选项卡	说明
请求标头	显示发送至服务器的请求标头。
请求正文	显示发送至服务器的请求数据。对于大多数的谓词，正文为空白。对于 `POST` ，请求正文包含发送至服务器的数据。
响应标头	显示从服务器接收的响应标头。
响应正文	指示从服务器接收的响应数据。如果响应的内容为图像，将显示图像。如果响应的内容为二进制，将显示用于将内容保存到磁盘的链接。否则，将在可滚动的文本区域显示响应文本。
Cookie	指示已发送或已接收的 Cookie。 “Cookie” 选项卡中有八个列。列标头说明方向已发送或已接收的 Cookie。键键值对的标识符。值键值对的值。过期日期 Cookie 的过期日期。域 Cookie 的域。路径 Cookie 的路径。安全指示是否只能通过安全超文本传输协议 (HTTPS) 连接访问 Cookie。仅 HTTP 指示是否只能通过 HTTP（而非 JavaScript）访问 Cookie。
启动程序	总结 Windows Internet Explorer 下载操作的详细信息。操作可以包括用户刷新、源解析期间的词汇切分、HTML 预解析期间的推理下载、框架导航和由脚本启动的事件（如 XMLHttpRequest）。
计时	列出与请求相关的事件及其相应的时间。计时信息将显示为表格和时间线图形。将捕获以下事件：等待、开始、请求、响应、间隙、DOMContentLoaded 和加载。单击表格或时间线中的某个事件，将突出显示它并将显示该事件类型的说明。

限制

IE11 可以有效地捕获和报告网络流量，但也存在一些限制。使用“网络”工具衡量并在其中显示的网络流量与未被衡量的流量存在相似的特征，但是计时不会精确地匹配未被监视的结果。

仅会为与你在开始使用“网络”工具捕获流量时打开的 Internet Explorer 窗口/选项卡关联的进程捕获 HTTP 流量。要同时调试两个窗口/选项卡，你必须打开它们各自的“F12 开发人员工具”窗口。此外，网络工具无法监视用于创建多个进程的选项卡的网络流量。

UI响应能力

使用“UI 响应能力”工具分析你的网页帧率和不同类型的 CPU 使用率，以帮助你分析 UI 性能问题。

比较仪表板和诊断

检查你的页面性能之前，请使用“性能仪表板”检查其重要指标

可以通过 Internet Explorer 11 的“工具”菜单 (CTRL+Shift+U) 访问 “性能仪表板”。该工具可以向你快速提供以下信息：你的页面用来呈现对 DOM 做出的更改的时间（“绘制时间”）、每秒呈现的帧数（“帧率”）、使用了多少内存（“内存”），以及它向你的处理器提出多少需求（“CPU”）。

如果单击量度，可以获取动态图形，它将显示数据随着时间的变化。完成后，单击该图形以返回到仪表板。

仪表板是识别导致网站速度缓慢的操作的理想切入点。然后，可以使用“UI 响应能力”探查器获取问题的更详细信息。

速度十分重要

无论是反应迟缓的动画还是响应缓慢的用户界面元素，当 UI 不流畅和无响应时，用户对站点的体验会受到损害。新的“UI 响应能力”探查器可以帮助你在页面速度下降时查看后台发生的情况。该信息可以为提高速度提供线索。

记录分析会话

首次加载“UI 响应能力”工具时，你将在主窗格中看到一条“开始分析以启动性能会话”指令。单击指令或工具顶部的箭头图标以开始分析。

在分析期间，请执行捕获你尝试分析的缓慢速度所需的最少操作。与页面的额外交互会产生额外数据，这会使结果混乱。

如果在报告中需要精确页面加载时间，请访问

“网络工具”

，并使用其“清理浏览器缓存”选项，然后再进行分析。使用“网络工具” 可以确保你从网络加载所有页面资源，并在开始分析时立即重新加载页面。

“UI 响应能力”工具会自动标记“应用生命周期事件”，例如

DOMContentLoaded

。使用

performance.mark()

方法从你的代码中设置自定义“用户标记”。

当捕获了要分析的行为时，请单击“停止分析以生成报告”或工具顶部的正方形图标。

性能会话报告

标尺

标尺显示会话运行的时间以及“应用生命周期事件”和“用户标记”。在事件和标记上悬停可以显示其标签，并帮助你在会话中定向你自己。

可以使用 performance.mark()方法的参数的字符串为用户标记添加标签。

时间线

“时间线”显示两个不同的度量：

“CPU 使用率”显示正在发生的活动的量和类型，并细分为使用颜色区分的类别。关于类别更详细的细分，请参阅

事件类别

。

“视觉吞吐量”将显示估计每秒显示的帧数。帧率骤降表示速度下降，帧率为零表示掉帧。

在“时间线”的某个区域上单击并水平拖动以突出显示。该操作可以筛选“时间线详细信息”，仅显示突出显示区域的详细信息。缩放以获取更多详细信息。在缩放控件的右侧，“UI 响应能力”工具的顶部有一个“清除选择”图标，它可以删除突出显示。

时间线详细信息

“时间线详细信息”将深入分析记录的事件，将类别细分到组件事件。该信息将提供关于受其影响的 DOM 元素或者由它们启动运行的代码的详细信息。

在上一个图像中，DOMContentLoaded 事件的“排除持续时间”很短，这就是事件自身触发所需的时间。较长的“包含持续时间”不仅包含事件，还包含由事件启动的几个进程。

若要快速查看导致包含持续时间的事件概述，事件详细信息窗格将显示采用与时间线相同的颜色区分的扇形图。因为颜色表示事件的类别，所以该图表可能包含多个颜色相同的部分。将你的鼠标放置在某个片段上可以显示具有事件标签的工具提示。

关于详细信息的详细信息

“时间线详细信息”中的每个元素都会显示不同的信息，具体取决于其类型。

该计时器由

setTimeout()

调用，它调用了“script.jsx”中的“autoNextSlide”函数。当你单击文件名时，它将在

“调试程序”工具

中打开，并导航到函数以进行检查。

在“脚本”占用大部分事件时间，且“样式”占用了相当一部分时间时，底部扇形图将显示该信息。在“时间线详细信息”中展开计时器的事件可以显示关于花费所需时间的不同“样式”操作的详细信息。

事件类别和定义

“响应能力”工具为时间线使用 7 种主要事件类别。这些类别将细分为“时间线详细信息”中的一系列事件。

加载

包含与自展和加载网页资源相关的事件。它为主窗口和其中的任何帧进行记录。“加载”中收集的事件包括：

CSS

解析

：找到了新的 CSS 内容，且需要分析它。详细信息包括内容的 URL 或事件后圆括号内的“内联”（如果 CSS 采用硬编码添加到网页）。
HTML parsing

：找到了新的 HTML 内容，需要将其分为节点并添加到 DOM。
HTTP request

：向服务器发出 HTTP 请求，并接收响应。可以同时显示多个响应，且不使用大量资源。然而，等待完成较大或较慢的 HTTP 请求时，可能会延迟呈现。请求的 URL 和响应代码为以下所示的详细信息类型。
Speculative downloading

：搜索网页的 HTML 内容以查找所需资源，以便尽快地计划 HTTP 请求。

脚本

包含与处理和执行 JavaScript 相关的事件。“脚本”中收集了以下事件：

动画帧回调

：已准备新的帧并触发注册的回调，以便引起任何视觉变化。详细信息包括网页中回调的位置或外部脚本。
DOM

事件

：已触发

DOM event

。其附带的事件侦听器显示为事件的子项。
脚本评估

：处理 <script> 元素的内容。详细信息包括脚本的 URL 或“内联”（如果它是网页的一部分）。
计时器

：

interval

或

timeout

完成并触发了回调的执行过程。详细信息包括网页中计时器的位置或外部脚本、所用的时间及其回调函数（如果存在回调函数）的名称。由回调触发的操作将显示为事件的子项。

GC

（垃圾回收）是指不再需要项目时，将其从内存中标识并删除。将在“时间线详细信息”中使用全名指示它。

样式

包含与 CSS 样式和元素定位相关的事件。事件活动。“样式”中收集的事件包括：

布局

：已更改 DOM，需要计算所有受到影响的元素的大小和/或位置。
样式计算

：已更改 DOM 或添加新的 CSS 内容，需要重新计算所有受到影响的元素的样式属性。

呈现

包含与在屏幕上放置元素相关的事件。“呈现”中收集的事件包括：

绘制

：已对 DOM 做出视觉更改，需要重新绘制页面所有受到影响的部分。

呈现层

事件可能作为子事件显示，并指示已重新绘制 DOM 的特定片段。受到

呈现层

事件影响的层的坐标 (x,y) 和维度都包含在详细信息中。

图像解码

是将已压缩的图像文件格式转换为绘制到屏幕上的带有颜色的像素序列的活动。将在“时间线详细信息”中使用其名称指示它。

其他

：与浏览器相关的杂项计算。分类为“其他”的计算不会在“时间线详细信息”中显示。

有关使用“UI 响应能力”工具的更多特定演示，请查看我们的演示和代码示例：

使用“UI 响应能力”工具改进动画性能

。

性能分析提示

多次测试

：在分析报告中看到的结果并非仅基于你的代码。它们受到在系统上争夺你的处理器和内存的其他进程的影响。后台运行的的病毒扫描或浏览器中打开过多选项卡可能导致一时速度缓慢或整体测试不佳。此外，如果你在实验室条件下在新计算机上进行测试，它可能速度很快，你的代码可以良好运行。确保你可以可靠地重现缓慢的速度（与重现错误相似）非常重要。然后，可以诊断原因。

一致性会带来速度更快的感觉：

“UI 响应能力”探查器对于随时间变化的帧率的视觉映射可能会非常有用。帧率不等或跳帧会使人感觉你的站点速度缓慢。如果降低动画速度可以减少跳帧并有助于保持帧率一致，它可以使人感觉站点速度更快。

“流畅 JavaScript 动画的秘密”””

提供了一些关于使用

window.requestAnimationFrame()

降低帧率并获得节省电源和防止跳帧的好处的几个建议。

该

CSS

中有多少必需部分？

许多站点使用具有站点宽度的样式表以更快地加载页面。它可以减少网络请求的数量，并利用后续加载的缓存。但是，无论该样式是否在页面中使用，样式表中的每个样式都必须被解析并添加到

样式

的复杂计算中。

对大部分站点而言，这从来都不会造成问题。在带有复杂样式、许多页面、许多 UI 动画以及巨大的具有站点宽度的样式表的超大站点中，你会经常可以看到“样式”操作由于未使用的样式所产生的开销而成为性能滞后的主要原因。

此时要问的问题是：未使用的样式的成本是否大于单个样式表的优势？尝试一些不同的解决方案，并分析它们。你很快就能得到答案。

探查器

使用 F12 开发人员工具中的“探查器” 以获取网页中 JavaScript 的详细性能度量。

分析脚本

“探查器”可以为你显示网页在分析会话期间运行的 JavaScript 函数。它包括关于它们的运行次数、每个函数运行的时长、父函数与子函数之间的关系等方面的详细信息。

要开始分析，请在 Internet Explorer 11 中打开你要分析的页面。按

F12

打开 F12 工具，并选择“探查器”工具。

当你第一次打开“探查器”工具时，网格是空的。要生成报告，请单击“开始分析”按钮或按 F5，然后运行要分析的代码。单击“停止分析”或按 SHIFT + F5 以结束会话并生成报告。例如，要分析单击某个按钮时发生的情况，请单击“开始探查”，单击该按钮，然后在完成关于此次单击的报告时单击“停止分析”。

精确度分析

还可以使用

控制台 API

从你的代码中开始和停止分析。
console.profile()
和
console.profileEnd()
方法使你可以在代码中确切的点上开始和停止“探查器”。

查看分析报告

每个探查器会话都生成分立报告，该报告不会被下一个报告覆盖，因此你可以在单个页面上运行多个分析会话。默认情况下显示最新的探查器报告，你可以单击“当前报告”下拉列表来查看其他报告。

可以通过“函数”视图或“调用树”视图这两种方法查看报告。“函数”视图在简单列表中显示所有函数。“调用树”视图显示函数之间的嵌套的父子关系。

分析数据类型

探查器通过分析返回最多 13 列数据，并在 IE11 中添加了新的

Worker ID

列以显示

Web Workers

运行函数的时间。在报告中，你可以右键单击任何列的页首，然后添加或删除列。可以在上一个图像中看到默认选择的列。可以在下一个图像中看到所有列均可见的“探查器”。

下表显示“探查器”工具中可用的数据分类。

列标题	显示的内容
函数	正在分析的函数的名称。
计数	调用此函数的总次数。
包含时间（毫秒）	在此函数中经过的运行时间长度。其中包括从此函数调用的子函数或外部函数中花费的时间。
包含时间百分比	在此函数中经过的运行时间百分比。其中包括从此函数调用的子函数或外部函数中花费的时间。
排除时间（毫秒）	在此函数中经过的运行时间长度。其中排除从此函数调用的子函数或外部函数中花费的时间。
排除时间百分比	在此函数中经过的运行时间百分比。其中排除从此函数调用的子函数或外部函数中花费的时间。
平均时间（毫秒）	在此函数及其子函数和外部函数中花费的平均时间。
最大时间（毫秒）	在此函数及其子函数和外部函数中花费的最大时间。
最小时间（毫秒）	在此函数及其子函数和外部函数中花费的最小时间。
函数类型	函数的类型 – DOM、用户、内置。
URL	定义此函数的源文件的 URL。
行号	此函数的开头在源代码中的行号。
Worker ID	表示运行特定函数的 Web Worker 的标识符。

包含时间和排除时间会指示代码中的问题。包含时间提供了此函数、由其调用的或其子函数调用的任何函数的总体时间。排除时间仅显示在特定函数内实际花费的时间。有可能一个函数的包含时间非常高，而排除时间很少。例如：

JavaScript

function boringone() {
// do some work for 250 milliseconds
}
 
function funone() {
// do some work for 200 milliseconds and then call boringone()
boringone();
}
 
function main() {
//do some work for 50 milliseconds then call funone()
funone();
}

在此示例中，首先调用 “main()” 函数（工作时间为 50 毫秒），然后调用 “funone()”（花费 200 毫秒），然后调用 “boringone()”（在完成之前工作 250 毫秒）。以下图表显示了包含时间和排除时间可能显示的值。

函数	包含时间	排除时间
main()	500 毫秒	50 毫秒
funone()	450 毫秒	200 毫秒
boringone()	250 毫秒	250 毫秒

每个函数的包含时间是运行该函数花费的时间加上运行它后面的函数（子函数）花费的所有时间。排除时间仅仅是运行当前函数花费的时间。函数链中的最后一个函数 “boringone()” 显示的包含时间和排除时间是相同的。

搜索报告和报告排序

搜索函数

你可以使用“探查器”工具顶部的“搜索”框搜索报告中的指定函数，该搜索框与“开始探查”和“导出数据”按钮位于同一组。

在“搜索”框中键入全部或部分名称，然后单击“搜索”按钮或按

Enter

。将突出显示搜索关键字的所有实例，并且报告会滚动到第一个匹配项。你可以在匹配项之间导航，通过按

Enter

或

F3

移动到下一处匹配，并按

Shift + Enter

或

Shift + F3

移动到上一处匹配。

按列排序

可以使用为 Excel 电子表格或 Word 表格排序的方式为列排序。

在“调用树”报告视图中排序时，仅对顶级函数的值进行排序。子函数仍保留其层次结构顺序。

复制和保存报告

要直接导出到一个逗号分隔 (.csv) 文件，请单击“导出数据”图标（在“开始分析”按钮旁边）。导出函数将保存所有行（包括标题），而复制和粘贴仅包括选中的行，而不包括标题。

内存

使用“内存”工具诊断可影响网页速度和稳定性的内存问题。

内存问题

如果你的网页在开始加载时运行良好，但逐渐变缓并有时出现崩溃，则页面的内存使用可能出现问题。“内存”工具在 Internet Explorer 11 中是 F12 开发人员工具的新增工具。

若要快速查看你的网页使用了多少内存，请从 IE11 的“工具”菜单中打开新的“性能”仪表板或使用 CTRL + SHIFT + U。单击内存使用数量以查看内存使用的动态图形。若要返回仪表板，请单击该图形。

当你要了解为什么看到“性能”仪表板显示的数量时，你将需要“内存”工具。它将详细检查网页的内存使用和内存增长，并标识改进方式。

诊断内存问题

在浏览器中加载网页后，打开 F12 工具，然后打开“内存”工具（使用相机图标或 CTRL + 7）。你可以从此屏幕开始分析，并在分析会话过程中拍摄堆栈快照。

如果你的问题是开始时内存使用率很高，但没有内存增长，请拍摄一个快照并对其进行检查，以查找内存使用率较高的区域。如果你的内存使用率随着时间的推移不断增长，则可以比较快照以查看内存增长的区域。

“

摘要

”

视图

开始分析并拍摄了几张快照后，你将看到类似于以下内容的会话摘要：

当你开始记录会话时，“总内存”时间线将当前浏览器选项卡进程的内存使用率显示为随着时间变化的图形。

你可以在 JavaScript 中使用 performance.mark() 方法将自定义“用户”标记添加到时间线，并使用标记的标签作为参数。你可以使用此方法添加特定事件。当鼠标指针悬停在时间线的标记上时，该标签将显示为工具提示。

在时间线下，可查看“堆栈快照”的摘要。

快照摘要向你提供的信息

每个快照都显示网页的缩略图（在拍摄快照时网页显示的外观），以及有关代码内存使用情况的详情。在第一张快照后，后续快照将添加有关内存使用和对象计数更改的摘要。

在第二张快照和后续快照中，创建的新对象数量和删除的旧对象数量将显示在对象计数下。如果这些数量过高，则可能出现性能问题。当你使用的内存量良好，但却创建和删除了大量对象时，可以使用

垃圾回收器

进程，它可释放内存。垃圾回收可以使用处理能力，因此最好是找到可重复使用或循环利用这些对象的方法，并使

垃圾回收器

短暂停止。

提示

若要查看

垃圾回收器

执行了多少任务，请使用

“UI 响应能力”

工具分析你的网页。

如果你单击内存使用数量，则可以查看该快照的详细视图。如果你单击内存更改数量，则可以查看突出显示了已添加或修改的对象的比较视图。在以上图像中，“快照 #2”包含了详细信息图标（中间带有“i”的圆）和它旁边的数字 30。此数字表示“内存”工具已标识为潜在内存问题的对象数。

快照详细信息视图

在快照上单击一个计量数字，以查看该计量的详细信息。以下图像显示了当你在快照中单击内存问题数量时出现的视图。

在以上视图中，你可以看到快照详细信息的“Dominator”视图，这些信息的排序方式将优先显示问题。

如果你悬停在详细信息图标上，则可以看到指示此项目为什么是潜在问题的工具提示。在以上示例中，DOM 节点未附加到 DOM。如果节点已从 DOM 中删除，但仍可以引用到其他位置，会发生此情况。

如果你单击对象，则可以在屏幕底部看到引用该节点的对象。在此情况下，称为

nodeholder

的数组包含将节点保留在内存中的引用。如果这不是你所期望的，则可以进行进一步调查。

三种视图类型

“Dominator”视图展开显示所有单独 HTML 元素、DOM 节点和代码创建的 JavaScript 对象。这是最详细的视图。
“类型”视图按对象的构造函数编组对象，并提供每个类型的计数。该视图使你更容易了解拥有多少数组、多少字符串等。可以展开这些组以查看单独对象。
“根”视图显示主要的根对象，你可以展开这些对象以查看与其关联的子对象。

在全部三种视图中，对象大小和保留大小都具有列标题。“大小”列记录了对象本身使用的内存量。“保留大小”列记录了对象及其子节点使用的内存量。例如，

HTMLDivElement

本身可能只消耗几十个字节，但它包含的保留大小可能以 MB 为单位，因为大图像或视频是其子元素之一。

在复杂的大页面中，仅加载前两千个对象，这些对象按照其保留大小排序。在此情况中，将提供筛选选项以帮助你缩减对象集。

其他选项

你可以使用快照详细信息右上角的下拉菜单更改用于详细信息显示的设置。

“显示内部对象”显示了浏览器为网页创建的内部对象，它们不是由页面自身创建的。默认情况下我们不显示这些对象，以便你的注意力集中在自己的代码上。但是，有时查看这些对象很有用。
“显示对象 ID”可帮助你标识具有多个引用的对象。例如，jQuery 查询通常使用 jQuery 和 $ 作为引用。这两种引用都以相同的内存使用量显示，但它们使用的是相同的内存和相同的对象 ID。使用对象 ID 可以从具有多个引用的对象中分隔出唯一对象。
显示循环引用

：在最简单的形式中，当一个对象引用可重新引用该对象的其他对象（即创建一个循环）时，会发生循环引用。在更复杂的形式中，循环引用路径可以通过许多对象。若要使查找对象的根更简单，不显示循环引用。如果你需要跟踪循环引用的路径，请使用此选项显示它们：
- 显示循环引用时，你会发现你自己不小心重复检查了同一对象。打开“显示对象 ID”可帮助避免此种混淆。

比较视图

在显示了内存使用或对象计数的更改的快照中，单击更改数量以查看该快照和它之前的快照之间的比较。

除了以下三个差异外，比较视图与快照详细信息视图的工作方式相同：

你可以基于更改了哪些元素及其更改方式排序“操作”列。
使用颜色标记各行以表示其更改：
- 蓝色：
  
  存在于两个快照中，但在这两个快照中发生了更改的对象。
- 绿色：
  
  已在快照之间添加的对象。
- 黑色：
  
  没有更改。
添加了两个新列以显示“大小”和“保留大小”中的差异。

模拟

试用模拟工具测试网页与其他不同文档模式、用户代理、屏幕大小和分辨率以及 GPS 位置坐标兼容的方式。

及早测试并经常测试

设计和开发现代 Web 意味着构建可在广泛设备和平台上工作的网页。通过使用 F12 开发人员工具中的模拟工具，可以模拟可在其中查看网页的不同环境。此操作使在开发循环中及早捕获和调试问题更加容易。

该工具分为三个部分，即模式、显示和地理位置：

模式

：测试文档模式、对比桌面和 Windows Phone 浏览器配置文件，然后使用用户代理字符串模拟调试由浏览器窃听导致的错误。
显示

：模拟不同的屏幕大小和分辨率以查看网页的呈现方式。
地理位置

：模拟 GPS 接收器并输入 GPS 坐标以在网页中测试位置感知功能。

模式

文档模式

Internet Explorer 11 中的 F12 工具已将早期版本中的浏览器和文档模式的复杂矩阵简化为单个选项：文档模式。

可以使用以下六个选项：

前沿（默认）

表示 IE11 支持的所有最新标准和功能。其他五个选项表示 Internet Explorer 版本 5（a.k.a.“Quirks”）7、8、9 和 10。选择某个版本（IE11 除外）时，IE11 将呈现网页，就像你在使用该版本浏览器一样。它甚至可以更改浏览器发送的默认用户代理字符串。你可以使用“模式”部分中的“用户代理字符串”菜单手动设置不同的字符串。

值得注意的是，“文档模式”是较旧浏览器的模拟。它非常有用，但是如果你需要精确像素布局或者要确保你的页面在较旧版本的 IE 中以特定方式显示和工作，建议转至

Modern.ie

并下载具有较旧版本 IE 的虚拟计算机。虚拟计算机与适用于 Windows、Mac 和 Linux 的虚拟环境兼容，因此你可以获取用于在较旧版本的 IE 和 Windows 中进行测试和调试的最精确和最值得信赖的平台。

浏览器配置文件

如果你要查看你的网页在 Windows Phone 8 设备上的执行方式，浏览器配置文件可帮助你更改各种设置以快速轻松地模拟 Windows Phone 8 设备，然后非常轻松地更改回默认桌面配置文件。

用户代理字符串

更改你的用户代理字符串是调试错误（仅在 IE 中出现，而不在其他浏览器中出现）良好的第一步。基本方式是使 IE 将其自身识别为其他版本，甚至是其他浏览器。

有时，前端和/或后端脚本会尝试检测你正在使用哪种浏览器。即使你未在自己的代码中使用任何浏览器检测，你也可能使用了可检测的第三方 JavaScript 库或服务器端脚本。

浏览器检测问题是它经常用于缩小比例或根据编写脚本的开发人员认为浏览器可以执行的操作（而不是

使用功能检测

检测浏览器实际可以执行的操作）来更改网页中的功能。此操作会导致意外行为，因为针对 Microsoft Internet Explorer 6 的代码在 IE11 中的运行方式不同，或者浏览器完全支持的功能因开发人员提出的假设而被禁用。

如果更改你的用户代理字符串可以清除问题，则浏览器检测可能是导致此问题的原因。

显示

显示模拟可帮助开发人员使用不同的屏幕大小和不同分辨率预览网页。它有助于识别网页从传统的桌面显示器过渡到较小的移动屏幕或较新的高分辨率显示屏时出现的问题。

要点

模拟经过调整以试用和匹配模拟屏幕的物理尺寸。模拟像素可以显示已压缩或已扩展，如果你需要测试 HTML 元素的完美像素定位，则不建议模拟。但是，模拟对测试响应式设计和识别较大元素定位问题十分有用。

方向

可用标准选项如下：

纵向：屏幕高度大于宽度。这是适用于大多数移动设备屏幕的方向。
横向：屏幕宽度大于高度。这是适用于大多数笔记本电脑屏幕和桌面显示器的方向。

分辨率

提供一系列物理尺寸和分辨率。如果以上内容都不能满足你的需要，则可以通过从菜单中选择“自定义”设置自定义大小和分辨率。

支持的自定义大小最多为 80 英寸和 3820 x 2160。

地理位置

许多移动设备使你可以确定用户的物理位置并传送针对该位置的信息或服务。

有三种选项可用于

模拟

GPS

。它们是“关”、“开”和“打开但无信号”，这些选项可用于测试不同的设备状态。设置为“开”时，你输入的“纬度” 和“经度”将被提供到网页中。

转载于:https://www.cnblogs.com/developersupport/p/IE_F12.html

企业IT管理员IE11升级指南 系列：

F12 开发者工具

简介

DOM资源管理器

进入 DOM

元素窗格

选择元素

编辑元素

移动元素

样式窗格

样式

编辑样式

跟踪

已计算

布局

事件

控制台

用于了解代码的窗口

将信息发送到“控制台”。

Internet Explorer 发送到控制台的消息

开发人员可以从代码发送到控制台的消息

自定义消息

可检查的对象和节点

计数器

计时器

断言

跟踪和分析

管理消息以增强可读性

将 JavaScript 发送到“控制台”。

调试程序

何时需要“调试程序”工具？

启动“调试程序”工具

“调试程序”工具布局

启动调试会话

控制会话流

设置代码格式以增强可读性

设置和管理断点

“断点”窗格

检查对象和变量

管理多个脚本

请勿调试和分析

网络

监视浏览器的通信

读取和解释数据

“摘要”视图

详细信息视图

限制

UI响应能力

比较仪表板和诊断

速度十分重要

性能会话报告

事件类别和定义

性能分析提示

探查器

分析脚本

查看分析报告

分析数据类型

搜索报告和报告排序

复制和保存报告

内存

内存问题

诊断内存问题

模拟

及早测试并经常测试

模式

显示

地理位置

你可能也喜欢

企业IT管理员IE11升级指南系列：