今天给各位分享谷歌浏览器lighthouse的知识，其中也会对谷歌浏览器 安卓下载进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录

1. 打开chrome浏览器开发者工具的方式
2. Core Web Vitals101

一、打开chrome浏览器开发者工具的方式

1、Chrome提供的一些调试功能，在排查代码故障时非常有帮助。事实上，由于谷歌浏览器提供的调试工具太多，很多都被隐藏了起来，等待你去探索。

2、声明：本文已获作者Ferenc Almasi翻译授权。

3、Chrome DevTools（开发者工具）团队每月（

4、 ）都会在他们的网站上发布更新，你也可以在他们的官方 Twitter账户（

5、 ）上找到一些很棒的提示。如果你想了解更多关于 Chrome提供的工具的信息，我强烈推荐查看这两个信息来源。

6、在这篇文章中，我收集了 10个我经常使用但是别人可能不知道的功能。它们帮助我简化了工作流程，可以在更短的时间内完成更多的工作。

7、这里先从在控制台中保持日志说起。假设在重新加载页面之前或导航发生时出现了问题，你会尝试登录控制台，但所有内容都被清除了。解决方法很简单，但我很久以前就不知道了：

8、通常，当用户交互发生时会出现问题。捕捉这些事件来检查在交互中运行的位置和内容非常有帮助。幸运的是，我们可以通过访问 Sources选项卡，用 Ctrl P打开一个 js文件，并检查其中的相关事件：

9、对于 DOM操作也可以添加断点。通常可以断点在某节点接收到属性更改上，例如添加了某个 class。在一个大型代码仓库中搜索相关代码将耗费大量时间，其实你可以简单地为元素添加一个断点，然后剩下的交给 DevTools处理。

10、有时候我们对代码进行性能优化，会导致很多代码没有用了但是还没及时清除。在覆盖工具的帮助下，你可以分析资源并查看哪些行没有执行。如果你关注的不是所有交互，只执行你所关注的交互操作有助于你获取准确的覆盖率。你可以点击 Ctrl Shift P打开工具面板，然后点击重新加载图标开始记录，所有以红色显示的内容都不会被执行。

11、不必要的重绘也会导致性能问题。假设你的页面上有一个倒计时，每次更新都会导致整个页面重新绘制。你可以通过在 Render选项卡中启用 paint flashing来解决这些问题，并查看哪些元素触发了这些问题。

12、同样，Ctrl Shift P会弹出工具栏。

13、在 Rendering选项卡上启用重新绘制

14、既然上面讨论了渲染，那么让我们来看看如何调试 CSS动画。用 Ctrl Shift P打开工具菜单，输入“ animation”它将为你打开动画标签，这将记录任何发生在网站上的动画。你可以重播它们，看看它们的宽松程度，然后根据时间或持续时间调整：

15、我们经常需要与其他人分享截图来验证更改。如果你不得不重复多个步骤，这个任务可能会消耗时间：

16、这可以在 DevTools内部完成。你可以从整个页面、单个节点(被选中的节点)或视图中创建图像：

17、假设你正在调试一个问题，并且你的代码中有两个断点。你正在进行堆栈跟踪，你会发现堆栈信息中大多数来自核心框架文件，如 React或 jQuery。为了避免在调试器中包含这些核心文件，你可以对它们进行黑盒处理，这意味着 DevTools将跳过这些文件，以便你可以专注于自己的代码。

18、本地覆盖是我最喜欢的一个，我发现自己使用它越来越频繁。它是一个强大的工具，使你能够加载生产文件的本地副本，并使用它们来替代捆绑的副本。当一个问题只发生在特定的环境中而不能在本地复现时，这一点尤其有用。

19、你可以在“Source”选项卡下启用 Overrides（重写）。如果你没有看到 Overrides链接，点击 Page右侧的锯齿图标。你可以将漂亮的打印文件复制到你本地文件并对其进行扩展。重写将通过页面重新加载保持。

20、我发现自己一直在使用 Lighthouse面板，这是为了审计你的网站在各种指标：性能，PWA，可访问性，或搜索引擎优化。你还可以选择审计不同的设备以及模拟网络连接，它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits”选项卡下进入“灯塔”，如果你没有看到标签，只需点击锯齿符号来显示隐藏的标签。

21、生成报告后，可以将结果保存为 JSON文件，稍后导入以进行比较。

22、上面是必须知道的 10个 Chrome开发工具特性，它们帮助我简化了工作流程，并且在更短的时间内完成了更多的工作。

23、你每天使用的 Chrome开发者工具的功能是什么?请在评论中告诉我们。

24、 

25、作者简介：Ferenc Almasi，匈牙利前端开发者，热衷于开发和设计新的交互式应用程序。他还喜欢尝试新技术，创造简单而有吸引力的东西。

26、译者：明明如月，知名互联网公司 Java高级开发工程师，CSDN博客专家。

二、Core Web Vitals101

