可通过chrome devtools四种原生方式获取core web vitals数据：一、lighthouse生成含lcp/cls的审计报告；二、chrome://net-internals捕获原始lcp/cls事件；三、performance面板录制分析lcp/cls帧数据；四、console调用web vitals api实时读取运行时指标。
如果您希望在谷歌浏览器中实时获取网页在真实用户访问过程中的加载性能、交互响应和视觉稳定性数据，可通过内置开发者工具直接查看Core Web Vitals（CWV）的核心运行指标，包括LCP与CLS等关键数值。以下是四种原生、无需安装插件即可执行的操作路径：
一、使用Lighthouse面板生成包含LCP与CLS的审计报告
Lighthouse是Chrome DevTools内置的自动化网页质量审计工具，可在模拟移动设备环境下运行完整CWV测试，输出含LCP、INP、CLS实测值及评分的结构化报告。
1、打开目标网页，按 F12 或 Ctrl+Shift+I（Windows/Linux）/ Cmd+Option+I（macOS） 启动开发者工具。
2、点击顶部导航栏的 Lighthouse 标签页。
3、在配置区域取消勾选除 Performance 外的所有类别，并确保 Mobile 设备类型被选中。
4、点击 Generate report 按钮，等待约30–60秒完成自动测试。
5、报告生成后，滚动至 Metrics 区域，定位 Largest Contentful Paint (LCP) 和 Cumulative Layout Shift (CLS) 两项指标的数值及对应颜色评分图标（绿色=GOOD，黄色=NEEDS IMPROVEMENT，红色=POOR）。
二、通过chrome://net-internals实时捕获LCP与CLS原始事件
该方式基于Chrome底层网络事件日志，可获取未经实验室环境干扰的真实加载与布局偏移时间戳，适用于已上线页面的即时验证。
1、确保目标网页处于活跃标签页，于地址栏输入 chrome://net-internals/#events 并回车。
2、在左侧过滤器中输入 loading，右侧事件列表将显示包含 largestContentfulPaint 和 layoutShift 的原始条目。
3、点击任意一条 largestContentfulPaint 事件，展开详情，在 params 字段中提取 startTime 值（单位：毫秒），即为LCP时间。
4、对所有 layoutShift 事件执行相同操作，提取每条记录中 value 字段数值，将全部 value 累加，所得总和即为当前会话的CLS值。
三、利用Performance面板录制并筛选LCP与CLS相关帧数据
Performance面板提供毫秒级渲染帧追踪能力，可精确识别影响LCP的关键资源加载节点及引发CLS的布局重排时刻，适用于深度归因分析。
1、打开开发者工具后切换至 Performance 标签页。
2、点击左上角圆形录制按钮，或按 Ctrl+E（Windows/Linux）/ Cmd+E（macOS） 开始录制。
3、刷新当前页面，待页面完全加载并完成至少一次用户交互（如点击、滚动）后，再次点击录制按钮停止。
4、在录制结果的 Timings 轨道中查找标记为 LargestContentfulPaint 的事件点，其时间戳即为LCP值。
5、在 Layout Shifts 子轨道中查看所有红色标记的布局偏移事件，每个事件的 value 即为单次偏移量，所有值累加即为CLS总值。
四、在Console中调用Web Vitals API直接读取运行时指标
该方法通过JavaScript API在页面上下文中实时获取LCP与CLS的最新计算结果，反映当前会话中已发生的实际体验数据，不依赖模拟或录制。
1、打开开发者工具，切换至 Console 面板。
2、粘贴并执行以下代码：
function getLCP() { const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('LCP:', entry.startTime, 'ms'); } }); observer.observe({entryTypes: ['largest-contentful-paint']}); } getLCP();
3、粘贴并执行以下代码：
function getCLS() { let clsValue = 0; const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { clsValue += entry.value; console.log('CLS so far:', clsValue); } }); observer.observe({entryTypes: ['layout-shift']}); } getCLS();
4、刷新页面后，控制台将实时打印每次LCP触发的时间戳及每次layout-shift事件带来的增量CLS值，最终累积值即为当前会话CLS。
