1. 打开开发者工具
- 在Chrome浏览器中，点击右上角三点图标→选择“更多工具”→点击“开发者工具”（或直接按`Ctrl+Shift+I`/`Cmd+Option+I`快捷键）→进入主界面。
2. 核心监控面板功能
- Network面板：查看网页加载的所有资源（如HTML、CSS、图片等）的请求时间、文件大小、HTTP状态码→分析网络请求是否延迟或失败→优化建议：压缩资源、合并文件、启用缓存。
- Performance面板：录制页面性能轨迹→生成报告，显示首次内容绘制（FCP）、最大内容绘制（LCP）等关键指标→定位渲染卡顿、脚本执行过长等问题→优化建议：减少主线程任务、优化动画帧率。
- Memory面板：检测内存使用情况→捕捉堆快照，分析内存泄漏原因→优化建议：及时清理无用对象、避免循环引用。
3. 实时性能数据查看
- FPS（帧率）与CPU占用：在Performance面板中，播放录制的性能轨迹→查看“Frames”区域→若帧率低于60FPS或CPU出现长时间高占用，需优化动画或脚本逻辑。
- 布局与绘制时间：在“Summary”视图中找到“Main”线程→展开后查看“Layout”和“Paint”事件→若耗时过长，需减少DOM操作或简化样式计算。
4. 网络请求优化工具
- 拦截并修改请求：在Network面板中，右键点击资源→选择“Block request domain”可禁止指定域名的请求→用于测试资源加载对性能的影响。
- 模拟慢速网络：点击Network面板中的“Online”标签→选择“Slow 3G”等预设→观察页面在低网速下的加载表现→针对性优化资源加载顺序。
5. 自动化性能报告
- 使用Lighthouse：在开发者工具中点击“Audits”面板→生成性能评分报告→查看核心指标（如LCP、FID）并获取优化建议→支持导出为HTML文件。
- 集成Chrome UX Metrics：通过`https://chrome.google.com/webstore/detail/user-experience-monitor/amnjdfllcokkffkcfphldkogmjolhgl`安装扩展→实时监控用户访问时的真实性能数据（如布局偏移率、用户可交互时间）。