发现绿色的安卓上网引擎 - 克罗米小站 谷歌浏览器手机版下载

首页 > 浏览器技巧 > 关于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 Chrome默认开启新标签页往往不直接聚焦网页。本文说明如何通过插件脚本强制页面加载后自动捕获输入焦点,让您在打开搜索或文档页时能直接输入,简化操作步骤,提升极致的办公启动效率。 2026-06-20 谷歌浏览器视频播放缓存清理操作可减少播放卡顿和延迟,用户通过经验掌握清理方法,结合实操技巧优化视频缓存管理,提高在线视频观看流畅度和稳定性。 2026-08-09 谷歌浏览器性能表现与底层环境设置关联密切。本参数调优清单盘点高频影响响应速率的设置选项,通过精细化微调与环境重置,助您彻底消除性能瓶颈,打造高性能工作台。 2026-06-18 Chrome浏览器启动速度可能影响使用体验,本教程分享测试与优化操作实践,包括原因分析、设置调整及操作技巧,帮助用户恢复快速启动体验。 2026-07-31 Chrome浏览器新标签页被强制植入广告页面,源于底层配置被植入恶意脚本。本文拆解劫持诱因,并提供环境参数一键复原方案,帮您重获自主可控的标签页交互空间。 2026-08-06 谷歌浏览器多语言翻译功能经过实测,用户可学习操作教程提高翻译效率,实现顺畅跨语言浏览。 2026-06-20 谷歌浏览器手机版网页排版异常通常与UA识别有关。本文详细解析了如何手动修改浏览器UA标识,强制模拟桌面或特定设备环境,从而彻底解决网页内容排版压缩、显示错乱的问题。 2026-08-05 google Chrome浏览器扩展插件可能发生冲突,本文分享处理经验与操作技巧,帮助用户快速解决问题,保障浏览器稳定运行。 2026-06-14 OPPO浏览器深度清理缓存后出现的加载变慢,是资源索引重建过程中的必经阶段。本文深入剖析其底层文件扫描逻辑,提供优化预加载缓存与减少资源碎片碎片的进阶指导,助您缩短性能空窗期,让浏览器迅速满血回归。 2026-08-15 OPPO浏览器浏览网页时因JS脚本错误导致页面崩溃或功能失效?本文解析浏览器内置JS引擎执行策略,分享强制启用兼容性模式及拦截冲突脚本的专业调试方案。 2026-07-24
相关文章 m相关文章
教程 指南 问答 专题
返回顶部