IE11-F12 开发人员工具使用手册
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
DOM 资源管理器工具 (CTRL + 1)
DOM 资源管理器工具 显示了在浏览器中渲染网页时网页的结构，并使在活动页中编辑 HTML 和样式 的操作成为可能。不必编辑或重新加载源，即可执行此操作，以便你可以快速解决显示问题或试用新 思路。
以下新功能 包含在 DOM 资源管理器工具 中： • 编辑 HTML 属性和 CSS 属性时，会提供 IntelliSense 自动完成建议。 • 拖动 DOM 节点以将其重新排列。
已计算
“已计算”样式选项卡与“跟踪”选项卡非常相似，但具有以下两处明显的差异： • 精确计算：所有没有硬编码度量值的属性（例如 calc() 表达式、百分比或 em 单位）都在显 示时带有为其计算的像素值。 • 隐式默认值：“已计算”样式选项卡具有“显示所有样式”按钮 。
打开该按钮时，它仅显示用户定义的样式。关闭时，它显示 Internet Explorer 的默认样式 和任何应用到元素的隐式样式。该列表可能很长，因此它旁边有“筛选属性”框。在该框中键 入文本，将筛选属性列表，仅显示匹配文本的属性。
• 使用调用栈查看导致函数调用的原因。 • 使压缩或精简的代码更易于读取。 • 监视 Web Worker 创建和执行。 了解有关“调试程序”工具的详细信息 。
“网络”工具 (CTRL + 4)
“网络”工具 向你提供了涉及加载和网页操作的任何网络请求的详细信息。 以下新功能 包含在 “网络”工具 中：
它简化的开发和调试任务：
• 在多个屏幕类型上测试响应设计。 • 对移动站点测试位置感知功能。
了解有关“模拟”工具的详细信息 。
诊断和解决布局问题
使用“DOM 资源管理器”工具查看网页的 DOM（文档对象模型）状态、检查 HTML 结构和 CSS 样式， 并测试更改以解决显示问题。
进入 DOM
HTML 和 CSS 文件是浏览器用于构建 DOM（文档对象模型）的蓝图，它将使用该蓝图呈现网页。“DOM 资源管理器”工具将向你显示网页的集成结构，并允许你无需编辑页面的源文件，即可更改样式、移 动 HTML 元素，以及更改元素属性。
以下新功能 包含在 “探查器”工具 中：
• 跟踪在 Web Worker 中执行了哪些函数。 • 更干净、更快的响应 UI。
它简化的开发和调试任务：
• 隔离代码中最慢的部分。 • 测试代码优化。 • 加快你的网页速度
了解有关“探查器”工具的详细信息 。
“内存”工具 (CTRL + 7)
如果某个网页开始很快，但使用一会后就变慢，主要原因通常是内存泄漏。“内存”工具 跟踪网页 的内存使用情况，帮助你标识何处的内存使用处于增长趋势、增长原因以及如何修复它。
跟踪
在 2014 年春季的 Windows 8.1 更新中，“跟踪”选项卡的信息已合并到“已计算”选项卡中。 “跟踪”选项卡可以跟踪元素样式的源。
该图像显示了元素的颜色以及已覆盖的父元素的颜色属性链。如果元素上的特定属性与预期不同，可 以使用跟踪以查找该属性的来源和它覆盖的元素。 在“跟踪”选项卡中，不能编辑属性，但可以使用属性旁的复选框切换其启用或禁用状态。关闭当前 活动属性将激活链中的下一个属性。
• 标识导致 UI 缓慢的 CPU 活动的不同源。 • 洞察网页的帧率。 • 在时间线上设置标签以隔离用户方案。 它简化的开发和调试任务： • 测试代码优化。 • 加快你的网页速度。 了解有关“UI 响应能力”工具的详细信息 。
“探查器”工具 (CTRL + 6)
“探查器”工具 是 JavaScript 速度的单纯计量工具，向你显示了在分析会话过程中调用的函数、 调用次数以及完成所需的时间。
它简化的开发和调试任务： • 确定不以正确位置或正确大小显示元素的原因。 • 指出哪些 CSS 演示和媒体查询被应用于元素。 • 测试元素的一系列不同颜色，以查看哪种颜色最佳。
了解有关 DOM 资源管理器工具的详细信息 。
“控制台”工具 (CTRL + 2)
“控制台”工具 提供了与运行代码交互、使用控制台的命令行发送信息和使用 控制台调试 API 获取 信息的方式。“控制台”工具对开发人员而言非常有用，我们已使其更易于获得。现在你可以使用 UI 右上角“帮助”按钮旁边的“控制台”按钮或按 CTRL + `在任何其他工具的底部打开它。 以下新功能 包含在 “控制台”工具 中：
• 改进的请求计时信息。 • 改进的压缩信息捕获。 它简化的开发和调试任务： • 查看页面跨资源消耗的带宽量。 • 通过查看请求和响应标头及正文调试 AJAX 请求。 • 标识减慢网页加载速度的网络请求。 了解有关“网络”工具的详细信息 。
“UI 响应能力”工具 (CTRL + 5)
“UI 响应能力”工具 可帮助你在页面速度减慢时了解出了什么问题。使用它分析速度缓慢的特定点 可显示导致这些问题的操作。 UI 响应能力工具 在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
了解有关“内存”工具的详细信息 。
“模拟”工具 (CTRL + 8)
“模拟”工具 可帮助你测试你的网页在不同屏幕大小和硬件功能上的运行方式，以及它们如何响应 不同的用户代理字符串。
“模拟”工具 在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
• 你可以模拟不同的屏幕大小和分辨率。 • GPS 模拟。
编辑样式
你可以通过选中或取消选中属性左侧的框来启用或禁用样式属性。 若要编辑规则名称或属性，请单击它。IntelliSense 自动完成建议是 IE11 中的新功能。键入属性 名称时，将建议匹配的 CSS 属性名称。键入属性值时，如果该属性具有一组已定义的可能的值，将 建议匹配的值。双击建议或使用箭头键导航到建议，然后按 Tab 或 Enter 以选择它。 要添加新规则或将属性添加到现有规则，请在选项卡中右键单击，然后单击“添加规则”或“添加属 性”。
要点 不能在“DOM 资源管理器”中以 HTML 的形式编辑 doctype、html、head、body 和 script 元素。
如果你的更改没有产生需要的结果，请按 CTRL + Z 撤销上一处更改。CTRL + Y 将恢复更改（与 CTRL + Z 的效果相反）。
移动元素
你可以采用两种方法移动元素：
使用 F12 开发人员工具
使用 F12 开发人员工具，你可以调试、测试网页并加快其速度。无论你是需要微调你的 CSS 布局还 是查找内存泄漏，你都能在此处找到帮助工具。
正在工作的 F12 工具
在 IE11 中，我们重头开始重建 F12 工具。它们具有全新的 UI 和新功能性，可使你更快、更轻松 地进行开发和调试。 在键盘上按“F12”键以打开工具。如果你的键盘没有功能键，则可以使用 “工具”菜单。 有八个不同工具，每个工具在 F12 工具界面中都带有其自己的选项卡。你将在此处找到每个工具的 图像、工具的作用和新增功能小结，以及该工具简化的几个典型开发或调试任务。
• 拖动 DOM 节点：在 Internet Explorer 11 中，你可以拖动元素窗格中的元素。单击元素并 将其拖动到新位置，操作方法与其他任何类型的可移动项目相同。
• 剪切/复制和粘贴：使用右键单击上下文菜单或键盘快捷方式来剪切、复制和粘贴元素。
当复制某个元素并使用 CTRL + V 进行粘贴时，剪切板上的元素将作为选中元素的子元素粘 贴。右键单击该元素以使用上下文菜单中的“粘贴之前的内容”选项。
这可以在元素位置错误或行为异常时帮助你诊断问题，然后解决问题。
元素窗格 选择元素 编辑元素 移动元素 样式窗格 样式 跟踪（已在 Windows 已计算 布局 事件 更改（已在 Windows
8.1 更新中删除） 8.1 更新中添加）
元素窗格
左侧的元素窗格实时显示当前创建的 DOM。使用你的鼠标浏览它，单击父元素旁的箭头将其展开，并 查看其子元素。你也可以使用键盘上的箭头键浏览它，使用向左键和向右键以展开和折叠元素。
例如，如果你想要体验 CSS 的悬停效果，打开伪类并选中 Hover 复选框可使该元素像鼠标悬停在其 上方一样显示，直到复选框被清除或页面重新加载。当你在“DOM Explorer”中微调悬停效果时，这 可以帮助你节省时间。 “样式”窗格有五个选项卡。
样式
“样式”选项卡是应用到元素的所有样式以及应用的样式属性的列表。它将直接面向元素的样式与继 承样式分开，并识别继承样式来自哪些上级元素。它还可以根据 CSS 媒体查询 查找应用了哪些元素。 它可以实时更新，因此如果你执行了基于窗口宽度的媒体查询，调整窗口大小将改变应用的样式列 表，这是因为匹配了不同的媒体查询。
当你编辑类属性时，将提供来自样式的匹配类的建议列表。双击建议或使用箭头键导航到建 议，然后按 Tab 或 Enter 选择它。
• 添加属性：右键单击元素，并单击“添加属性”。 • 作为 HTML 编辑：右键单击元素，并单击“作为 HTML 编辑”。该元素及其子元素将在边界框
内显示为纯文本。按照你在文本编辑器中的方式编辑文本，然后单击框外任意位置提交更改。
迹磁贴选择它代表的元素。
检查完元素后，它将突出显示。
突出显示不仅显示元素边界，还显示其填充的边界、边框和边距。可以使用“DOM 资源管理器”工具 标题右侧的第二个按钮切换启用或禁用状态。
编辑元素
可以使用三种方法编辑元素：
• 编辑属性：可以通过双击或选择属性，按 Enter，然后通过选项卡浏览属性以进行编辑。
• 使用“控制台”按钮或 CTRL + ` 在任何其他工具的底部打开控制台。 • 用于计时、计数、编组等的新 控制台调试 API 方法。
• 命令行上的 IntelliSense 自动完成建议可加快输入速度、减少拼写错误并帮助你发现 JavaScript API 的各个方面。
它简化的开发和调试任务： • 查看系统错误消息、异常警告和调试输出。 • 使用新的计时方法将计时代码执行下拉至该语句。 • 在不重新加载的情况下，更改运行代码中的变量值。
了解有关“控制台”工具的详细信息 。
“调试程序”工具 (CTRL + 3)
你可以使用 “调试程序”工具 检查代码的作用、代码执行时间及其执行方式。在执行过程中暂停代 码，逐行操作代码，然后查看每个步骤中变量和对象的状态。 以下新功能 包含在 “调试程序”工具 中：
• 无刷新调试。设置断点，无需在运行时重新加载和丢失状态。 • 用于更轻松管理多个脚本的选项卡式文档界面。 • 突出显示断点和搜索匹配的滚动条。 它简化的开发和调试任务：
注意 请勿使用上下文菜单中的“复制带有样式的元素”选项来移动 DOM 中的元素。它将 包含该元素的 HTML 文档及其所有相关样式放置在剪切板上，以便粘贴到外部编辑器。
样式窗格
“样式窗格”提供不同视图，用于查看向元素应用了哪些样式，以及元素关联事件触发了哪个代码。
Windows 8.1 更新中的一个新功能是伪类切换开关。它位于“样式”和“已计算”选项卡的右上角 中，是一个类似于“a:”的图标。启用后，将为常见的 Hover 和 Visited 伪类显示复选框。勾选其 中某个复选框可重新设置该元素的样式，就如同该伪类处于活动状态一样。
“内存”工具 在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
• 使用时间线可以查看内存使用的进度更改。 • 使用快照可以在特定点检查内存使用的详细信息。 • 使用快照比较可以标识特定增长点。
它简化的开发和调试任务：
• 标识断开的 DOM 节点。 • 标识内存增长点。 • 计量对象的内存使用情况。
布局
“布局”选项卡显示用于选定元素定位的框模型图表，它采用的颜色与选定元素突出显示的颜色相 同。你可以通过单击图表中的任意值以进行编辑。
选择元素
可以使用四种方法选择要检查的元素：
• 通过元素窗格：使用键盘或鼠标在“元素窗格”中浏览。 • 选择元素：单击“DOM 资源管理器”标题旁的按钮（或按 CTRL + B）以激活“选择元素”工
具。然后，单击网页中的任意位置，将选中你单击的元素。 • 检查元素：右键单击网页中的任意元素，并从上下文菜单中选择“检查元素”。 • 痕迹：选中一个元素后，“元素窗格ห้องสมุดไป่ตู้底部将显示其父元素（如果存在）的痕迹线索。单击痕
DOM 资源管理器工具 显示了在浏览器中渲染网页时网页的结构，并使在活动页中编辑 HTML 和样式 的操作成为可能。不必编辑或重新加载源，即可执行此操作，以便你可以快速解决显示问题或试用新 思路。
以下新功能 包含在 DOM 资源管理器工具 中： • 编辑 HTML 属性和 CSS 属性时，会提供 IntelliSense 自动完成建议。 • 拖动 DOM 节点以将其重新排列。
已计算
“已计算”样式选项卡与“跟踪”选项卡非常相似，但具有以下两处明显的差异： • 精确计算：所有没有硬编码度量值的属性（例如 calc() 表达式、百分比或 em 单位）都在显 示时带有为其计算的像素值。 • 隐式默认值：“已计算”样式选项卡具有“显示所有样式”按钮 。
打开该按钮时，它仅显示用户定义的样式。关闭时，它显示 Internet Explorer 的默认样式 和任何应用到元素的隐式样式。该列表可能很长，因此它旁边有“筛选属性”框。在该框中键 入文本，将筛选属性列表，仅显示匹配文本的属性。
• 使用调用栈查看导致函数调用的原因。 • 使压缩或精简的代码更易于读取。 • 监视 Web Worker 创建和执行。 了解有关“调试程序”工具的详细信息 。
“网络”工具 (CTRL + 4)
“网络”工具 向你提供了涉及加载和网页操作的任何网络请求的详细信息。 以下新功能 包含在 “网络”工具 中：
它简化的开发和调试任务：
• 在多个屏幕类型上测试响应设计。 • 对移动站点测试位置感知功能。
了解有关“模拟”工具的详细信息 。
诊断和解决布局问题
使用“DOM 资源管理器”工具查看网页的 DOM（文档对象模型）状态、检查 HTML 结构和 CSS 样式， 并测试更改以解决显示问题。
进入 DOM
HTML 和 CSS 文件是浏览器用于构建 DOM（文档对象模型）的蓝图，它将使用该蓝图呈现网页。“DOM 资源管理器”工具将向你显示网页的集成结构，并允许你无需编辑页面的源文件，即可更改样式、移 动 HTML 元素，以及更改元素属性。
以下新功能 包含在 “探查器”工具 中：
• 跟踪在 Web Worker 中执行了哪些函数。 • 更干净、更快的响应 UI。
它简化的开发和调试任务：
• 隔离代码中最慢的部分。 • 测试代码优化。 • 加快你的网页速度
了解有关“探查器”工具的详细信息 。
“内存”工具 (CTRL + 7)
如果某个网页开始很快，但使用一会后就变慢，主要原因通常是内存泄漏。“内存”工具 跟踪网页 的内存使用情况，帮助你标识何处的内存使用处于增长趋势、增长原因以及如何修复它。
跟踪
在 2014 年春季的 Windows 8.1 更新中，“跟踪”选项卡的信息已合并到“已计算”选项卡中。 “跟踪”选项卡可以跟踪元素样式的源。
该图像显示了元素的颜色以及已覆盖的父元素的颜色属性链。如果元素上的特定属性与预期不同，可 以使用跟踪以查找该属性的来源和它覆盖的元素。 在“跟踪”选项卡中，不能编辑属性，但可以使用属性旁的复选框切换其启用或禁用状态。关闭当前 活动属性将激活链中的下一个属性。
• 标识导致 UI 缓慢的 CPU 活动的不同源。 • 洞察网页的帧率。 • 在时间线上设置标签以隔离用户方案。 它简化的开发和调试任务： • 测试代码优化。 • 加快你的网页速度。 了解有关“UI 响应能力”工具的详细信息 。
“探查器”工具 (CTRL + 6)
“探查器”工具 是 JavaScript 速度的单纯计量工具，向你显示了在分析会话过程中调用的函数、 调用次数以及完成所需的时间。
它简化的开发和调试任务： • 确定不以正确位置或正确大小显示元素的原因。 • 指出哪些 CSS 演示和媒体查询被应用于元素。 • 测试元素的一系列不同颜色，以查看哪种颜色最佳。
了解有关 DOM 资源管理器工具的详细信息 。
“控制台”工具 (CTRL + 2)
“控制台”工具 提供了与运行代码交互、使用控制台的命令行发送信息和使用 控制台调试 API 获取 信息的方式。“控制台”工具对开发人员而言非常有用，我们已使其更易于获得。现在你可以使用 UI 右上角“帮助”按钮旁边的“控制台”按钮或按 CTRL + `在任何其他工具的底部打开它。 以下新功能 包含在 “控制台”工具 中：
• 改进的请求计时信息。 • 改进的压缩信息捕获。 它简化的开发和调试任务： • 查看页面跨资源消耗的带宽量。 • 通过查看请求和响应标头及正文调试 AJAX 请求。 • 标识减慢网页加载速度的网络请求。 了解有关“网络”工具的详细信息 。
“UI 响应能力”工具 (CTRL + 5)
“UI 响应能力”工具 可帮助你在页面速度减慢时了解出了什么问题。使用它分析速度缓慢的特定点 可显示导致这些问题的操作。 UI 响应能力工具 在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
了解有关“内存”工具的详细信息 。
“模拟”工具 (CTRL + 8)
“模拟”工具 可帮助你测试你的网页在不同屏幕大小和硬件功能上的运行方式，以及它们如何响应 不同的用户代理字符串。
“模拟”工具 在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
• 你可以模拟不同的屏幕大小和分辨率。 • GPS 模拟。
编辑样式
你可以通过选中或取消选中属性左侧的框来启用或禁用样式属性。 若要编辑规则名称或属性，请单击它。IntelliSense 自动完成建议是 IE11 中的新功能。键入属性 名称时，将建议匹配的 CSS 属性名称。键入属性值时，如果该属性具有一组已定义的可能的值，将 建议匹配的值。双击建议或使用箭头键导航到建议，然后按 Tab 或 Enter 以选择它。 要添加新规则或将属性添加到现有规则，请在选项卡中右键单击，然后单击“添加规则”或“添加属 性”。
要点 不能在“DOM 资源管理器”中以 HTML 的形式编辑 doctype、html、head、body 和 script 元素。
如果你的更改没有产生需要的结果，请按 CTRL + Z 撤销上一处更改。CTRL + Y 将恢复更改（与 CTRL + Z 的效果相反）。
移动元素
你可以采用两种方法移动元素：
使用 F12 开发人员工具
使用 F12 开发人员工具，你可以调试、测试网页并加快其速度。无论你是需要微调你的 CSS 布局还 是查找内存泄漏，你都能在此处找到帮助工具。
正在工作的 F12 工具
在 IE11 中，我们重头开始重建 F12 工具。它们具有全新的 UI 和新功能性，可使你更快、更轻松 地进行开发和调试。 在键盘上按“F12”键以打开工具。如果你的键盘没有功能键，则可以使用 “工具”菜单。 有八个不同工具，每个工具在 F12 工具界面中都带有其自己的选项卡。你将在此处找到每个工具的 图像、工具的作用和新增功能小结，以及该工具简化的几个典型开发或调试任务。
• 拖动 DOM 节点：在 Internet Explorer 11 中，你可以拖动元素窗格中的元素。单击元素并 将其拖动到新位置，操作方法与其他任何类型的可移动项目相同。
• 剪切/复制和粘贴：使用右键单击上下文菜单或键盘快捷方式来剪切、复制和粘贴元素。
当复制某个元素并使用 CTRL + V 进行粘贴时，剪切板上的元素将作为选中元素的子元素粘 贴。右键单击该元素以使用上下文菜单中的“粘贴之前的内容”选项。
这可以在元素位置错误或行为异常时帮助你诊断问题，然后解决问题。
元素窗格 选择元素 编辑元素 移动元素 样式窗格 样式 跟踪（已在 Windows 已计算 布局 事件 更改（已在 Windows
8.1 更新中删除） 8.1 更新中添加）
元素窗格
左侧的元素窗格实时显示当前创建的 DOM。使用你的鼠标浏览它，单击父元素旁的箭头将其展开，并 查看其子元素。你也可以使用键盘上的箭头键浏览它，使用向左键和向右键以展开和折叠元素。
例如，如果你想要体验 CSS 的悬停效果，打开伪类并选中 Hover 复选框可使该元素像鼠标悬停在其 上方一样显示，直到复选框被清除或页面重新加载。当你在“DOM Explorer”中微调悬停效果时，这 可以帮助你节省时间。 “样式”窗格有五个选项卡。
样式
“样式”选项卡是应用到元素的所有样式以及应用的样式属性的列表。它将直接面向元素的样式与继 承样式分开，并识别继承样式来自哪些上级元素。它还可以根据 CSS 媒体查询 查找应用了哪些元素。 它可以实时更新，因此如果你执行了基于窗口宽度的媒体查询，调整窗口大小将改变应用的样式列 表，这是因为匹配了不同的媒体查询。
当你编辑类属性时，将提供来自样式的匹配类的建议列表。双击建议或使用箭头键导航到建 议，然后按 Tab 或 Enter 选择它。
• 添加属性：右键单击元素，并单击“添加属性”。 • 作为 HTML 编辑：右键单击元素，并单击“作为 HTML 编辑”。该元素及其子元素将在边界框
内显示为纯文本。按照你在文本编辑器中的方式编辑文本，然后单击框外任意位置提交更改。
迹磁贴选择它代表的元素。
检查完元素后，它将突出显示。
突出显示不仅显示元素边界，还显示其填充的边界、边框和边距。可以使用“DOM 资源管理器”工具 标题右侧的第二个按钮切换启用或禁用状态。
编辑元素
可以使用三种方法编辑元素：
• 编辑属性：可以通过双击或选择属性，按 Enter，然后通过选项卡浏览属性以进行编辑。
• 使用“控制台”按钮或 CTRL + ` 在任何其他工具的底部打开控制台。 • 用于计时、计数、编组等的新 控制台调试 API 方法。
• 命令行上的 IntelliSense 自动完成建议可加快输入速度、减少拼写错误并帮助你发现 JavaScript API 的各个方面。
它简化的开发和调试任务： • 查看系统错误消息、异常警告和调试输出。 • 使用新的计时方法将计时代码执行下拉至该语句。 • 在不重新加载的情况下，更改运行代码中的变量值。
了解有关“控制台”工具的详细信息 。
“调试程序”工具 (CTRL + 3)
你可以使用 “调试程序”工具 检查代码的作用、代码执行时间及其执行方式。在执行过程中暂停代 码，逐行操作代码，然后查看每个步骤中变量和对象的状态。 以下新功能 包含在 “调试程序”工具 中：
• 无刷新调试。设置断点，无需在运行时重新加载和丢失状态。 • 用于更轻松管理多个脚本的选项卡式文档界面。 • 突出显示断点和搜索匹配的滚动条。 它简化的开发和调试任务：
注意 请勿使用上下文菜单中的“复制带有样式的元素”选项来移动 DOM 中的元素。它将 包含该元素的 HTML 文档及其所有相关样式放置在剪切板上，以便粘贴到外部编辑器。
样式窗格
“样式窗格”提供不同视图，用于查看向元素应用了哪些样式，以及元素关联事件触发了哪个代码。
Windows 8.1 更新中的一个新功能是伪类切换开关。它位于“样式”和“已计算”选项卡的右上角 中，是一个类似于“a:”的图标。启用后，将为常见的 Hover 和 Visited 伪类显示复选框。勾选其 中某个复选框可重新设置该元素的样式，就如同该伪类处于活动状态一样。
“内存”工具 在 IE11 中是 F12 工具的新增工具。某些有趣的功能如下：
• 使用时间线可以查看内存使用的进度更改。 • 使用快照可以在特定点检查内存使用的详细信息。 • 使用快照比较可以标识特定增长点。
它简化的开发和调试任务：
• 标识断开的 DOM 节点。 • 标识内存增长点。 • 计量对象的内存使用情况。
布局
“布局”选项卡显示用于选定元素定位的框模型图表，它采用的颜色与选定元素突出显示的颜色相 同。你可以通过单击图表中的任意值以进行编辑。
选择元素
可以使用四种方法选择要检查的元素：
• 通过元素窗格：使用键盘或鼠标在“元素窗格”中浏览。 • 选择元素：单击“DOM 资源管理器”标题旁的按钮（或按 CTRL + B）以激活“选择元素”工
具。然后，单击网页中的任意位置，将选中你单击的元素。 • 检查元素：右键单击网页中的任意元素，并从上下文菜单中选择“检查元素”。 • 痕迹：选中一个元素后，“元素窗格ห้องสมุดไป่ตู้底部将显示其父元素（如果存在）的痕迹线索。单击痕