关于chrome灯塔你了解多少-chrome灯塔使用教程

chrome灯塔使用教程

来源：谷歌浏览器官网 作者：浏览器迷

2023/09/22

Chrome Lighthouse已经有一段时间了，但是如果我请你解释它是做什么的，你能生动地解释吗？

我发现很多web开发人员，包括初学者，都没有听说过这个工具，而那些听说过的人，还没有尝试过，这很不酷。

在本文中，我将向您介绍Chrome Lighthouse，它的功能以及如何开始使用它。

chrome灯塔使用教程1 A灯塔是一种塔、建筑或其他类型的结构，设计用于从灯系统中发光，并镜头并作为一个导航设备为海上领航员在海上或内陆水道。

灯塔是一座塔、建筑或其他类型的结构，设计用于从系统中发光在“审计”小组下在Chrome开发者工具并作为开发人员的指南

嗯，Lighthouse是谷歌开发的一个工具，它分析网络应用和网页，收集现代性能指标和对开发者最佳实践的见解。

可以把Lighthouse想象成汽车中的速度计，它检查和平衡汽车的速度限制。

基本上，Lighthouse使用开发人员最佳实践和性能指标。它对Web应用程序进行检查，并为您提供关于错误、低于标准的实践、提高性能的提示以及如何修复它们的反馈。

灯塔是一个源代码开放的，提高网页质量的自动化工具。你可以在任何网页上运行它，无论是公开的还是需要认证的。它对性能、可访问性、渐进式网络应用等进行审计。

你可以在Chrome DevTools中运行Lighthouse，从命令行，或者作为一个节点模块。您给Lighthouse一个URL来审计，它对页面运行一系列审计，然后生成一个关于页面表现如何的报告。在此基础上，使用失败的审计作为如何改进页面的指标。每个审计都有一个参考文档，解释为什么审计很重要，以及如何修复它。

这就是Lighthouse的全部功能，它审计一个web应用程序的URL，并根据web标准和开发人员的最佳实践生成一份报告，告诉您您的web应用程序有多好。报告的每一部分还附有文档，解释为什么你的应用程序的这一部分被审计，为什么你应该改进你的应用程序的这一部分，以及如何修复它。

你应该注意的是，我在第一次审计中没有得到这样的高分。我不得不使用我的第一份报告来修复和提高我的应用程序的性能和质量。

这是Lighthouse背后的想法，它是为了识别和修复影响你的网站性能、可访问性和用户体验的常见问题。

现在，让我们进入有趣的部分，如何入门！！

LightHouse有三种工作流程

1、Chrome开发者工具

2、命令行(节点)

3、Chrome扩展

我个人更喜欢在开发工具中使用LightHouse。使用扩展没有意义，因为开发工具和扩展在同一个chrome浏览器中工作，我们的偏好不同，使用最适合你的。

Lighthouse在被添加到Chrome DevTools之前，最初只在Chrome扩展中可用。

在命令行上使用lighthouse也很酷，(对于极客来说:)

1]在Chrome DevTools中运行Lighthouse

下载谷歌浏览器这里

请注意，Lighthouse只能在桌面上运行，不能在移动设备上运行

在谷歌Chrome中转到你想审计的网址。

您可以审核网络上的任何URL。

打开Chrome DevTools

点击审计面板

左边是将被审计的页面的视窗，这里是我的博客:)。右边是审计小组Chrome DevTools，现在由Lighthouse提供支持。

点击运行审计

DevTools向您显示审计类别列表。请确保所有选项都处于选中状态。如果你想个性化你的应用程序的审核部分，你可以通过检查你想要审核的类别来设置。

60到90秒后——取决于你的互联网强度，Lighthouse会在页面上给你一个报告。

不是说你的网速和预装的扩展可以影响灯塔审计。为了获得更好的体验，请在Icognito模式为了避免任何干扰

[2]在命令行中运行Lighthouse

下载谷歌浏览器这里

下载节点这里，如果您已经安装了它，请跳过这一步！

安装灯塔

这-g标志将其作为全局模块安装。

运行您的审计

默认情况下，Lighthouse将报告写入一个HTML文件。您可以通过传递标志来控制输出格式。

该报告可以显示在超文本标记语言或者数据格式

[3]使用Chrome扩展运行Lighthouse

正如我前面说过的，DevTools工作流是最好的，因为它提供了与扩展工作流相同的好处，并且不需要安装。

要使用这种方法，你需要安装扩展，但如果你有你的理由，这里是指南；

1、下载谷歌浏览器这里

2、安装灯塔镀铬扩展从Chrome网上商店。

3、导航到要审计的页面

4、点击灯塔图标。

应该在Chrome地址栏旁边。如果没有，打开Chrome的主菜单(右上方的三个点)并在菜单顶部访问它。点击后，灯塔菜单展开。

点击生成报告。

Lighthouse对打开的页面进行审计，然后打开一个新的标签页，显示结果报告。

差不多就是这样，Lighthouse是一个很棒的工具，尤其是对新手来说。

在审计渐进式web应用程序时，这是一个非常有用的工具。

实际上，当我开始使用Lighthouse时，我学到了很多关于优化和性能标准的知识。您很快就会成为构建全面优化的web应用程序的专家，这些应用程序具有出色的性能、可访问性和用户体验。

灯塔不是魔法，它是人类创造的。它是开源的欢迎投稿。查看存储库的问题跟踪器找到可以修复的错误，或者可以创建或改进的审计。issues tracker也是一个讨论审计指标、新审计想法或任何与Lighthouse相关的内容的好地方。

以上就是关于chrome灯塔使用教程的全部内容，希望能给需要的朋友带来一点帮助。更多精彩教程，请继续关注chrome官网站。　

上一篇: Vimium插件使用教程下一篇: 如何使用GitHunt在chrome新标签页中获取GitHub项目?