写点什么

Google Chrome 开发者工具更新

2017 年 6 月 05 日

在 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 )关注我们。

2017 年 6 月 05 日 19:005440

评论

发布
暂无评论
发现更多内容

十、给小白看的第三篇Python基础教程

刘润森

Python

架构1期第二周作业

FG佳

架构一期 - 甘霖 - Week2 - 作业一

小粽

架构师训练营第 2 周学习总结

netspecial

极客大学架构师训练营

食堂就餐卡系统设计-作业

Kenny

作业

「架构师训练营第1期」第二周作业

张国荣

极客大学架构师训练营

什么是依赖倒置原则,为什么有时候依赖倒置原则又被称为好莱坞原则?

魏小龙

敏捷开发 依赖倒置原则

高并发下如何缩短响应时间

架构师修行之路

微服务 高并发优化

十大经典排序算法(动态演示+代码)

C语言与CPP编程

算法 编程语言 面试题 编译器、程序语言、CPU

回首挑灯看剑谱 - Week2 - 学习总结

小粽

[架构师训练营第1期]第二周命题作业

猫切切切切切

极客大学架构师训练营

面试中常见的C语言与C++区别的问题

C语言与CPP编程

c++ 编程语言 面试题 C语言 编译器、程序语言、CPU

第二周作业

alpha

极客大学架构师训练营

第二周总结

睁眼看世界

极客大学架构师训练营

做好分库分表其实很难之一

架构师修行之路

微服务 分库分表

九种查找算法

C语言与CPP编程

面试 算法 编程语言 C语言 编译器、程序语言、CPU

一文轻松理解内存对齐

C语言与CPP编程

程序员 编程语言 面试题 C语言 编译器、程序语言、CPU

依赖倒置原则

知行合一

软件设计原则

软件设计的基本原则

天天向上

极客大学架构师训练营

十七张图玩转Node进程——榨干它

执鸢者

前端 进程 Node

依赖倒置及接口隔离原则

天天向上

极客大学架构师训练营

八、给小白看的第一篇Python基础教程

刘润森

Python

代码防御性编程的十条技巧

C语言与CPP编程

程序员 编程语言 C语言 编译器、程序语言、CPU

架构师训练营 1 期 -- 第二周作业

曾彪彪

极客大学架构师训练营

SpringBoot 异步任务

hepingfly

Java springboot 异步任务

深拷贝与浅拷贝到底是什么

C语言与CPP编程

c++ 面试题 C语言

学生成绩管理系统案例

C语言与CPP编程

编程语言 C语言 编译器、程序语言、CPU

字符串操作的全面总结

C语言与CPP编程

编程语言 C语言 编译器、程序语言、CPU 字符串

七、连Pycharm都不知道怎么用,学什么Python

刘润森

Python

架构师训练营 1 期 -- 第二周总结

曾彪彪

极客大学架构师训练营

架构师训练营 Week2 总结

lggl

总结 极客大学架构师训练营

Google Chrome开发者工具更新-InfoQ