页面审核工具 Chrome Lighthouse 简介

时间 2019-12-06

标签页面审核工具 chrome lighthouse 简介栏目 Chrome 繁體版

原文原文链接

做者：Bolaji Ayodeji
翻译：疯狂的技术宅html

原文：https://www.freecodecamp.org/...前端

未经容许严禁转载node

Chrome Lighthouse 已经存在了一段时间了，但若是我要求你解释一下它能作什么，你能解释清楚吗？git

我发现许多 Web 开发人员包括初学者，都没有据说过这个工具，而那些还没有尝试过的人，一点也不酷 😒。程序员

在本文中，我将向你介绍 Chrome Lighthouse 的做用以及如何使用它。github

让咱们开始吧 😄web

根据维基百科，lighthouse是一座塔楼、建筑物或其余类型的结构，它用灯和镜头系统发出光线，做为海上或内陆水道船舶的导航设备。

好吧，让咱们把它变成一个技术术语;面试

Lighthouse 是一个塔楼，建筑物或其余类型的结构，它在 Chrome 开发者工具的“审核”面板下的系统发出光线，并做为开发人员的指南

有道理吗？😄chrome

好吧，Lighthouse 是 Google 开发的一款工具，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。npm

能够将 Lighthouse 看做是汽车中用来检查和平衡汽车速度限制的车速表。

通常状况下 Lighthouse 与开发最佳实践和性能指标一块儿使用。它在 Web 应用上运行检查，并为你提供有关错误的反馈、低于标准的实践、更好的性能提示以及如何解决这些问题。

根据 Google Developers Docs 上的描述

Lighthouse 是一种开源的自动化工具，用于提升网页质量。你能够在任何网页上运行它。它可以针对性能、可访问性、渐进式 Web 应用等进行审核。
你能够在 Chrome DevTools 中从命令行运行 Lighthouse，也能够做为 Node.js 模块运行。当你向 Lighthouse 提供了一个 URL 来进行审核时，它会针对该页面运行一系列审核，而后生成一个关于该页面执行状况的报告。这份报告能够做为如何改进页面的指标。每次审核都会产生一份参考文档，解释了这些审核为何重要，以及如何解决等内容。

这几乎都与 Lighthouse 有关，它会审核 Web 应用的 URL 并根据 Web 标准和开发人员最佳实践生成一份报告，告诉你 Web 应用的糟糕程度。报告的每一个部分还附有文档，说明你的应用哪些部分已经经过审核，为何你应该改进应用的某一部分以及如何去解决它。

如下是此博客https://bolajiayodeji.com的lighthouse审核报告演示

左：个人博客😄 右：Lighthouse 审核报告

很酷吧？😉

应该注意的是，在个人第一次审计中，并无获得这样的好成绩。因此我用第一份报告来修复和改善本身程序的性能和质量。

这是 Lighthouse 目的：它识别和修复影响你网站性能、可访问性和用户体验的常见问题。

如今，让咱们进入到有趣的部分，如何开始使用它!!

LightHouse 有三种工做流程

Chrome 开发者工具
命令行 (Node.js)
Chrome 扩展程序

我我的更喜欢在 Dev Tools 中使用 LightHouse。使用扩展程序没有意义，由于开发工具和扩展程序在同一个 Chrome 浏览器中工做，咱们的偏好不一样，你能够选择最适合本身的方法。

Lighthouse 在添加到 Chrome DevTools 以前首先只能使用 Chrome 扩展程序。

在命令行上使用 lighthouse 也很酷，（对于极客来讲😉）

让咱们开始吧！！！

[1] 在Chrome DevTools 中运行 Lighthouse

下载谷歌浏览器网页浏览器此处

注意：Lighthouse 只能在桌面上运行

转到你要在 Google Chrome 中审核的 URL。

你能够审核网络上的任何 URL。

打开 Chrome DevTools

Command+Option+C (Mac)
Control+Shift+C (Windows, Linux, Chrome OS).

单击 Audits 面板

左侧是将被审核的页面，这是个人博客😄。右侧是 Chrome DevTools的 Audits 面板，如今由 Lighthouse 提供支持

点击 Run audits

DevTools 显示审计类别列表。确保将它们所有被选中。若是你想个性化要审核的哪一个部分，能够经过选中要审核的类别来设置。

60 至 90 秒后 —— 根据你的网速，Lighthouse 会在页面上为你提供报告。

并不是只有网速和预安装的扩展可能会影响lighthouse审核。为了得到更好的体验，请在 Icognito模式下进行审核来避免全部的干扰

[2] 在命令行中运行lighthouse

下载谷歌 Chrome 浏览器
下载 Node.js，若是已安装，请跳过此步骤！
安装 Lighthouse

npm install -g lighthouse
# or use yarn:
yarn global add lighthouse

用 -g 选项将其安装为全局模块。

运行审核

lighthouse <url>

例如：

lighthouse https://bolajiayodeji.com/

Lighthouse 默认生成 HTML 格式的报告文件。你能够经过添加控制选项来控制输出的格式。

报告可以以 HTML 或 JSON 格式显示。

输出样本：

lighthouse
# saves `./<HOST>_<DATE>.report.html`

lighthouse --output json
# json output sent to stdout

lighthouse --output html --output-path ./report.html
# saves `./report.html`

# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`

lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`

lighthouse --output-path=~/mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`

lighthouse --output-path=./report.json --output json
# saves `./report.json`

经过运行 $ lighthouse --help 来查看为 CLI 选项

[3] 使用 Chrome 扩展程序运行 Lighthouse

正如我以前所说，DevTools工做流程是最好的，由于它除了与扩展工做流程相同以外，还有额外的好处：无需进行安装。

To use this method you need to install the extension, but If you have your reasons, here is the guide;
要使用此方法，你须要安装扩展程序，若是你有本身的理由的话。这是按照指南：

下载谷歌 Chrome 浏览器
从 Chrome 网上应用店安装 Lighthouse Chrome 扩展程序。
导航到要审核的页面
点击 Lighthouse 图标。

它应该在 Chrome 地址栏旁边。若是没有，请打开Chrome的主菜单（右上角的三个点），而后在菜单顶部访问它。点击后会展开 Lighthouse 菜单。

单击 Generate report。

Lighthouse 会针对打开的页面运行审核，而后打开一个新选项卡，其中包含结果报告。

Bingo! 你作到了～

就这些，Lighthouse 是一个很好的工具，尤为适合初学者。

在审核 Progressive Web 应用时，它是一个很是有用的工具。

当我开始使用 Lighthouse 时，实际上学到了不少优化和性能标准。相信你很快就可以成为可以构建具备出色性能、可访问性和用户体验的 Web 应用专家。 :)

Lighthouse 不是魔术，它是由人类创造的。它是开源的，欢迎对其做出你的贡献。能够经过查看 github 上的 issue 跟踪器，找到能够修复的错误，或者建立和改进审核过程。issue 跟踪器也是讨论审计指标，新审计想法或与 Lighthouse 相关的任何内容的好去处。😄

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...