编程学习网 > WEB开发 > 浏览器兼容 > IE11中全新增强的F12开发人员工具
2014
12-03

IE11中全新增强的F12开发人员工具

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

  下面让我们一起来看看F12中新增的功能。

  使用新的F12 开发人员工具调试代码、解决显示问题、提升性能、增强你的网页的稳定性。

  Internet Explorer 11中的F12工具已从头开始重建,可为你提供以下内容:

  从头开始重建

  • 新且更干净的用户界面。
  • 新的响应、内存以及模拟工具。
  • 常见工具中新的、改进的功能。
  • 更快、更简单的工作流。

  使用 UI 响应工具加快网页速度

  当页面运行时,新的UI响应工具为其提供配置文件,从而标识页面速度减慢的位置以及花费时间过长的进程。开发人员可以观察CPU使用率、帧速率与页面行为之间的关系。

  要点:当Windows 7并非处于最新状态时,在Windows 7上的IE11中可能会禁用F12开发人员工具中的UI响应工具。如果UI响应工具无法在 Windows 7上安装的IE11中正常工作,请确保已经安装Windows更新中的所有可用更新。

  CSS、HTML 以及JavaScript自动完成

  键入JavaScript、HTML或CSS代码时, 控制台和DOM资源管理器工具会提供自动完成建议。自动完成有助于实现以下操作:

  • 使API更容易被发现;例如控制台API方法
  • 减少键入错误。
  • 加速工作流。

  屏幕和GPS模拟

  使用模拟工具,你可以在小至240像素宽的移动屏幕上,大至4k家庭影院屏幕的所有屏幕上预览站点外观。GPS模拟测试移动网页如何在世界任何位置进行响应。

  有意义的内存分析

  随着时间的推移跟踪内存使用情况是一个重要工具,用于调试页面速度缓慢和崩溃情况。新的内存工具提供了以下内容:

  • 整体内存使用情况的时间线视图。
  • 内存使用情况快照,显示某个给定时间点网页的内存使用情况。
  • 快照比较,查明两个快照之间更改内存使用情况的源。这有助于标识网页运行时和用户与网页交互时显露的内存问题。
  • 高亮显示的孤立元素,显示可以回收元素的位置。

  右键单击以检查

  使用IE11在DOM资源管理器工具中选择页面元素非常轻松。右键单击页面上的元素,然后单击上下文菜单中的“检查元素”,以在 DOM 资源管理器工具中突出显示元素。

  更多信息

  如果改进的新工具的此示例激起了你的好奇心,你可以阅读使用F12开发人员工具文档,以了解IE11中开发人员工具的所有详细信息。

扫码二维码 获取免费视频学习资料

Python编程学习

查 看2022高级编程视频教程免费获取