debugging

name	debugging
description	系统化调试方法论，快速定位和修复问题

调试技能

触发条件

• 遇到 bug
• 测试失败
• 行为不符合预期
• 性能问题

调试流程

第一步：复现

1. 确认可以稳定复现
2. 记录复现步骤
3. 确认影响范围

第二步：缩小范围

1. 二分法：注释一半代码，看问题是否还在
2. 日志法：在关键点加日志
3. 断点法：使用 debugger 逐步执行
4. 对比法：与正常工作的代码对比

第三步：定位根因

问自己：

• 最近改了什么？
• 什么时候开始出问题？
• 有没有错误信息？
• 是环境问题还是代码问题？

第四步：修复

1. 先写失败的测试（复现 bug）
2. 修复代码
3. 确认测试通过
4. 检查是否引入新问题

第五步：验证

1. 运行完整测试套件
2. 手动验证修复
3. 检查相关功能

常见问题排查

前端

• 白屏：检查控制台错误、检查路由
• 数据不显示：检查网络请求、检查状态管理
• 样式问题：检查 CSS 优先级、检查响应式
• 性能问题：检查重渲染、检查大列表

后端

• 500 错误：检查日志、检查异常处理
• 数据库错误：检查 SQL、检查连接池
• 认证失败：检查 Token、检查中间件
• 性能问题：检查 N+1 查询、检查索引

环境

• 依赖问题：删除 node_modules 重装
• 版本问题：检查 Node/npm 版本
• 权限问题：检查文件权限、检查 API 权限
• 网络问题：检查代理、检查 DNS

调试工具

前端

• Chrome DevTools（Elements, Console, Network, Performance）
• React DevTools
• Reactotron

后端

• Node.js Inspector
• ndb
• clinic.js（性能分析）

通用

• console.log / console.table / console.time
• debugger 语句
• 断点

调试原则

• 先理解，再修复
• 一次只改一个东西
• 修复后写测试防止回归
• 不要假设，要验证
• 记录问题和解决方案