1. 性能优化：定位渲染卡顿
- 打开方式：按`Ctrl+Shift+P`调出命令菜单→输入“Rendering”→选择“Show FPS Meter”启用帧率显示。
- 操作步骤：在页面拖动滚动条→观察FPS数值变化→若帧率低于60→点击“Paint flashing”高亮重绘区域→发现某动画元素频繁触发布局（如固定定位的广告栏）。
- 解决方案：在“Styles”面板修改该元素CSS→添加`will-change: transform;`属性→强制启用GPU渲染→卡顿消失。
2. 网络调试：模拟弱网环境
- 设置方法：进入“Network”面板→点击“Online”按钮→选择“Slow 3G”→刷新电商网站首页。
- 观察结果：主图加载延迟5秒→检查“Waterfall”图表→发现CSS文件未压缩（大小4.2MB）→图片未设置`loading=lazy`属性。
- 优化手段：在“Sources”面板定位CSS文件→压缩后替换→修改img标签添加懒加载属性→弱网下首屏加载时间从8秒降至2.3秒。
3. 源码篡改：测试紧急修复
- 启用编辑功能：在“Elements”面板右键点击缺陷代码→选择“Edit as HTML”→直接修改支付按钮的禁用逻辑（将`disabled`属性注释）。
- 动态验证效果：保存后刷新页面→测试支付流程正常→无需重启服务器即可验证前端修复方案（适合快速响应线上事故）。
- 持久化处理：通过“Workspaces”绑定本地代码库→同步修改到版本控制系统（需安装Git插件）。
4. 内存泄漏检测：长连接页面监控
- 抓取快照：进入“Memory”面板→点击“Heap snapshot”→两次采样间隔30分钟（模拟在线聊天室长时间运行）。
- 分析结果：对比发现`Map`对象持续增长→展开详情→定位到未清理的临时缓存数据（由第三方SDK引起）。
- 处理方式：在“Console”面板执行`window.webkit.messageEvents.clear()`→强制清除遗留事件监听器→内存占用下降70%。
5. 自动化测试：录制脚本回放
- 录制流程：进入“Puppeteer”环境→点击“Recorder”→操作页面登录→生成POJSON格式脚本。
- 调试错误：回放时提示元素定位失败→在“Sources”面板检查XPath→发现动态ID变化→修改脚本为CSS选择器`[data-testid=submit]`。
- 持续集成：将脚本导出至Jenkins任务→配置Chrome Headless模式→实现每日自动化测试（需安装Chrome扩展“Puppeteer Recorder”）。