立即下载
首页 > 浏览器技巧 > 关于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继续阅读
谷歌浏览器怎么加速网页浏览?接下来小编就给大家带来谷歌浏览器提升网页加载速度教程一览,大家赶紧来看看吧。 2024-05-21 本篇文章给大家详细介绍了可以进入任何网站的浏览器软件,这些浏览器非常好用,感兴趣的朋友千万不要错过了。 2024-07-08 如何在谷歌浏览器中启用网络嗅探器?下面这篇详细步骤【图文】希望能带给大家一些指导,提高大家的上网体验。 2024-09-08 怎么设置谷歌浏览器网站安全性?下面小编给大家带来谷歌浏览器提高网站安全级别方法技巧,有需要的朋友赶紧来下载试试看吧。 2024-05-10 有哪些浏览器可以开兼容模式?下面就让小编给大家带来拥有兼容模式的浏览器大全介绍,希望能够帮助大家解决问题。 2024-04-20 本篇文章给大家带来可以下载网页视频的浏览器软件推荐大全,对这些浏览器感兴趣的朋友就来下载吧。 2024-07-03 想将谷歌浏览器改成中文简体应该怎么操作,不了解操作过程的小伙伴可以看看下面这篇文章,教你几步快速将谷歌浏览器改成想要的语言。 2024-07-27 谷歌浏览器如何打开网页控制台?不知道如何打开的小伙伴可以看看下面这篇操作详情一览。 2024-08-23 如何强制删除谷歌浏览器?本篇文章给大家带来强制移除谷歌浏览器方法步骤一览,希望大家能够通过以下方法获取到帮助。 2024-06-19 谷歌浏览器书签如何设置同步?本篇文章就给大家带来谷歌浏览器设置书签同步步骤一览,希望能够帮助大家解决问题。 2024-04-23
相关文章 m相关文章
教程 指南 问答 专题
返回顶部