从头学 Claude Code（七）第一次修车——修复 Bug 实战

从头学 Claude Code（七）—— 第一次修车：Bug 修复实战

本系列适合零基础新手，手把手带你掌握 AI 编程助手

---

上节回顾

上一讲我们学了权限管理，知道了什么情况下需要”踩刹车”。这一讲，我们开始实战——用 Claude Code 修复 Bug。

就像有个修车师傅在旁边，车子有问题不用自己硬扛。

---

1. 案例背景：车子坏了

场景：你的 Node.js 项目就像一辆车，现在有个问题： - 症状：登录页面点击”登录”按钮，车子动都不动 - 仪表盘：控制台显示 “Cannot read property ‘token’ of undefined”

---

2. 任务拆解：用 4A 修车

第一步：Analyze（诊断）

首先，你得知道问题在哪：

你可以说：

## 背景
这是一个 Node.js + Express 的登录项目

## 任务
帮我分析登录功能的问题

## 信息
- 前端点击登录按钮没有反应
- 控制台有 "Cannot read property 'token' of undefined" 错误

## 要求
先分析项目结构，找出问题所在

就像你把车开到修理厂，说：“师傅，车子启动不了，你帮我看看。”

---

第二步：Architect（方案）

分析完成后，Claude 会告诉你： - 问题在哪个部件 - 原因是什么 - 需要怎么修

你可以说：

分析得对，请给出修复方案并执行

就像师傅说：“问题找到了，是火花塞松了，我帮你拧紧就行。”

---

第三步：Apply（维修）

Claude 会： 1. 读取相关部件（文件） 2. 更换坏掉的零件（修改代码） 3. 告诉你改了什么

就像师傅修车的时候，你可以在旁边看着学习。

---

第四步：Assert（验收）

最后验证： 1. 零件换对了没（代码正确） 2. 车子能不能启动（问题解决） 3. 有没有新问题（有没有修坏其他东西）

你可以说：

修复后测试一下登录功能是否正常

就像修完车，教练车绕一圈，看看还有没有问题。

---

3. 完整对话示例：修车全过程

对话 1：描述问题

你：帮我看看登录功能的问题。点击登录按钮没有反应，控制台报错 "Cannot read property 'token' of undefined"

就像说：“师傅，车子启动不了，仪表盘显示这个错误”

---

对话 2：诊断问题

Claude（检查后）：
我找到了问题。在 src/api/auth.js 中，登录 API 返回的数据结构与你预期的不一致。

当前代码：
const token = response.data.token  // response.data 是 undefined

实际返回：
{ success: true, token: "xxx" }  // 没有嵌套的 data，直接就是 token

就像师傅说：“我检查过了，是线路接错了，不是火花塞的问题”

---

对话 3：修复问题

你：请修复这个问题

Claude（修复完成）：
已修复 src/api/auth.js 文件：

修改前：
const token = response.data.token

修改后：
const token = response.token

就像师傅说：“接好了，你试试看”

---

对话 4：验证结果

你：测试一下登录功能

Claude：
运行测试...
✓ 登录成功，token 正确获取
✓ 页面正确跳转到首页

就像你说：“发动试试”，师傅说：“好了，发动机正常响了！”

---

4. 关键技巧：怎么更好地”描述病情”

技巧一：提供错误信息

把错误信息粘贴给 Claude，它能更快定位问题：

Error: Cannot read property 'token' of undefined
at Login.vue:45:30

就像去看病，把检查报告拿给医生看

---

技巧二：说明复现步骤

让 Claude 知道如何触发问题：

1. 打开登录页面
2. 输入用户名和密码
3. 点击登录按钮
4. 等待 3 秒无反应

就像说：“我是这样操作才发现问题的”

---

技巧三：指出期望行为

帮助 Claude 理解什么是对的：

期望：点击后跳转到 /dashboard
实际：没有任何反应

就像说：“正常应该这样，但它不这样”

---

5. 常见 Bug 类型与处理

类型	典型症状	解决思路
拼写错误	变量名红色波浪线	用 Grep 搜索正确名称
类型错误	undefined is not a function	检查变量类型
路径错误	Cannot find module	用 Glob 确认文件位置
逻辑错误	结果不符合预期	理解代码流程，逐步排查
环境问题	启动报错	检查依赖和配置

💡 就像修车：异响可能是螺丝松了，冒烟可能是漏油了，不同症状对应不同问题

---

6. 实操练习

练习 1：找拼写错误

在项目中搜索 "functoin"（故意拼错），让它帮你找出来

就像让实习生帮你检查有没有错别字

---

练习 2：分析错误日志

把一段错误日志发给 Claude，让它分析原因

就像把体检报告发给医生看

---

练习 3：完整修复流程

找一个真实的小 bug，用 4A 流程完整走一遍

就像真把车开去修一遍

---

本节小结

• 问题描述：给错误信息 + 复现步骤 + 期望行为（就像描述病情）
• 4A 流程：诊断 → 方案 → 修复 → 验收（就像修车四步走）
• 关键技巧：给详细信息，让它更快定位

💡 记住：Bug 就像车子故障——描述清楚症状，4A 流程处理，验证修复结果！

---

下节预告

下一讲：学习如何添加新功能——第一次装修

---

有问题？评论区见！如果觉得有帮助，点个赞再走~

---

标签: #Claude Code #AI编程 #Bug修复 #实战教程