主要观点总结
本文介绍了Chrome DevTools Performance面板的全新改版，新面板功能的易用性得到了全面提升，并分为两个主要组成部分。新面板能够显示Core Web Vitals Data的实验数据和现场数据，包括LCP、CLS和INP等指标。除此之外，还提供友好的解释和链接到对理解性能指标很重要的元素，如LCP元素和INP元素。更新后的Performance面板还包括控件如开始新的录制、调节CPU和网络条件等。目前新面板仍然处于实验阶段，可以在Chrome Canary中通过特定配置启用。
关键观点总结
关键观点1: 新版的Chrome DevTools Performance面板提升功能的易用性。
新版Performance面板分为landing页和侧边栏两部分，landing页展示Core Web Vitals的实验和现场指标，侧边栏提供其他补充信息。
关键观点2: 新面板能够显示Core Web Vitals Data的实验数据和现场数据。
实验数据是从本地浏览会话收集的性能指标，而现场数据则来自Chrome用户体验报告，代表真实的用户体验。
关键观点3: 新面板提供友好的解释，并链接到对理解性能指标很重要的元素。
性能面板不仅提供原始指标，还有友好的解释，并可以链接到影响性能指标的关键元素，如LCP元素和INP元素。
关键观点4: 新面板具有多种实用控件。
包括开始新的录制、调节CPU和网络条件等控件，可以模拟真实的用户体验。
关键观点5: 新面板目前仍处于实验阶段。
可以在Chrome Canary中通过特定配置启用，并且可能会有进一步的更新和改进。
文章预览
大家好，我是 ss h 。 最近， Chrome 的 DevTools Performance 面板迎来了全新改版，功能的易用性得到了全面提升。新的 Performance 面板分为两个主要组成部分： landing 页：显示 Core Web Vitals 的实验和现场指标： 还不了解 Core Web Vitals 的同学可以看我之前这篇文章： 解读新一代 Web 性能体验和质量指标 侧边栏（可以在录制后打开）：提供其他补充信息，例如 LCP 加载阶段： 下面是 5 个具体模块： Core Web Vitals Data : LCP、CLS 和 INP 的实验数据(Lab Data)和现场数据(Field Data) CrUX Data Settings : 自定义 Chrome 用户体验报告中的现场数据 INP Interaction Element : 与之交互以触发 INP 的元素 Recording Settings : 控制 CPU 和网络条件 Recording Controls : 开始录制 新的 Performance 面板的一个突出特点是它能够显示 Core Web Vitals Data 的实验数据和现场数据： 实验数据（Lab Data）: 从你的
………………………………
