Chrome浏览器可通过四种原生方式获取Core Web Vitals指标：一、用Lighthouse面板运行性能审计；二、通过chrome://net-internals实时捕获原始CWV事件；三、用Performance面板录制并筛选LCP/CLS关键帧；四、在Console中调用Web Vitals API编程读取真实用户数据。
如果您希望评估网站在用户实际访问过程中的加载性能、交互响应和视觉稳定性，谷歌浏览器提供了直接集成的开发者工具来分析Core Web Vitals（CWV）指标。以下是利用Chrome浏览器原生能力获取并解读LCP、INP（取代FID）、CLS三项核心指标的具体操作路径：
一、使用Chrome DevTools的Lighthouse面板运行CWV审计
Lighthouse是Chrome内置的开源网页质量审计工具，可模拟真实设备环境生成包含CWV在内的多维报告。该方式无需部署代码或依赖第三方服务，适合单页快速诊断。
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)、Interaction to Next Paint (INP)和Cumulative Layout Shift (CLS)的实测数值及评分图标。
二、通过chrome://net-internals实时捕获CWV原始事件
Chrome 90+版本支持在页面加载过程中实时捕获CWV数据，该模式基于真实用户监控（RUM）原理，反映未经实验室干扰的实际体验，尤其适用于已上线页面的即时验证。
1、在目标网页处于活跃标签页时，于地址栏输入chrome://net-internals/#events并回车。
2、在左侧过滤器中输入loading，右侧事件列表将显示包括largestContentfulPaint、layoutShift和interaction（新版INP）在内的原始条目。
3、点击任意一条与largestContentfulPaint相关的事件，展开其详情，在params字段中定位startTime值，单位为毫秒。
4、对layoutShift条目执行相同操作，提取所有value字段并累加，获得当前会话的CLS总值。
三、启用Performance面板手动录制并筛选CWV相关性能条目
Chrome Performance面板提供毫秒级资源行为追踪能力，可精确识别影响LCP与CLS的关键帧和布局重排节点，适用于深度归因分析。
1、打开开发者工具后切换至Performance标签页。
2、点击左上角圆形录制按钮，或按Ctrl+E（Windows/Linux）/ Cmd+E（macOS）开始录制。
3、立即按F5刷新页面，或执行需分析的用户交互动作。
4、待页面稳定后，再次点击圆形按钮停止录制。
5、等待分析完成，在时间轴中查找标记为LargestContentfulPaint的绿色垂直线；在Main线程中展开Layout Shift事件组，确认各次位移的累积影响。
四、在Console中调用Web Vitals API直接读取指标
Web Vitals JavaScript API可在运行时以编程方式捕获LCP、INP、CLS等指标，结果反映真实用户设备上的实际测量值，不依赖模拟环境。
1、打开开发者工具，切换到Console标签页。
2、粘贴并执行以下代码：
function sendToAnalytics(metric) { console.log(metric.name, metric.value, metric.id); } import('https://unpkg.com/web-vitals@3.5.0/dist/web-vitals.js').then(({getLCP, getINP, getCLS}) => { getLCP(sendToAnalytics); getINP(sendToAnalytics); getCLS(sendToAnalytics); });
3、刷新页面，观察Console输出中每项指标的name、value和id字段。
4、注意：若出现模块导入失败，可改用CDN直链或本地引入web-vitals.min.js文件后再执行对应get函数。
