此扩展测量 Core Web Vitals，提供有关加载、交互性和布局转换指标的即时反馈。它与 Chrome 衡量这些指标并报告给其他 Google 工具（例如 Chrome 用户体验报告、页面速度洞察、搜索控制台）的方式一致。
插件简介
Web Vitals 是在 Web (https://web.dev/vitals) 上提供出色 UX 的关键质量信号。此扩展测量 Core Web Vitals，提供有关加载、交互性和布局转换指标的即时反馈
插件安装
方法一：.crx文件格式插件安装
1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。
2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/
3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。
4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去，但是谷歌考虑用户的安全隐私，在用户松开鼠标后还会给予用户一个确认安装的提示。
5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去，安装成功以后该插件会立即显示在浏览器右上角（如果有插件按钮的话），如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件。
方法二：文件夹格式插件安装
1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。
2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序。
3.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。
注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决
插件功能介绍
1) Ambient Badge - 这有助于检查页面是否通过了 Core Web Vitals 阈值。
安装后，扩展程序将显示禁用状态徽章图标，直到您导航到 URL。此时，它将根据 URL 是否通过 Core Web Vitals 指标阈值将标志更新为绿色或红色。
徽章有多种状态：
* 禁用 - 灰色
* 通过 - 绿色
* 一个或多个指标失败 - 红色
如果一个或多个指标失败，徽章将动画显示这些指标的值。
2）弹出窗口中的详细钻取
单击环境标志图标将允许您深入了解各个指标值。在此模式下，扩展程序还将说明指标值是否可能更改或需要用户操作。
例如，First Input Delay 需要与页面进行真正的交互（例如单击/点击），并且在出现这种情况之前将处于等待输入状态。我们建议查阅有关 LCP、CLS 和 FID 的 web.dev 文档，以了解指标值何时确定。
从版本 1.0.0 开始，弹出窗口通过 Chrome UX Report (CrUX) API 将您的本地 Core Web Vitals 体验与来自现场的真实用户数据相结合。这种集成为您提供上下文洞察，帮助您了解您的个人体验与同一页面上的其他桌面用户的相似程度。如果需要，我们还添加了一个新选项“将本地体验与电话现场数据进行比较”。请注意，某些页面可能无法使用 CrUX 数据，在这种情况下，我们会尝试为整个源加载字段数据。
3）HUD叠加
叠加层会显示一个平视显示器 (HUD)，它叠加在您的页面上。如果您需要在开发期间持续查看 Core Web Vitals 指标，这将非常有用。要启用覆盖：
右键单击环境标志并转到选项。
选中显示 HUD 覆盖并单击“保存”
重新加载要测试的 URL 的选项卡。现在应该存在叠加层。
插件使用方法
1、Google 提供了一个小而美 npm 包：web-vitals，
2、在最近的 create-react-app 脚手架已经包含 web-vitals，主要代码是：
3、如果你要测量任何受支持的指标，只需将函数传递到 index.js 中的 reportWebvitals 函数中：
4、当指标的最终值在页面上完成计算时，将触发此函数。我们就可以通过它将结果记录到控制台或发送到特定端点。
扫码关注公众号，发【识别码】获取
