Core Web Vitals Visualizer

可视化并了解任何网页的核心网络生命

RUM Visualizer 可以可视化任何网页的核心网络生命。

此扩展将可视化任何网页的 Core Web Vitals。它包括最大内容绘制 (LCP)、到下一个绘制的交互 (INP)、累积布局移位 (CLS)、第一个内容绘制 (FCP)、到下一个绘制的交互 (INP) 和第一个字节的时间 (TTFB)。直接访问 Core Web Vitals 历史数据！

特征：

液晶聚合物

- 获取LCP RUM值

- 可视化 LCP。

- 将 LCP 分解为第一个字节的时间、资源加载延迟、资源加载时间和元素渲染延迟

内啡肽

- 获取 INP RUM 值

- 可视化 INP。

- INP 细分

CLS

- 获取 CLS RUM 值

- 显示 CLS 细分

- 可视化 CLS

- 动画 CLS。

氟氯化石蜡

- 获取 FCP RUM 值

- 分解FCP

TTFB

- 获取 TTFB RUM 值

- 分解 TTFB

调试方便：

- 模拟慢速网络条件 (3g)。

- 启用或禁用当前页面的缓存。

变化：

1.17 UI 修复的小逻辑

1.16 添加了内容审核、重构实验和较小的布局改进

1.15 小修复

1.14 添加了 Treo.sh 链接，删除了废弃的 Looker Studio 报告，添加了关键的 lcp 子部分、rtt。导航类型和 lcp 类型

1.13 添加了 CrUX Vis 链接，更好地应对丢失的 CrUX 数据和小的大修复。

1.12 更好的消息传递+改进的元素计时，更好的控制台日志记录

1.11 删除了 FID，Web Vitals 现在基于即将推出的 Web Vitals 库 v4、新的细分详细信息、改进的 CSS 可视化、小错误修复、代码清理。

1.10 将 INP 提升为核心 Web Vitals，并将 FID 降级为感兴趣的指标！

1.9 CrUX 历史记录 API，小修复，更多 CLS 信息

1.8 更好的指标更新、更好的日志记录、微小的改进

1.7 将 INP 期间发生的并可能干扰 INP 的事件、长任务和长动画帧记录到控制台。

1.6 更好的 INP 分解，较小的代码改进。

1.5 代码改进、布局改进、添加页面实验（延迟 javascript、禁用 javascript、禁用第三方脚本、延迟加载图像、延迟背景图像和禁用 webfonts）。

1.4 左侧菜单，有关渲染阻塞资源的更多信息以及 PSI、CrUX 仪表板和 W3C 的直接链接。

1.2 添加了大量 LCP 信息，如预加载、获取优先级、渲染故障、第一方或第三方等。

第一步：下载Core Web Vitals Visualizer安装扩展

第二步：下载下来的扩展解压到你想放的文件夹里

比如我解压到extend文件夹

打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；

再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”

点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。

第三步：把crx后缀改为zip，再进行解压

如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：

找到文件夹顶部，点击查看

点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可

这样你就能看到解压好的扩展名：.crx

解压的扩展名为.crx

把.crx改为：zip

然后再用解压工具再解压一遍，即可得到扩展的全部文件

然后再谷歌浏览器插件页面选择：加载已解压的扩展程序

这样就安装成功了

友情提醒：

其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！