专栏首页京程一灯页面审核工具 Chrome Lighthouse 简介[每日前端夜话0x88]

页面审核工具 Chrome Lighthouse 简介[每日前端夜话0x88]

每日前端夜话0x88

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:1993 字

预计阅读时间: 6 分钟

作者:Bolaji Ayodeji

翻译:疯狂的技术宅

来源:logrocket

Chrome Lighthouse 已经存在了一段时间了,但如果我要求你解释一下它能做什么,你能解释清楚吗?

我发现许多 Web 开发人员,包括初学者,都没有听说过这个工具,而那些尚未尝试过的人,一点也不酷 ?。

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

让我们开始吧 ?


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

好吧,让我们把它变成一个技术术语;

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

有道理吗??

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

可以将 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
1Command+Option+C (Mac)
2Control+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
1npm install -g lighthouse
2# or use yarn:
3yarn global add lighthouse

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

  • 运行审核
1lighthouse <url>

例如:

1lighthouse https://bolajiayodeji.com/

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

报告能够以 HTMLJSON 格式显示。

输出样本:

 1lighthouse
 2# saves `./<HOST>_<DATE>.report.html`
 3
 4lighthouse --output json
 5# json output sent to stdout
 6
 7lighthouse --output html --output-path ./report.html
 8# saves `./report.html`
 9
10# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
11lighthouse --output json --output html --output-path ./myfile.json
12# saves `./myfile.report.json` and `./myfile.report.html`
13
14lighthouse --output json --output html
15# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
16
17lighthouse --output-path=~/mydir/foo.out --save-assets
18# saves `~/mydir/foo.report.html`
19# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`
20
21lighthouse --output-path=./report.json --output json
22# 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 相关的任何内容的好去处。?

原文:https://www.freecodecamp.org/news/introduction-to-chrome-lighthouse/

往期精选

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 5G 有可能会使 Web 明显变慢[每日前端夜话0xC2]

    5G 的小图标开始逐渐出现在世界各地的手机屏幕上。如果你已经开始使用了,可能会注意到,感觉上其速度并没有超过 4G 一大截,我同意这个观点。据了解,这是因为初期...

    疯狂的技术宅
  • 2020最新:100道有答案的前端面试题(下)

    疯狂的技术宅
  • Safari技术预览版40更新说明

    Safari技术预览版 发布版本40现在在macOS Sierra和 macOS High Sierra 的betas版可以下载 使用了。如果您已经安装了Saf...

    疯狂的技术宅
  • linux 后台运行方法总结

    多种后台运行方法总结,nohup, disown, setsid, (...&), screen, tmux

    PedroQin
  • (数据科学学习手札75)基于geopandas的空间数据分析——坐标参考系篇

      在上一篇文章中我们对geopandas中的数据结构展开了较为全面的学习,其中涉及到面积长度等计算的过程中提到了具体的计算结果与所选择的投影坐标系关系密切,投...

    Feffery
  • 常与无常:SQL语句中常量的处理及性能差异解析

    杨廷琨,网名 yangtingkun 云和恩墨技术总监,Oracle ACE Director,ACOUG 核心专家 在ITPUB论坛上看到一个有意思的问题:两...

    数据和云
  • ElasticSearch核心知识总结(二)

    老梁
  • fiddler自动生成jmeter测试脚本

    昨天我们在课堂上讲了如何通过fiddler抓包,单一接口可以复制到jmeter中进行接口测试,那么如果抓包获取了大量的接口,我们如何快速实现接口转换成jmx文件...

    飞天小子
  • 构建一个可以统计 qps 的nginx服务的Dockerfile

    github 项目地址: https://github.com/SilentCC/nginx_lua_qps_count

    ShenduCC
  • Python助你抢红包

    回家团圆,春晚、鞭炮、春联等都是春节的传统代名词,但是近两年春节又有了一个新的代名词,那就是“抢红包”。今年春节期间,除了之前微信、支付宝、QQ等发红包平台,百...

    PM小王

扫码关注云+社区

领取腾讯云代金券