debug_console.exe

$ find_bug()

🔍 正在分析代码...

✅ 发现 3 个潜在问题

$ fix_all()

✨ 调试完成!

代码调试经验分享

从入门到精通,掌握系统化调试方法,让 bug 无处遁形

调试的五大黄金法则

🐛

复现问题

确保能稳定复现 bug 是解决它的第一步

  • 记录操作步骤
  • 准备测试数据
  • 隔离问题环境
🔬

定位源头

使用科学方法缩小问题范围

  • 二分法定位
  • 打印关键变量
  • 使用断点调试
🧩

分析原因

理解为什么会出现这个问题

  • 查看错误日志
  • 检查边界条件
  • 审视数据流
🔧

实施修复

选择最优方案解决问题

  • 最小化改动
  • 考虑副作用
  • 编写测试用例
📝

总结复盘

避免同类问题再次发生

  • 记录解决方案
  • 更新文档注释
  • 分享团队经验

常用调试工具

浏览器

Chrome DevTools

前端开发者的瑞士军刀

Elements Console Sources Network
IDE

VS Code Debugger

轻量强大的集成调试器

断点 单步执行 变量监视 调用栈
后端

Postman

API 调试必备神器

请求测试 环境变量 自动化 协作
日志

Logging

程序运行的黑匣子

分级日志 上下文信息 性能追踪 异常捕获

经典调试案例解析

困难

内存泄漏排查

现象:应用运行一段时间后越来越慢,最终崩溃

排查过程:

  1. 使用 Performance 面板录制内存变化
  2. 对比多个时间点的 Heap Snapshot
  3. 发现事件监听器未正确清理

解决方案:在组件销毁时移除所有事件监听

中等

异步时序问题

现象:数据有时加载成功,有时为空

排查过程:

  1. 添加详细日志追踪执行顺序
  2. 发现 race condition 竞争条件
  3. 确认是 Promise 链处理不当

解决方案:使用 async/await 重构,确保执行顺序

简单

空指针异常

现象:页面随机报错 Cannot read property of undefined

排查过程:

  1. 查看堆栈定位出错位置
  2. 检查数据来源和流转
  3. 发现接口返回数据结构变化

解决方案:添加可选链操作符和默认值处理

调试小贴士

01

善用 console 的各种方法

除了 log,还有 table、group、time 等实用方法

02

条件断点比普通断点更高效

只在特定条件下中断,节省大量时间

03

学会阅读错误堆栈

堆栈信息是定位问题的第一手资料

04

橡皮鸭调试法

向别人(或鸭子)解释代码,往往能自己发现问题

05

保持代码可调试性

写代码时就考虑如何调试,事半功倍

06

定期清理调试代码

临时的 console.log 记得删除,保持代码整洁