大家好，我是讯享网，很高兴认识大家。

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 发送到控制台的消息
• 开发人员可以从代码发送到控制台的消息
• 管理消息以增强可读性

Internet Explorer 发送到控制台的消息

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

 

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

• 信息：你可能希望了解的非重要信息。
• 警告：网页中可能存在错误，它不一定会打断网页，但可能导致异常行为。
• 错误：使代码无法运行的严重错误。有关详细信息，请参阅控制台中使用的      Internet Explorer 错误代码列表。

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

单击消息后跟的文件名时，将打开“调试程序”工具，并在“脚本”窗格中加载文件。

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

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

• 自定义消息
• 可检查的对象和节点
• 计数器
• 计时器
• 断言
• 跟踪和分析

自定义消息

你有四个用于自定义消息的选项。三个选项使用系统消息的格式：console.info() 用于信息消息、console.warn() 用于警告、console.error() 用于错误。第四个选项 (console.log()) 显示不带警报图标的纯文本。这四个选项都为消息采用相同的参数形式。

• 仅文本：

JavaScript

1