1. 打开开发者工具
- 按`F12`（Windows/Linux）或`Cmd+Option+I`（Mac）→快速调出开发者工具→默认显示“元素”面板。
- 通过菜单进入：点击右上角三个点→选择“更多工具”→点击“开发者工具”→界面与快捷键一致。
2. 核心功能与使用场景
- 性能分析（Performance面板）
- 点击“录制”按钮（或按`Ctrl+E`）→自动刷新页面并记录加载过程→生成时间线图表→查看资源加载顺序、耗时分布（如脚本执行、样式渲染）。
- 重点优化长任务：在“Bottom-Up”视图中找到耗时较长的函数→展开详情→针对性优化代码或资源加载顺序。
- 网络请求监控（Network面板）
- 刷新页面后→自动记录所有网络请求→按类型筛选（文档、图片、脚本等）→查看每个资源的加载时间、状态码（如404错误）。
- 模拟慢速网络：点击“Throttling”下拉框→选择“Regular 3G”或自定义带宽→测试低网速下页面表现→找出加载瓶颈。
- 内存泄漏检测（Memory面板）
- 点击“录制”按钮→操作页面后再次点击“停止”→生成堆快照→对比多次快照→识别未释放的内存对象（如全局变量、事件监听器）。
3. 其他实用操作
- 实时修改代码：在“元素”面板中→右键点击HTML或CSS代码→选择“Edit as HTML”或“Edit as CSS”→直接修改并观察效果→适合快速调试样式问题。
- 断点调试JavaScript：在“源代码”面板→找到脚本文件→点击行号设置断点→使用“Step over/into”功能逐行执行代码→观察变量变化和调用逻辑。
- 模拟移动设备：点击工具栏的“切换设备模式”图标→选择手机或平板型号→自动调整视口尺寸→测试响应式布局和触屏交互。
4. 其他操作
- 清除缓存数据：按`Ctrl+Shift+Del`（Windows/Linux）或`Cmd+Shift+Del`（Mac）→勾选“缓存图像和文件”→点击“清除数据”→避免旧资源干扰测试结果。
- 禁用扩展干扰：进入`chrome://extensions/`页面→关闭所有扩展→排除插件对性能的影响（如广告拦截器可能阻止部分脚本加载）。
