一、基础调试设置
1. 打开开发者工具：按 `Ctrl+Shift+I`（Mac用 `Cmd+Opt+I`） → 进入调试面板 → 查看控制台日志。
2. 启用错误追踪：在控制台输入 `console.error = (msg) => { console.log(`Error: ${msg}`); }` → 高亮显示错误信息 → 快速定位问题。
3. 过滤无关日志：点击控制台右侧的“筛选”按钮 → 仅保留红色错误提示 → 避免警告信息干扰。
二、断点调试方法
1. 行级断点设置：在源码面板找到报错行号 → 点击行号区域 → 添加断点 → 逐步执行代码。
2. 条件断点使用：右键点击断点 → 设置触发条件（如 `x > 10`） → 仅在满足条件时暂停 → 精准捕捉异常。
3. 事件监听断点：在“Sources”面板的“Event Listeners”选项卡 → 选择 `click` 事件 → 捕获点击相关错误。
三、网络请求排查
1. 监控XHR请求：在“Network”面板过滤 `xhr` → 检查跨域请求状态码 → 确认接口返回数据。
2. 模拟网络延迟：在“Network”面板设置 throttling 为 `Slow 3G` → 观察加载过程 → 复现慢速环境下的错误。
3. 重播请求测试：右键点击失败请求 → 选择“Replay XHR” → 重复发送请求 → 验证问题是否持续存在。
四、内存泄漏检测
1. 快照对比分析：在“Memory”面板点击“Heap snapshot” → 执行两次快照 → 对比对象变化 → 发现未释放资源。
2. 监听事件清理：在控制台输入 `getEventListeners(window)` → 检查冗余事件绑定 → 手动移除无用监听器。
3. 全局变量检测：使用 `console.dir(window)` → 查看全局作用域变量 → 清理未定义或重复声明的对象。
五、移动端调试方案
1. 模拟触屏操作：在“Elements”面板启用“Touch emulation” → 测试点击和滑动事件 → 验证移动端交互逻辑。
2. 远程调试设备：通过USB连接安卓手机 → 在Chrome输入 `chrome://inspect/` → 实时调试真机脚本。
3. 分辨率适配检查：在开发者工具设置不同屏幕尺寸 → 检查响应式布局代码 → 防止元素错位导致报错。