教程详情
1. 快捷键启动：
- 按 `Ctrl + Shift + I`（Windows）或 `Cmd + Opt + I`（Mac）直接打开开发者工具。
- 右键点击页面元素，选择“检查”可定位到具体HTML标签。
2. 移动端模拟调试：
- 按 `Ctrl + Shift + M`（Windows）或 `Cmd + Shift + M`（Mac）切换至手机视图，测试响应式布局。
- 使用 `Ctrl + 0` 快速缩放页面，观察不同分辨率下的显示效果。
二、元素定位与修改
1. 精准选取页面元素：
- 在开发者工具中，按 `Ctrl + F`（Windows）或 `Cmd + F`（Mac）打开搜索框，输入关键词（如按钮ID或文本内容）快速定位元素。
- 按住 `Ctrl`（Windows）或 `Cmd`（Mac）并点击元素，可跳转至HTML代码对应位置。
2. 实时修改样式与内容：
- 在“Elements”面板中，双击HTML标签或CSS属性直接编辑，页面实时生效。
- 右键元素选择“Break on” > “Attribute modifications”，调试属性变化时自动中断。
三、网络请求分析
1. 捕获网络请求：
- 打开开发者工具后自动进入“Network”标签，刷新页面可记录所有资源加载信息。
- 按 `Ctrl + R`（Windows）或 `Cmd + R`（Mac）快速刷新页面并重新抓取请求。
2. 筛选与排序请求：
- 在过滤栏输入关键词（如文件后缀 `.js` 或 `.png`）筛选特定类型资源。
- 点击“Size”或“Time”列标题，按文件大小或加载时间排序，快速找到性能瓶颈。
四、断点调试与日志输出
1. 设置JavaScript断点：
- 在“Sources”标签中找到脚本文件，点击行号设置断点，按 `F10` 逐行执行代码。
- 右键点击脚本名称，选择“Blackbox script”忽略第三方库，仅关注自定义代码。
2. 控制台日志调试：
- 使用 `console.log()` 在代码中插入日志，按 `Ctrl + Shift + J`（Windows）或 `Cmd + Opt + J`（Mac）打开控制台查看输出。
- 在控制台输入 `monitorEvents` 监听指定元素的事件触发情况。
五、性能优化与抓包
1. 录制性能轨迹：
- 在“Performance”标签中点击“Record”，模拟用户操作后停止录制，分析卡顿原因。
- 查看“Summary”面板中的FPS曲线和加载时间分布，优化关键渲染路径。
2. 抓包与数据修改：
- 在“Network”面板中找到请求，右键选择“Edit and resend”修改参数后重新发送。
- 使用“Preserve log”功能保留离线记录，便于后续分析或对比。
六、移动端远程调试
1. USB调试Android设备：
- 开启手机开发者模式，用USB连接电脑，在Chrome地址栏输入 `chrome://inspect`，选择设备后调试移动端页面。
- 在“Elements”面板中调整“Device mode”分辨率，模拟不同手机屏幕尺寸。
2. 扫码连接远程调试：
- 在电脑端生成二维码（`chrome://inspect/devices`），用手机扫描后即可同步调试。
