Chrome DevTools 推出全新的 Performance 面板！

文章预览

大家好，我是 ConardLi 。 最近， 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）: 从你 ………………………………