1. 基础调试工具使用
- 打开开发者工具：按`F12`或右键点击页面→选择“检查”→显示元素面板和控制台（如查看按钮点击事件）。
- 查看控制台日志：在“Console”标签页刷新页面→观察报错信息→定位JS代码错误位置（如`Uncaught TypeError`提示未定义变量）。
- 修改HTML元素：在“Elements”面板右键点击标签→选择“Edit as HTML”→直接调整网页结构（如修改表单提交地址）。
2. 断点与步进调试
- 设置断点：在“Sources”标签页点击行号→添加断点→页面执行到此处暂停（如调试登录验证逻辑）。
- 单步执行：点击“Step over”按钮→逐行执行代码→观察变量变化（如检查循环条件是否成立）。
- 查看调用栈：在断点暂停时→展开“Call Stack”列表→追踪函数调用路径（如找出事件触发源头）。
3. 网络请求分析
- 监控XHR请求：在“Network”标签页过滤“XHR”→查看Ajax请求状态码→诊断数据加载问题（如检查返回的JSON是否完整）。
- 修改请求参数：右键点击网络请求→选择“Copy as cURL”→手动编辑参数后重新发送（如测试API接口不同输入）。
- 模拟慢速网络：在“Network”面板点击“Online”→选择“Slow 3G”→观察页面响应变化（如优化图片加载策略）。
4. JavaScript调试技巧
- 临时插入语句：在“Console”输入`debugger;`→在代码中自动添加断点→快速验证修复方案（如调试动态生成的内容）。
- 监视变量值：在“Sources”面板右侧“Watch”字段输入变量名→实时跟踪数值变化（如监控购物车总价计算）。
- 捕获异常：在“Console”输入`window.onerror = function(msg){ console.log(msg); }`→记录所有未处理错误（如第三方脚本崩溃时）。
5. 移动端模拟与调试
- 切换设备模式：按`F12`打开开发者工具→点击“Toggle device toolbar”→选择手机型号→测试响应式布局（如检查导航栏折叠效果）。
- 模拟触摸事件：在“Console”输入`dispatchEvent(new Event('touchstart'))`→触发移动端交互（如测试滑动菜单）。
- 远程调试手机：用USB连接安卓设备→在Chrome输入`chrome://inspect/devices`→实时调试手机网页（如调整微信网页排版）。
6. 性能优化与分析
- 录制性能日志：在“Performance”标签页点击“Record”→操作页面后停止录制→查看FPS曲线和重绘原因（如动画卡顿诊断）。
- 强制垃圾回收：在“Console”输入`window.gc()`→手动触发内存清理→检测内存泄漏（如单页应用长期运行后）。
- 分析内存占用：在“Memory”标签页多次采样→对比堆快照→找出未释放的全局变量（如闭包导致的内存堆积）。