首页 > 浏览器技巧 > 关于chrome灯塔你了解多少?

关于chrome灯塔你了解多少?

来源:chrome官网2022-05-31

详情介绍 m详情介绍

  关于chrome灯塔你了解多少?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相关的内容的好地方。

继续阅读 m继续阅读
针对google浏览器下载安装中遇到的网络问题,提供全面的解决方案,确保下载安装过程稳定顺畅。 2026-02-07 Chrome浏览器网页加载卡顿会影响用户体验,本文分析加载卡顿原因,并提供解决方案,帮助用户优化网页加载速度。 2026-02-22 Chrome浏览器网页加载速度可能受网络或缓存影响,通过优化方法可显著提升性能。文章详细解析操作步骤,帮助用户实现流畅浏览体验。 2026-02-08 汇总谷歌浏览器官方下载慢时的网络诊断与优化方案,帮助用户全面排查并提升下载速度。 2026-01-30 谷歌浏览器通过网页自动刷新与优化技巧,用户可保持内容更新,同时提升访问效率,实现流畅高效的浏览体验。 2026-02-18 google浏览器下载更新后可进行界面布局美化,帮助用户优化视觉效果和操作体验,实现舒适高效浏览。 2026-02-05 Chrome浏览器广告过滤插件隐藏功能实用。使用技巧解析详细方法,帮助用户屏蔽广告,提高网页加载速度和浏览体验。 2026-02-09 谷歌浏览器下载时可选择最佳安装模式,本篇内容提供操作技巧和建议,确保安装过程顺利高效。 2026-01-21 谷歌浏览器提供跨平台安装经验技巧解析,指导用户在不同设备高效完成安装,并优化同步与配置流程,提升使用效率。 2026-01-28 google浏览器集成AI辅助网页调试工具,帮助开发者快速定位和解决问题。教程详尽介绍功能应用,提升开发和调试效率。 2026-01-31
相关文章 m相关文章
教程 指南 问答 专题
返回顶部