你一定要知道的 Chrome DevTool 新功能

浏览： ℃

字体：大中小

发布时间：2017-10-26 18:11:53

来源：

原文出处： Dor Moshe 译文出处：众成翻译/橙橙橙

使用 Lighthouse 来提高网页质量

Chrome 开发团队一直致力于做一些功能和改进，可以让我们的浏览和开发体验变得更好。谷歌 I/O 2017 开发者大会在四月成功举办，期间 Google 向外界展示了很多重要的东西，其中一部分是有关 Chrome DevTool 的。对于使用 Chrome 进行开发的 Web 开发者们，这是非常值得关注的。Chrome 60 在 DevTool 中加入了很多新功能和变化。最令人惊喜的是全新的 Audits 面板。

新的 Audits 面板基于 Lighthouse , 它提供了一套全面的测试来评估网页的质量。测试的类别分别是 性能、可访问性、最佳实践和 PWA（Progressive Web Apps）。

在本文中，我们将研究一下 Audit 的功能，了解它测试的类别，在热门网站上实际应用一下这个功能，分析测试结果，最后简单说下 Lighthouse 的架构体系。

Chrome 60 之前的版本

Audits 面板在 DevTool 中已经存在了一些时间了。只不过在 Chrome 60 之前的版本中, 这个面板只包含网络使用率和页面性能两个测量类别。现在 Audits 面板已经被 Lighthouse 的集成版取代。

从外观和感觉上来看，新老版本的 Audit 面板的差异还是很明显的，所以谷歌把它当做一个全新的功能提了出来。在旧版本的 Chrome 中你需要安装扩展或者用 node 命令行工具才能使用Lighthouse，但在 Chrome 60 中它已经是一个内置的功能了。

Chrome 60之前的Audit功能

Lighthouse

Audits 面板基于谷歌开发的 Lighthouse，它提供了一整套的测试来评估网页的质量，并且是一个开源的项目。

Lighthouse 的目标是“Do Better Web” ，旨在帮助 Web 开发者改进他们现有的 Web 应用程序。通过运行一整套的测试，开发者可以发现新的 Web 平台 API，意识到性能的隐患，并学习（新的）最佳实践。换句话说，就是让开发者在 Web 开发上做得更好！DBW（Do Better Web）作为一套独立的收集器和审查器与 Lighthouse 的核心测试同时运行。

想了解更多有关 Lighthouse 是如何工作的，你可以查看谷歌 I/O 2017 开发者大会上关于它的一段演讲：

这段演讲主要讲述了 Lighthouse 中都有哪些新功能，以及它是如何演变成现代 Web 开发的黄金搭档的。此外，还谈到了如何在不同环境（如，Node CLI，Chrome DevTools，WebPageTest和Headless Chrome）下使用 Lighthouse，它的架构，它与 GitHub /Travis/CI,Headless Chrome 的结合，以及如何在网站上运行自定义审查项来扩展 Lighthouse 的功能。