设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 IT综合资讯 查看内容

IE良心工具:提高开发效率的F12开发者工具

2014-6-27 11:32| 发布者: joejoe0332| 查看: 3177| 评论: 0|原作者: WPDang|来自: WPDang

摘要: 随着网站复杂程度不断增加和全新开发技 术的加入,一款功能强大的浏览器开发者工具,对于所有的前端开发者来说至关重要。为了帮助开发者们提高开发效率,微软对IE11上的F12开发者工具进行 了全方位的大修订,用更加 ...


  • UI响应工具


  UI响应工具是另一个开发者在网页开发过程中常用的测试工具,顾名思义就是查看UI响应时间的工具,具体来说就是帮助开发者确定应用中的哪些组件占用了多少CPU时间,之后可以更有针对性的进行优化,从而最大限度地改善应用性能,同时提高开发的效率。


 wpdang_f12-4


  现在在IE11中的UI响应工具用了最为直观的可视化的形式显示HTML、CSS 和 JavaScript 的执行情况以及对布局和垃圾回收等方面的影响,通过树状图表示了每个时间点对CPU的占用率。


  下面的图形就展示了页面的FPS,也就是每秒钟的帧数,这是我们判断页面丢不丢帧最直观的方法,也就是看页面“卡不卡”。你可以从统计数据中准确了 解应用的响应性以及呈现的流畅度,从而识别出影响应用性能的具体因素,更加有针对性地对应用进行优化。而下方还有详细的时间使用情况,这些只要我们打开 UI响应工具再加载页面,IE11就会帮我们自动收集完成。


wpdang_f12-5


  在测试的过程中,开发者可以打开网页之后F12启用开发者工具,在点击UI响应工具的按钮开始一个检测,等待页面载入完毕之后停止。展现在你面前的 将是一个根据网站载入情况生成的彩色柱形图,按时间的推移呈现出跌宕起伏的变化。时间轴上显示了Loading加载时间等7个主要的事件类别。开发者可以 在选定上面某个时间段后,此时间段加载的包含、引导、加载网页相关资源就会分解出现在时间线详细信息区块。通过这些数据,你可以准确的了解当前应用的响应 性以及呈现的流畅性。从而识别出影响应用性能的具体原因,更加有针对性地对应用进行优化。


wpdang_f12-6


  DOM资源管理器和UI响应工具作为众多更新中的个例,让IE11的开发者工具变得更加友好和先进。同时,通过这些实用的工具变化,能够让开发者在调试网页的过程更加高效。



酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部