用Web Vitals扩展可实时监控加载中CWV指标：?/?/?图标动态反映LCP、CLS、INP状态，点击查看实测值与时间戳；chrome://net-internals可捕获原始事件流，精准定位LCP最后一次触发及累加CLS；Performance面板支持录制分析，搜索LCP并查看Layout Shifts详情以优化。
你想在谷歌浏览器中实时查看当前网页加载过程中的Core Web Vitals指标，包括LCP何时完成、CLS是否正在发生、INP响应是否卡顿，而不是等页面完全加载后看一份静态报告。
用Web Vitals扩展实时监控页面加载过程
这是唯一能真正“边加载边看”CWV变化的方式。扩展会在页面渲染过程中持续采集数据，并在工具栏图标上实时刷新颜色与数值。
打开Chrome浏览器，访问Chrome网上应用店 → 搜索“Web Vitals” → 点击“添加至Chrome”按钮 → 在弹出确认框中点击“添加扩展”。
安装完成后，访问任意网页，观察右上角工具栏：图标变为?表示LCP＜2.5s、CLS＜0.1、INP＜200ms；?或?出现时，说明某项指标已偏离健康阈值。
点击该图标，弹出面板中会显示三项指标的**当前实测值+评级+本地测量时间戳**，所有数据均来自本次页面生命周期，非模拟环境。
通过chrome://net-internals捕获原始CWV事件流
适合验证LCP是否被误判、排查CLS突增源头，数据来自Chrome底层网络与渲染事件日志，毫秒级精确。
确保目标网页处于活跃标签页 → 地址栏输入chrome://net-internals/#events并回车。
左侧过滤器输入loading → 右侧事件列表将滚动更新，实时出现largestContentfulPaint、layoutShift、interaction三类条目。
当页面还在加载时，largestContentfulPaint事件可能多次触发——【只有最后一次的startTime才代表真正的LCP】，此前均为预估值，切勿提前记录。
对每条layoutShift事件点开查看详情 → 复制其value字段（如0.042）→ 手动累加所有value，所得总和即为当前会话CLS值，该值随布局偏移持续增长。
用Performance面板录制并定位LCP/CLS关键帧
当你需要知道“为什么LCP这么慢”或“哪次重排导致CLS飙升”，Performance面板能精准锁定资源与时间点。
第一步：打开目标网页 → 按F12打开开发者工具 → 切换到Performance标签页。
第二步：勾选Network、Screenshots、Main、Rendering → 点击左上角圆形录制按钮 → 刷新页面 → 等待页面完全交互就绪后再次点击停止录制。
第三步：在下方火焰图区域拖动鼠标选择时间范围 → 按Ctrl+F（Windows）或Cmd+F（macOS）调出搜索框 → 输入LCP，面板自动高亮标记LCP发生的帧节点。
第四步：在底部Summary面板中展开Layout Shifts分组 → 查看每次布局偏移发生的具体时间、影响元素及位移分数，【位移分数＞0.01的条目需优先优化】。
