Back to Details

debugging

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Debugging and Troubleshooting

调试与故障排除

MCP Tools

MCP工具

Chrome DevTools (frontend debugging):
  • Capture console errors and network failures
  • Set breakpoints and inspect state
  • Profile performance bottlenecks
  • Capture screenshots of error states
Chrome DevTools（前端调试）：
  • 捕获控制台错误和网络请求失败
  • 设置断点并检查状态
  • 分析性能瓶颈
  • 捕获错误状态的截图

Workflows

工作流

  • Reproduce: Can you reliably reproduce the issue?
  • Isolate: What is the minimal code that exhibits the bug?
  • Trace: Use Grep to follow the call chain
  • Hypothesize: What could cause this behavior?
  • Test: Verify or disprove your hypothesis
  • Fix: Implement the solution
  • Verify: Confirm the fix and add regression test
  • 复现问题：能否稳定复现该问题？
  • 隔离问题：展示该bug的最简代码是什么？
  • 追踪调用链：使用Grep追踪调用链路
  • 提出假设：哪些原因可能导致该行为？
  • 验证假设：验证或推翻你的假设
  • 修复问题：实施解决方案
  • 验证修复：确认修复有效并添加回归测试

Debugging Strategy

调试策略

1. Gather Information

1. 收集信息

  • Read error messages and stack traces carefully
  • Check logs for context around the error
  • Identify when the issue started (recent changes?)
  • Use Grep to locate related code around the error
  • 仔细阅读错误信息和堆栈跟踪
  • 检查日志以获取错误相关的上下文
  • 确定问题开始出现的时间（是否和最近的变更有关？）
  • 使用Grep定位错误相关的代码

2. Trace the Flow

2. 追踪流程

  • Use Grep to trace data flow through function calls
  • Map the call chain from entry point to error
  • Identify where data transforms unexpectedly
  • 使用Grep追踪数据在函数调用中的流转
  • 绘制从入口点到错误发生处的调用链
  • 定位数据发生异常转换的位置

3. Reproduce Consistently

3. 稳定复现问题

  • Create a minimal test case
  • Document exact steps to reproduce
  • For frontend bugs, use Chrome DevTools to record network/console
  • 创建最简测试用例
  • 记录复现问题的精确步骤
  • 对于前端bug，使用Chrome DevTools记录网络/控制台信息

4. Common Causes

4. 常见原因

  • Null/undefined: Check for missing null checks
  • Off-by-one: Verify loop boundaries and array indices
  • Async timing: Check race conditions and await usage
  • State mutation: Look for unexpected side effects
  • Type coercion: Verify type handling (especially in JS/TS)
  • Null/Undefined：检查是否缺少空值校验
  • 差一错误：验证循环边界和数组索引
  • 异步时序问题：检查竞态条件和await的使用
  • 状态突变：查找意外的副作用
  • 类型转换：验证类型处理（尤其在JS/TS中）

Tools (Examples by Language)

各语言工具示例

bash
undefined
bash
undefined

Check logs

查看日志

tail -f /var/log/app.log
tail -f /var/log/app.log

Search for error patterns

搜索错误模式

grep -r "ERROR" ./logs/
grep -r "ERROR" ./logs/

Debug Node.js

调试Node.js

node --inspect-brk app.js
node --inspect-brk app.js

Python debugging

Python debugging

python -m pdb script.py
undefined
python -m pdb script.py
undefined

Frontend Debugging with Chrome DevTools

利用Chrome DevTools进行前端调试

  • Open DevTools → Console for errors
  • Network tab for failed requests
  • Sources tab for breakpoints
  • Performance tab for slow operations
  • 打开DevTools → 控制台查看错误
  • 网络标签页查看失败的请求
  • 源代码标签页设置断点
  • 性能标签页分析缓慢操作

Post-Fix Checklist

修复后检查清单

  • Root cause identified and documented
  • Regression test added
  • Similar code checked (use Grep to locate)
  • Fix reviewed by another developer
  • 已识别并记录根本原因
  • 已添加回归测试
  • 已检查相似代码（使用Grep定位）
  • 修复方案已由其他开发人员评审