IE11-F12 开发人员工具使用手册

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