近几年来，好的用户体验已经是衡量一个网站是否是一个好网站的重要指标，优化用户体验的质量是任何网站长期成功的关键。无论您是Boss、BA，PO还是DEV，Web vital都可以帮助您量化站点的体验，并确定改进的机会。

Web vitals是一个由谷歌发起的，为网站的质量提供统一的指导(guideline)，这对于在Web上提供良好的用户体验至关重要。

Google提供了一系列的metrics来measure一个网站的性能，例如FCP， TTFP，TTI等等，同时也提供了一系列的工具来获取这些metrics的report。

Web vital倡议旨在简化景观，并帮助网站关注最重要的指标，即 Core Web vital。

Core web vital是web vital的子集，适用于所有的网页，应该由所有的网站所有者衡量，并将出现在所有的谷歌工具。每一个Core web vital都代表了用户体验的不同方面，在领域中是可测量的，并反映了以用户为中心的关键结果的真实体验。

组成Core web vitals的metrics是会随着时间的改变而改变的。但在2020年主要focus在用户体验的下面三个方面， loading, interactivity, and visual stability，他们分别用下面三个metric来度量

最大内容绘制(LCP)指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。

LCP之前的相关属性：诸如 load（加载）或 DOMContentLoaded（DOM内容加载完毕）这样的旧有指标并不是很好，因为这些指标不一定与用户在屏幕上看到的内容相对应。而像 First Contentful Paint首次内容绘制(FCP)这类以用户为中心的较新性能指标只会捕获加载体验最开始的部分。如果某个页面显示的是一段启动画面或加载指示，那么这些时刻与用户的关联性并不大。

我们以往推荐过一些性能指标，例如 First Meaningful Paint首次有效绘制(FMP)和 Speed Index速度指数(SI)（两个指标都包含在灯塔工具中），这些指标有助于捕获到更多初始绘制后的加载体验，但这些指标十分复杂、难以解释，而且常常出错，也就意味着这些指标仍然无法识别出页面主要内容加载完毕的时间点。

FID测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间

一般来说，发生输入延迟（又称输入延时）是因为浏览器的主线程正忙着执行其他工作，所以还不能响应用户。可能导致这种情况发生的一种常见原因是浏览器正忙于解析和执行由您的应用程序加载的大型 JavaScript文件。在此过程中，浏览器不能运行任何事件侦听器，因为正在加载的 JavaScript可能会让浏览器去执行其他工作。

CLS测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数

每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了布局偏移

一连串的布局偏移，也叫会话窗口是指一个或多个快速连续发生的单次布局偏移，每次偏移相隔的时间少于 1秒，且整个窗口的最大持续时长为 5秒（ ）

最大的一连串是指窗口内所有布局偏移累计分数最大的会话窗口

页面内容的意外移动通常是由于异步加载资源，或者动态添加 DOM元素到页面现有内容的上方。罪魁祸首可能是未知尺寸的图像或视频、实际渲染后比后备字体更大或更小的字体，或者是动态调整自身大小的第三方广告或小组件。

浏览器在计算布局偏移分数时，会查看可视区域大小和两个已渲染帧之间的可视区域中不稳定元素的位移。布局偏移分数是该位移的两个度量的乘积：影响分数和距离分数（两者定义如下）。

布局偏移分数=影响分数*距离分数

影响分数测量不稳定元素对两帧之间的可视区域产生的影响，前一帧和当前帧的所有不稳定元素的可见区域集合（占总可视区域的部分）就是当前帧的影响分数

布局偏移分数计算公式的另一部分测量不稳定元素相对于可视区域位移的距离。距离分数指的是任何不稳定元素在一帧中位移的最大距离（水平或垂直）除以可视区域的最大尺寸维度（宽度或高度，以较大者为准）。

在上方的示例中，最大的可视区域尺寸维度是高度，不稳定元素的位移距离为可视区域高度的 25%，因此距离分数为 0.25。

所以，在这个示例中，影响分数是0.75，距离分数是0.25，所以布局偏移分数是0.75* 0.25= 0.1875。

Core Web Vitals是一组度量Web上真实用户体验的重要方面的字段指标。它包括三个指标，以及每个指标的目标阈值，这有助于开发人员定性地了解他们的站点体验是“好”、“需要改进”还是“差”。

此外，为了对页面或站点的总体性能进行分类，我们使用该页面或站点的所有页面浏览量的第75百分位数值。换句话说，如果一个网站至少有75%的页面浏览量达到了“好”的阈值，那么这个网站就被归类为具有“好”性能的网站。相反，如果至少有25%的页面浏览量达到“差”的阈值，该网站就被归类为“差”的表现。例如，一个2秒的75百分位LCP被归类为“好”，而一个5秒的75百分位LCP被归类为“差”。

For the detail of how to define the target of thresholds, pls have a look at:

Google believe Core Web vital是对每一个网站都特别特别的重要，所以Google把Core web vital metrics集成到了很多的流行的自己的工具上

Pagespeed insights：

Chrome UX report：

Javascript API， 官方提供了很多的API可以获取Core web vitals不同指标的值

OK，本文到此结束，希望对大家有所帮助。