BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Google Chrome开发者工具更新

| 作者 David Iffland 关注 3 他的粉丝 ,译者 罗远航 关注 0 他的粉丝 发布于 2017年6月6日. 估计阅读时间: 3 分钟 | QCon北京2018全面起航:开启与Netflix、微软、ThoughtWorks等公司的技术创新之路!

亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知

在Google I/O 2017大会上,Paul Irish发表了一段"2017开发者工具年度报告",他展示了一些 Chrome开发者工具的新特性,其中包括能够帮助开发者简化代码和处理现代JavaScript需求的一些新特性。

2017年,web开发者们正在寻找新的方法来提升和优化网页性能,如今,用户的实际体验被视为最具有提升潜力的部分。Irish如是说:

浏览器中最流畅的代码是永远不会运行的那些代码。更好的情况是,最流畅的代码甚至是那些都没有下载下来的代码。要是我们能够提供一个视图,借助该视图可以看到网页中真正使用的代码,这岂不是很棒的事情吗?

为此,Chrome开发者工具现在提供了一个新的覆盖分析器(Coverage profiler),它能够显示出浏览器实际使用的JavaScript和CSS的百分比。

单击其中的一行会跳转到该文件并且显示出实际使用了文件中的哪些部分。

CSS代码很有趣,因为浏览器始终都知道应用了其中的哪一部分,并且可以对页面中使用到的CSS代码进行独到的分析。

全页面截图(full-page screenshots)也是一个新的功能。以前,开发人员也可以对网页进行截图,但它只能捕获当前显示出的页面。这个新功能可以对全部网页内容进行截图,而不仅仅是针对当前显示的页面。

审计面板(Audits)已经被一个叫做灯塔(Lighthouse)的集成工具所取代。该工具可以对页面的性能、最佳实践、可访问性以及渐进式Web应用进行审核。以前,该工具可用作拓展工具或者是命令行工具。灯塔工具能够通过一系列测试来运行网页,例如,通过不同的设备型号、不同的网络速度来对网页进行访问。它还能能对该网页是否符合无障碍指南进行测试,例如,对是否满足颜色对比度测试和ARIA(Accessible Rich Internet Applications)最佳实践进行测试。

测试结果会以一个易于阅读的报告进行展示,并且它还能够给出可行的建议。

除了提到的这些新功能,新的开发者工具还有许多其它新特性,例如,内联对象预览以及对异步代码调试的重大改进。

Irish所做报告的完整视频可以在YouTube上进行观看。我们会在Chrome 59中看到这些新特性,目前它们可以在Chrome Canary上进行使用。

查看英文原文Updates to Google Chrome DevTools


感谢张卫滨对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT