DevTools Web Vitals 调试
用 Performance 与 Lighthouse 联动观察 LCP、CLS、INP 等 Web Vitals 在实验室环境下的问题发生位置。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Performance MOC
- 前置概念: 性能指标体系, Lighthouse
- 并列概念: Layout Shift 调试, 长任务调试
- 关系笔记: Performance 面板
DevTools Web Vitals 调试
一句话定义
Web Vitals 调试是在 DevTools 里把抽象指标落回具体时间线和具体页面行为。
核心内容
常见调试对象
- LCP：最大内容元素什么时候真正出现
- CLS：哪次布局偏移拉高了分数
- INP：哪次交互被长任务拖慢
DevTools 里的常见入口
- Performance 录制中的相关轨道和标记
- Lighthouse 报告中的问题提示
- Screenshots 与主线程任务的对应关系
边界与易混淆点
- DevTools 给的是实验室视角，不是所有真实用户场景
- 指标本身不是根因，真正修复仍要回到资源、渲染、脚本或结构层