首页 > 浏览器技巧 > 关于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继续阅读
谷歌浏览器网页安全检测插件功能强大。教程讲解配置方法、操作技巧及经验分享,帮助用户提升网页安全防护能力。 2026-06-12 提供google Chrome浏览器缓存清理的详细操作指南,帮助用户释放存储空间,提升浏览器性能。 2026-06-08 google Chrome通过启动速度测试与优化方法,帮助用户评估运行效率,结合优化方案可显著改善性能。 2026-03-27 Chrome浏览器支持插件管理界面快速禁用或卸载无用插件,定期清理扩展有助于提升浏览速度和保障安全,避免插件堆积带来的问题。 2026-06-23 页面正常加载但资源链接失效是常见下载障碍,谷歌浏览器用户可通过本文排查方法有效定位并解决该问题。 2026-05-21 通过规范路径设置和权限管理,避免谷歌浏览器下载文件时出现路径错误,确保文件正确保存,防止下载失败和文件丢失。 2026-04-06 电脑浏览器书签资产安全不容忽视。本文规划了本地+云端的双重同步策略,通过增量更新机制,确保书签在多设备间实时互通,且随时可执行离线安全归档。 2026-06-22 讲解Google Chrome浏览器多账户的管理方法及快速切换技巧,确保多用户环境下的安全与便利。 2026-06-29 谷歌浏览器多语言翻译功能经过实测,用户可学习操作教程提高翻译效率,实现顺畅跨语言浏览。 2026-06-20 Chrome浏览器内置网页内容翻译功能,支持多语言无障碍浏览。文章详述翻译功能使用方法,提升跨语言网页访问体验。 2026-06-03
相关文章 m相关文章
教程 指南 问答 专题
返回顶部