一、基础工具使用
1. 打开开发者工具：按F12或Ctrl+Shift+I快捷键→在右侧出现调试面板
2. 选择性能面板：点击Performance标签页→默认显示页面加载的概览图
3. 录制加载过程：点击开始录制按钮→刷新网页后自动生成性能报告
二、关键指标分析
1. 查看加载时间：在概览图中定位“First Contentful Paint”指标→检查首次内容渲染耗时
2. 分析脚本执行：展开Main线程部分→查看任务执行时间与分布情况
3. 检测资源加载：在Network面板筛选“Waterfall”视图→观察图片/脚本等资源的加载顺序
三、性能瓶颈定位
1. 查找长任务：在Performance面板使用“Long Task”筛选器→标记超过50ms的任务
2. 识别阻塞操作：通过Event Log查看JS执行时的阻塞事件→优化同步代码逻辑
3. 对比多版本数据：使用“Compare with previous recording”功能→分析不同版本间的差异点
四、内存管理优化
1. 监控内存使用：切换到Memory面板→记录堆快照并生成泄漏报告
2. 追踪对象生命周期：在Record Allocation Samples模式下→标记未释放的全局变量
3. 清理缓存数据：通过Application面板→手动清除IndexedDB和LocalStorage残留数据
五、网络请求调试
1. 模拟弱网环境：在Network面板设置限速→测试2G/3G网络下的加载表现
2. 拦截API请求：使用扩展商店中的Request Blocker→屏蔽特定接口调用
3. 优化静态资源：在Size列排序资源文件→对大体积图片进行WebP格式转换
六、可视化辅助功能
1. 启用布局轮廓：在Elements面板勾选Show Layout Borders→显示CSS网格线
2. 添加性能标记：使用JavaScript的`performance.mark()`方法→在关键代码处打点
3. 生成报告文档：通过Save As Cumulative Layout Shift→导出可分享的性能分析PDF
