Share via

在 IE11 中使用 F12 开发人员工具调试和优化网站和应用

  • Article

Windows 8.1 和 Windows 7 中的 Internet Explorer 11 带有一组内置的开发人员工具，我们对这些工具进行了颠覆性重新设计和增强，可以帮助开发人员跨多种设备来构建、诊断和优化现代网站和应用。我们将这一组全新工具简称为 F12，这些工具可帮助 Web 开发人员快速、高效地完成各项工作。

F12 由 Visual Studio 团队和 IE 团队密切合作构建而成，旨在为开发人员提供可操作的数据，帮助开发人员快速找出并解决问题。全新的 F12 包含用于诊断和修复性能问题的工具以及帮助您深入了解 IE 如何布局和呈现您的应用的工具，可以帮助您提供快速而流畅的 Web 体验。F12 支持现代 Web 开发人员所使用的快速、迭代工作流。

综合性工具集

全新的 F12 可以帮助开发人员快速找出并解决问题。最重要的一些新功能如下：

  • UI 响应能力及内存分析工具，可帮助您构建快速而流畅的 Web 应用
  • 动态 DOM 资源管理器和 CSS 检查工具，它们随页面更新，因此您可以反复检查动态内容如何影响布局和样式
  • JavaScript 调试，它无需刷新页面即可快速启动，因此您可以更快地投入工作

使用过 F12 之后，您会发现可帮助您提供快速、迭代工作流的更多增强功能：

  • 通过 [inspect element]（检查元素）右键菜单项快速启动工具
  • 通过键盘来执行工具操作
  • 完美复制工具中的元素和项目并将其粘贴到所选择的编辑器中，而无需重新设置格式

最重要的是，这些工具现在可以显示最精确的综合性信息，从 DOM 资源管理器中的 @media 规则和 !important 到 UI 响应能力分析工具中每个元素的布局开销，均能全面囊括。该工具还提供可直接操作的数据；例如，内存分析工具可识别未被标记或渲染树引用的所有活动 DOM 节点。

全新的 F12 与 Visual Studio 共享其中的众多体验，因此开发人员可以在 Microsoft 的 Web 开发工具和平台体系中获得一致的体验。

让我们来简略了解一下这些工具的功能。

使用 UI 响应能力工具分析应用

UI 响应能力工具可以帮助您了解哪些组件占用了 CPU 时间，从而帮助您最大限度地改善应用性能。该工具以可视化形式显示 HTML、CSS 和 JavaScript 的执行情况以及对布局和垃圾回收等方面的重要边际影响，帮助您深入了解 IE 的内部工作情况。您可以高屋建瓴地准确了解您的应用的响应性以及呈现的流畅性。从而识别出影响应用性能的具体原因，更加有针对性地对应用进行优化。

F12 UI 响应能力工具 - Internet Explorer 11

分析网站

使用内存分析工具了解应用的内存消耗情况

内存工具可以帮助您避免内存泄露或内存的过度消耗。要构建可供消费者长期运行的 Web 应用或复杂的交互式应用，您必须重点关注应用的内存使用情况。

尽管 JavaScript 具有完善的垃圾回收环境，但如果应用引用的对象未能及时释放或无法释放，通常会导致应用消耗过多的内存。内存工具可以显示页面中每一个对象的相关信息，无论该对象是 JavaScript 对象还是 DOM 对象，从而帮助您发现这些问题。例如，利用这些信息，您可以查看 <img> 占用了多少内存以及哪些对象使其处于活动状态。最佳做法是，您可以比较两个快照之间的差异，定位发生变化的点，从而找出应用占用过多内存的原因并予以修正。

F12 内存工具 - Internet Explorer 11

显示已断开连接的 DOM 元素的堆快照

使用性能仪表板即时查看应用性能

为了帮助您快速识别正在运行的页面中的性能问题，IE11 配备了一个名为性能仪表板的页面小组件，您可以通过 Ctrl+Shift+U 或通过“工具”(Alt+T) 菜单选项来访问性能仪表板。性能仪表板在 IE 中绘制呈现，可提供关键性能指标（例如，绘制时间、内存、每秒帧数 (FPS) 和 CPU 使用率）的实时统计信息。性能仪表板不需要 F12，也可以在沉浸式浏览器中使用。

利用性能仪表板，您可以快速识别导致帧率下降或 CPU 使用率提高的页面交互操作。然后，您可以切换到 F12 工具重现该问题并找出解决方法。

F12 工具 - 性能仪表板 - Internet Explorer 11
绘制时间性能仪表板 - Internet Explorer 11

使用 DOM 资源管理器检查元素以及修改布局和样式

DOM 资源管理器可以简化交互过程，优化 @media 查询和 CSS 规则及其属性，确保您的应用的 UI 能够跨多种设备正常工作并作出响应。通过右键单击网页中的元素可以快速对该元素进行检查，此时将启动 F12 并在 DOM 资源管理器中显示所选择的元素，并实时显示 DOM 和应用的 CSS 规则。所显示的 DOM 和 CSS 均为实时信息，因此您可以了解 IE 如何具体解释您的标记、样式和 CSS 规则。在与页面进行交互或通过 DOM 资源管理器编辑页面之后，所做的更改会立即反映到页面中。

F12 DOM 资源管理器 - Internet Explorer 11

检查标记和样式

对 CSS 进行更改后，DOM 资源管理器可以利用 IntelliSense 轻松地确定正确的属性或属性值。您可以轻松辨别哪些属性存在错误或无法识别，然后复制规则并应用到源代码中。

使用调试器和控制台调试 JavaScript

全新的 JavaScript 调试器为您提供了快速查找并修正易于出错的代码的工具。JavaScript 调试器可以打开和查看多个文件（即使您的库脚本已进行了压缩也可查看），设置断点和跟踪点，检查 JavaScript 对象、值、作用域链，并查看堆栈跟踪。在启动 F12 时会立即启动 JavaScript 调试器，以便您能够立即开始工作。

在调试过程中，您可能希望与您的网站进行交互。控制台是执行此操作的关键工具。您可以随时访问控制台并使用交互式环境，该环境包含 IntelliSense 和大量可视化工具。控制台还提供了各种专用 API，您可以利用这些 API 来记录输出信息，了解特定代码所花费的时间；当您需要对 JavaScript 对象进行深入检查时，还可以使用控制台提供的对象可视化工具。

总结

本博文只是对 F12 中的新增功能进行了简要介绍。请参阅 IE11“F12 工具新增功能”和 IE11“Preview 开发人员指南”，了解面向开发人员的新功能的完整列表。您还可以观看“F12 Adventure”IE 体验演示了解更多信息。

请通过 Windows 应用商店安装 Windows 8.1 Preview 并试用 IE11，或者试用 IE11 Developer Preview for Windows 7。

我们期待收到您的反馈并与开发人员社区互动。请通过 IE11 的“发送反馈”工具或者在 Connect 上提供建议或意见。

— PJ Hough
Visual Studio 副总裁