一、打开开发者工具
1. 快捷键启动：按下`Ctrl+Shift+I`（Windows）或`Cmd+Opt+I`（Mac）→直接打开独立窗口。
2. 菜单入口：点击浏览器右上角三个点→选择“更多工具”→点击“开发者工具”。
3. 右键快捷方式：在网页空白处右键→选择“检查”→自动定位到当前元素并高亮显示。
二、核心功能面板操作
1. Elements面板：
- 点击“元素”标签→展开HTML结构树→鼠标悬停可预览修改效果→双击文本直接编辑内容。
- 右键点击元素→选择“Edit as HTML”→快速修改属性值（如替换图片链接）。
- 按`Ctrl+F`输入选择器（如`.class-name`）→精准定位页面元素。
2. Console面板：
- 输入`document.title`查看标题→执行`document.body.style.backgroundColor = 'red'`修改背景色。
- 按`Tab`键自动补全代码→使用箭头函数（如`() => console.log('test')`）简化调试。
- 右键点击错误信息→选择“Show in Source”→直接跳转到引发问题的代码行。
3. Network面板：
- 刷新页面后自动记录所有请求→点击“Waterfall”图表分析加载顺序。
- 筛选XHR请求→点击具体条目→查看返回数据（如API响应JSON）。
- 长按某条请求→拖动排序→模拟不同加载顺序对页面的影响。
三、高级调试技巧
1. 设备模式模拟：
- 点击“Toggle device toolbar”图标→选择手机型号（如iPhone 15）→实时预览移动端效果。
- 在“Styles”面板添加媒体查询（如`@media (max-width: 768px)`）→测试响应式设计。
- 开启“Paint flashing”→观察重绘区域→优化渲染性能。
2. Performance分析：
- 点击“Record”按钮→执行页面操作→停止录制→查看帧速率（FPS）和长任务。
- 勾选“Screenshots”选项→生成性能报告时自动截图关键节点。
- 导出JSON格式分析报告→与团队成员共享性能优化数据。
3. Sources面板调试：
- 设置断点：点击行号→选择“Pause”→在代码执行到此处时自动暂停。
- 使用`debugger`语句插入代码→手动触发断点→逐步执行（Step over/Into）。
- 监控变量：在“Scope”面板查看当前作用域→右键点击变量→选择“Add to watch”。
四、实用快捷键与命令
1. 快速切换面板：
- `Ctrl+1`~`Ctrl+9`依次激活Elements到Console面板。
- `Escape`键隐藏侧边栏→扩大代码编辑区视野。
- `F8`快速触发断点（需先在代码中设置）。
2. 命令菜单：
- 按`Ctrl+Shift+P`（Windows）或`Cmd+Opt+P`（Mac）→输入命令（如“Capture full size screenshot”）。
- 输入`show rendering`→强制显示布局细节（如Flexbox对齐方式）。
- 搜索“clear cache”→一键清除缓存和Cookie。
五、自定义配置与扩展
1. 保存工作空间：
- 在面板右下角点击“三个点”→选择“Save Workspace”→命名配置（如“Mobile Debug”）。
- 下次启动时从右上角下拉菜单选择保存的配置→恢复自定义布局。
- 导出配置为JSON文件→分享给团队其他成员。
2. 安装扩展插件：
- 访问Chrome应用商店→搜索“DevTools extensions”→安装如“Web Vitals”或“Pesticide”等工具。
- 在设置中启用“Custom scripts”→注入自定义JS代码（如自动屏蔽广告元素）。
- 通过`chrome://inspect/extensions`管理已安装的开发者工具扩展。