IE11 —— F12 开发者工具
F12 开发者工具 简介
使用 F12 开发人员工具，你可以调试、测试网页并加快其速度。无论你是需要微调你的 CSS 布局还是查找内存泄漏，你都能在此处找到帮助工具。
如果你正在 中查找“工具”菜单或工具栏，请尝试：
“ 中缺少菜单栏和工具栏。”
如果你通过单击错误消息转至此处，并仅希望在以后避免错误消息，请尝试：
关于 脚本错误应采取什么措施？
问题：我无法在 的选项下关闭自动脚本调试程序。
正在工作的F12工具
在 IE11 中，我们重头开始重建 F12 工具。它们具有全新的 UI 和新功能性，可使你更快、更轻松地进行开发和调试。
在键盘上按“F12”键以打开工具。如果你的键盘没有功能键，则可以使用“工具”菜单。
有八个不同工具，每个工具在 F12 工具界面中都带有其自己的选项卡。你将在此处找到每个工具的图像、工具的作用和新增功能小结，以及该工具简化的几个典型开发或调试任务。
DOM资源管理器工具(CTRL + 1)
DOM 资源管理器工具显示了在浏览器中渲染网页时网页的结构，并使在活动页中编辑 HTML 和样式的操作成为可能。不必编辑或重新加载源，即可执行此操作，以便你可以快速解决显示问题或试用新思路。
以下新功能包含在DOM 资源管理器工具中：
编辑 HTML 属性和 CSS 属性时，会提供 自动完成建议。
拖动 DOM 节点以将其重新排列。
它简化的开发和调试任务：
确定不以正确位置或正确大小显示元素的原因。
指出哪些 CSS 演示和媒体查询被应用于元素。
测试元素的一系列不同颜色，以查看哪种颜色最佳。
了解有关 DOM 资源管理器工具的详细信息。
“控制台”工具(CTRL + 2)
“控制台”工具提供了与运行代码交互、使用控制台的命令行发送信息和使用控制台调试 API获取信息的方式。“控制台”工具对开发人员而言非常有用，我们已使其更易于获得。现在你可以使用 UI 右上角“帮助”按钮旁边的“控制台”按钮或按 CTRL + `在任何其他工具的底部打开它。
以下新功能包含在“控制台”工具中：
使用“控制台”按钮或 CTRL + ` 在任何其他工具的底部打开控制台。
用于计时、计数、编组等的新控制台调试 API方法。
命令行上的 自动完成建议可加快输入速度、减少拼写错误并帮助你发现 API 的各个方面。
它简化的开发和调试任务：
查看系统错误消息、异常警告和调试输出。
使用新的计时方法将计时代码执行下拉至该语句。
在不重新加载的情况下，更改运行代码中的变量值。
了解有关“控制台”工具的详细信息。
“调试程序”工具(CTRL + 3)
你可以使用“调试程序”工具检查代码的作用、代码执行时间及其执行方式。在执行过程中暂停代码，逐行操作代码，然后查看每个步骤中变量和对象的状态。
以下新功能包含在“调试程序”工具中：
无刷新调试。设置断点，无需在运行时重新加载和丢失状态。
用于更轻松管理多个脚本的选项卡式文档界面。
突出显示断点和搜索匹配的滚动条。
它简化的开发和调试任务：
使用调用栈查看导致函数调用的原因。
使压缩或精简的代码更易于读取。
监视 Web 创建和执行。
了解有关“调试程序”工具的详细信息。
“网络”工具(CTRL + 4)
“网络”工具向你提供了涉及加载和网页操作的任何网络请求的详细信息。
以下新功能包含在“网络”工具中：
改进的请求计时信息。
改进的压缩信息捕获。
它简化的开发和调试任务：
查看页面跨资源消耗的带宽量。
通过查看请求和响应标头及正文调试 AJAX 请求。
标识减慢网页加载速度的网络请求。
了解有关“网络”工具的详细信息。
“UI响应能力”工具(CTRL + 5)
“UI 响应能力”工具可帮助你在页面速度减慢时了解出了什么问题。使用它分析速度缓慢的特定点可显示导致这些问题的操作。
UI 响应能力工具在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
标识导致 UI 缓慢的 CPU 活动的不同源。
洞察网页的帧率。
在时间线上设置标签以隔离用户方案。
它简化的开发和调试任务：
测试代码优化。
加快你的网页速度。
了解有关“UI 响应能力”工具的详细信息。
“探查器”工具(CTRL + 6)
“探查器”工具是 速度的单纯计量工具，向你显示了在分析会话过程中调用的函数、调用次数以及完成所需的时间。
以下新功能包含在“探查器”工具中：
跟踪在 Web 中执行了哪些函数。
更干净、更快的响应 UI。
它简化的开发和调试任务：
隔离代码中最慢的部分。
测试代码优化。
加快你的网页速度
了解有关“探查器”工具的详细信息。
“内存”工具(CTRL + 7)
如果某个网页开始很快，但使用一会后就变慢，主要原因通常是内存泄漏。“内存”工具跟踪网页的内存使用情况，帮助你标识何处的内存使用处于增长趋势、增长原因以及如何修复它。
“内存”工具在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
使用时间线可以查看内存使用的进度更改。
使用快照可以在特定点检查内存使用的详细信息。
使用快照比较可以标识特定增长点。
它简化的开发和调试任务：
标识断开的 DOM 节点。
标识内存增长点。
计量对象的内存使用情况。
了解有关“内存”工具的详细信息。
“模拟”工具(CTRL + 8)
“模拟”工具可帮助你测试你的网页在不同屏幕大小和硬件功能上的运行方式，以及它们如何响应不同的用户代理字符串。
“模拟”工具在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
你可以模拟不同的屏幕大小和分辨率。
GPS 模拟。
它简化的开发和调试任务：
在多个屏幕类型上测试响应设计。
对移动站点测试位置感知功能。
了解有关“模拟”工具的详细信息。
DOM资源管理器
使用“DOM 资源管理器”工具查看网页的 DOM（文档对象模型）状态、检查 HTML 结构和 CSS 样式，并测试更改以解决显示问题。
进入 DOM
HTML 和 CSS 文件是浏览器用于构建 DOM（文档对象模型）的蓝图，它将使用该蓝图呈现网页。“DOM 资源管理器”工具将向你显示网页的集成结构，并允许你无需编辑页面的源文件，即可更改样式、移动 HTML 元素，以及更改元素属性。
这可以在元素位置错误或行为异常时帮助你诊断问题，然后解决问题。
元素窗格
选择元素
编辑元素
移动元素
样式窗格
样式
跟踪
已计算
布局
事件
元素窗格
左侧的元素窗格实时显示当前创建的 DOM。使用你的鼠标浏览它，单击父元素旁的箭头将其展开，并查看其子元素。你也可以使用键盘上的箭头键浏览它，使用向左键和向右键以展开和折叠元素。
选择元素
可以使用四种方法选择要检查的元素：
检查完元素后，它将突出显示。
突出显示不仅显示元素边界，还显示其填充的边界、边框和边距。可以使用“DOM 资源管理器”工具标题右侧的第二个按钮切换启用或禁用状态。
编辑元素
可以使用三种方法编辑元素：
当你编辑类属性时，将提供来自样式的匹配类的建议列表。双击建议或使用箭头键导航到建议，然后按Tab或Enter选择它。
要点不能在“DOM 资源管理器”中以 HTML 的形式编辑、html、head、body和元素。
如果你的更改没有产生需要的结果，请按 CTRL + Z 撤销上一处更改。
移动元素
你可以采用两种方法移动元素：
当复制某个元素并使用 CTRL + V 进行粘贴时，剪切板上的元素将作为选中元素的子元素粘贴。右键单击该元素以使用上下文菜单中的“粘贴之前的内容”选项。
注意请勿使用上下文菜单中的“复制带有样式的元素”选项来移动 DOM 中的元素。它将包含该元素的 HTML 文档及其所有相关样式放置在剪切板上，以便粘贴到外部编辑器。
样式窗格
“样式窗格”提供不同视图，用于查看向元素应用了哪些样式，以及元素关联事件触发了哪个代码。该窗格有五个选项卡。
样式
“样式”选项卡是应用到元素的所有样式以及应用的样式属性的列表。它将直接面向元素的样式与继承样式分开，并识别继承样式来自哪些上级元素。它还可以根据CSS 媒体查询查找应用了哪些元素。
它可以实时更新，因此如果你执行了基于窗口宽度的媒体查询，调整窗口大小将改变应用的样式列表，这是因为匹配了不同的媒体查询。
编辑样式
你可以通过选中或取消选中属性左侧的框来启用或禁用样式属性。
若要编辑规则名称或属性，请单击它。 自动完成建议是 IE11 中的新功能。键入属性名称时，将建议匹配的 CSS 属性名称。键入属性值时，如果该属性具有一组已定义的可能的值，将建议匹配的值。双击建议或使用箭头键导航到建议，然后按Tab或Enter以选择它。
要添加新规则或将属性添加到现有规则，请在选项卡中右键单击，然后单击“添加规则”或“添加属性”。
跟踪
“跟踪”选项卡可以跟踪元素样式的源。
该图像显示了元素的颜色以及已覆盖的父元素的颜色属性链。如果元素上的特定属性与预期不同，可以使用跟踪以查找该属性的来源和它覆盖的元素。
在“跟踪”选项卡中，不能编辑属性，但可以使用属性旁的复选框切换其启用或禁用状态。关闭当前活动属性将激活链中的下一个属性。
已计算
“已计算”样式选项卡与“跟踪”选项卡非常相似，但具有以下两处明显的差异：
打开该按钮时，它仅显示用户定义的样式。关闭时，它显示 的默认样式和任何应用到元素的隐式样式。该列表可能很长，因此它旁边有“筛选属性”框。在该框中键入文本，将筛选属性列表，仅显示匹配文本的属性。
布局
“布局”选项卡显示用于选定元素定位的框模型图表，它采用的颜色与选定元素突出显示的颜色相同。你可以通过单击图表中的任意值以进行编辑。
事件
“事件”选项卡显示元素的 DOM 事件或 CSS 选择器，这些选择器具有采用 方式分配给它们的处理程序。可以单击文件名以在调试程序中显示文件
在上图中，一个元素的单击事件由两个脚本中的两个函数进行处理。如果单击该元素时发生异常行为，可能是因为一个处理程序在侦听另一个元素的事件。
控制台
使用“控制台”工具查看错误和其他信息、发送调试输出、检查 对象和 XML 节点，以及在所选窗口或框架的上下文中运行 。
用于了解代码的窗口
“控制台”工具的主要用途是与运行的网页进行向内和向外的通信：
将信息发送到“控制台”。 发送到控制台的消息
只有启动“控制台”，它才会显示消息。通过打开 F12 开发人员工具并选择“控制台”工具 (CTRL + 2) 来启动它。你还可以使用工具面板右上方的“显示控制台”按钮或按 CTRL + `，以使用另一个工具打开“控制台”。
从该图像中，你可以看到 系统消息具有三个分类。它们是（按顺序排列）：
可以从控制台输出中筛选出这些消息。“控制台”窗格顶部的用于每种消息类型的图标可以用于切换。单击一个图标以删除其关联的消息类型，再次单击以将其返回。还可以在控制台输出中右键单击，并在上下文菜单中查找用于每种类型的复选框。
单击消息后跟的文件名时，将打开“调试程序”工具，并在“脚本”窗格中加载文件。
开发人员可以从代码发送到控制台的消息
控制台调试 API向你提供用于从你的代码将信息发送到控制台的方法。信息细分为以下类型：
自定义消息
你有四个用于自定义消息的选项。三个选项使用系统消息的格式：()用于信息消息、.warn()用于警告、.error()用于错误。第四个选项 (.log()) 显示不带警报图标的纯文本。这四个选项都为消息采用相同的参数形式。
.log( 'This is some text' );
This is some text
var = 'This is some text' ;
.log();
This is some text
var = '' ;
var myval = 0;
.log( "The of " + + "is " + myval);
The number of pieces is 0
var = '' ;
var myval = 5;
.log( "The of %s is %d" , , myval);
The number of pieces is 5
变量替换具有五种变量类型：
变量类型控制变量的呈现方式。例如，由整数变量类型表示的浮点数值显示为一个整数。
可检查的对象和节点
可检查的对象是 11 中的新增功能。它们采用折叠的树格式显示在控制台中，并具有可展开的节点。
要显示可检查的 对象，请使用.dir()将其发送到控制台
要显示可检查的 DOM 节点，请使用.()将其发送到控制台
HTML
10
11
12
13
14
Click the to show this div as a and a
DOM node.
show it
.('').('click', (){
var divid = .('');
.log(' the div as a DOM node.');
.(divid);
.log(' the div as a .');
.dir(divid);
});
使用左侧箭头展开对象和节点。
右键单击 DOM 节点可以提供上下文菜单中的“评估为对象”选项。如果选择该选项，会将节点作为对象发送到控制台。同样，表示 DOM 节点的 对象在上下文菜单中提供“评估为 HTML”选项。
计数器
虽然在代码中设置计数器相对简单，但它仍是一项重复的任务。为了加速开发人员工作流，控制台调试 API提供简单的速记。
使用.count()，其字符串包含作为参数的计数器标签。首次与特定标签一起使用时，将在控制台输出中建立一个计数器。之后使用带有相同标签的.count()时，计数器的计数将增加。要将计数器重置为零，请使用带有标签的.()。
.count( '' );
for ( var i = 0; i < 10; i++){
.count( '' );
mylabel: 11
计时器
类似于创建计数器，在代码中创建计时器相对简单，但控制台调试 API提供可使其进一步简化的简单速记。
在代码的任意位置使用.time()以启动计时器，并使用.()以结束计时器并将结果发送到控制台。如果要为你的计时器添加标签或需要多个计时器，请为.time()和.()方法传递具有作为参数的唯一标签的字符串。如果不传递参数，这些方法将使用“”作为标签。
断言
断言是另一种用于加速开发人员工作流的速记。如果与.()一起使用的第一个参数评估为false，它将运行.error()，并将断言的额外参数用于错误消息。
使用以下代码行：
console.assert(f < 25, 'f is not less than %d, but is instead %o', 25, f);
它等效于写入
if (!(f < 25)){
.error( 'f is not less than %d, but is %o' , 25, f)
。在示例代码中，我们使用了%o输出变量。由于上述评估在变量值不为数字时将失败，所以使用%o使你可以查看变量本身，而非使其采用特定类型。
跟踪和分析
了解从何处调用你的代码、正在运行哪个代码，以及执行任务需要多长时间，这些信息对于分析速度缓慢或异常行为非常有用。
堆栈跟踪通过向上追溯路径的跟踪请求向你显示到达当前代码的执行路径。在代码中使用.trace()以显示堆栈跟踪。
该代码...
10
11
12
13
14
15
a(){
c();
b(){
c();
c(){
.trace()
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)
在其他实例中，查看两点间运行的代码的每个部分将十分有用。探查器是用于该目的的最佳工具，但在一些情况下可能需要比手动停止和开始更高的精确度。
要从代码中精确地开始和停止探查器，请使用.()开始记录探查器会话，并使用.()停止记录。
将字符串作为方法的参数传递到.()，以将其用作分析报告的名称。
小心覆盖分析会话可能会创建异常报告。在首次测试运行时使用.trace()替代.()，以确保不会在结束分析会话前多次调用.()。如果发现获取的跟踪比预计的多，这可能是你的问题。
管理消息以增强可读性
对消息进行编组。
由于要处理发送到控制台的所有类型的消息和内容，跟踪它们可能十分困难。使用以下命令以保持井然有序：
可以在另一个组中嵌套组，以便获得更详细的编组级别。
要启用或禁用不同类型的消息，请使用筛选。
在“控制台”工具的顶部，存在用于错误、警告和信息消息的图标，旁边带有每种类型的数量。单击某个图标以切换该类消息显示的启用或禁用状态。切换为禁用时，将隐藏该类消息（但没有删除），可以通过将该类消息重新切换为启用来还原它们。
在控制台输出中右键单击显示具有复选框的上下文菜单，这些复选框可以切换三种主要消息类型以及使用.log()发送的消息。
将 发送到“控制台”。
控制台不仅从代码显示输出，还提供用于执行代码的界面。仅需在“控制台”底部的命令行窗格中输入任何有效 。
在命令行中输入的所有脚本将在当前选定窗口的全局范围内执行。如果使用或构建了你的网页，这些框架会将其自己的文档加载到自己的窗口中。
要面向 框架或 的窗口，请使用cd()命令，并将框架/ 的名称或 ID 属性用作参数。例如，你具有称为 的框架，并且要向其加载 主页。
cd();
:
要点请注意，框架名称旁没有引号。仅将未带引号的名称或 ID 值传递为参数。
要返回顶层窗口，请使用不带参数的cd()。
在“控制台”中选择元素
控制台选择器是 IE11 中的新增功能。它们提供简单的速记，可以在 DOM 结构中快速选择元素。这些选择器是：
要点如果网页中的代码将函数分配到$或$$，当控制台与该页面或其框架交互时，该函数将覆盖控制台选择器函数。
The line
虽然使用单行命令发送非常有用，但某些任务需要执行较长的脚本。单击向上双箭头符号以展开命令行。在多行模式中，根据需要输入多行，然后单击绿色箭头符号以在控制台中执行它。
调试程序
使用“调试程序”工具在代码运行时对其导航、设置监视点和断点、查看调用堆栈，以及提高编译/精简 的可读性。
何时需要“调试程序”工具？
“调试程序”工具可帮助你了解为何你的代码片段出现以下情况：
“调试程序”工具可以暂停执行中的代码，这使你可以备份和重复代码块，并使你可以从不同角度检查代码以查看以下方面：
启动“调试程序”工具
在 中加载出现问题的网页，并按F12键或从“工具”菜单选择“F12 开发人员工具”选项以打开 F12 开发人员工具。单击“调试程序”工具图标或按 CTRL + 3 以打开该工具。
“调试程序”工具布局
“调试程序”工具的默认布局显示三个窗格，可以调整其宽度和/或高度。
“控制台”图标（位于 F12 工具顶部的“帮助”图标旁）或 CTRL + ` 均可以在“脚本”窗格下的第四个窗格中打开“控制台”工具。当你要查看“控制台”输出时，可以打开它或使用“控制台”命令行。
启动调试会话
可以使用两种方法启动调试会话。
“调试程序”工具是 IE11 中的新工具，它无需页面刷新和保存状态，即可进行调试，并且 F12 工具可以保持附加在浏览器窗口上。
控制会话流
如果“调试程序”工具到达断点，且你已准备好从该点继续执行操作，你可以使用执行控制图标来决定接下来要进行的操作。
按照从左到右的顺序，这些图标分别为：
默认情况下，它将忽略异常，仅将其记录到“控制台”工具。你可以选择在出现所有异常时断开，或仅在出现未由代码中try... catch异常处理程序处理过的异常时断开。
注意当你的网页中包含一个或多个大型 库时，请谨慎选择在出现未处理的异常时断开。你可能会发现自己在逐步执行许多不属于你的精简代码。
此外，在语句上断开后，你可以右键单击“脚本”窗格以显示三个额外的控件：
设置代码格式以增强可读性
“异常控制”右侧的最后两个图标可以使较大代码块更易在“脚本”窗格中读取。
_ge(n){ _d.(n)} sj_wf(n)
{ var t=; (){n.apply( null ,[].slice.apply(t).slice(1))}}
sj_ce(n,t,i){ var r=_d.(n); t&&(r.id=t),i&&(r.=i),r}
将变为
10
11
12
13
_ge(n) {
_d.(n);
sj_wf(n) {
var t = ;
() {
n.apply( null , [].slice.apply(t).slice(1));
};
sj_ce(n, t, i) {
var r = _d.(n);
t && (r.id = t) , i && (r. = i) , r;
设置和管理断点
不同类型的点使你可以在“调试程序”工具到达这些点时指示它执行不同操作。
在具有多个语句的行上，可以设置单个语句的断点。在语句上右键单击，然后从上下文菜单中设置断点，或者将光标放置在语句内，并单击 F9。
请右键单击断点或语句，然后从上下文菜单中单击“条件”，或者按 ALT + F9。在条件对话框中，输入 > 20，然后提交条件。你的断点将显示 + 符号，仅当 > 20评估为 true 时，你的代码才在该点断开。
要设置跟踪点，请右键单击语句，然后从上下文菜单中单击“插入跟踪点”。在对话框中，采用用于.log()命令的参数的同一格式输入消息。它可以访问的本地和全局变量与单击的语句相同。
“断点”窗格
除了在“脚本”窗格的语句旁显示，完整的断点集将显示在“断点”窗格中。
你可以在“断点”窗格中管理多个点。右键单击其中的任意位置以获取上下文菜单选项，以删除所有点或切换其启用或禁用状态。这些选项还作为图标显示在窗格的右上角以及单个断点的左侧和右侧。右键单击任何单个点将显示上下文菜单中的“条件”或“跟踪消息”选项，以便你可以更改消息或使断点成为条件断点。
该面板可以跟踪多个不同脚本中的多个断点，这些脚本可能用于你的页面。单击任何断点相关联文件名将使该活动文件在“脚本”窗格中打开并滚动到相应行。
检查对象和变量
设置你的断点并单步执行代码后，“调试程序”工具向你提供几种方式以查看情况。
单击覆盖底部的“添加监视点”，以向 “监视点”窗格添加变量或对象。
管理多个脚本
IE11“调试程序”工具中的“脚本”窗格提供选项卡式界面，你可以在其中通过单击其选项卡选择打开的文件，并使用 CTRL + TAB 快速浏览打开的选项卡。
可以通过单击文件夹图标打开文件，或按 CTRL + O 打开文件列表。在文件列表中，将在框架或窗口的主文档下采用节点为文档编组，文档在该框架或窗口中运行。在单个文件上方悬停以显示文件的完整 URI。
Web 显示为独立于创建它们的文档的节点。 显示为主文档的子节点。
文件列表顶部的“要筛选的类型”框可以按文件名筛选可用文件。要在所有可用文件中运行文本搜索，请使用 F12 工具右上方的“在文件中查找”(CTRL + F) 框。如果找到了你的文本，它将打开匹配搜索文本的第一个文件，并在“脚本”窗格的滚动条上标识该文件中的匹配项。按 F3 可以将你定位到下一处匹配。
