4.5.4 Debug 心法总结
经过本节学习，你将掌握：
- 面对报错的正确心态
- 高效 debug 的五条心法
- 一份可复用的 Debug 检查清单
心法一：别慌，报错是正常的
报错不是失败的信号，而是代码在告诉你「这里需要调整」。
| 错误认知 | 正确认知 |
|---|---|
| 报错说明我做错了 | 报错是调试过程的一部分 |
| 专业程序员不会遇到报错 | 专业程序员每天都在 debug |
| 代码报错了，我的项目完蛋了 | 90% 的报错都能在几分钟内解决 |
记住：每一次成功的 debug，都是你能力的提升。专业程序员和初学者的区别，不是「会不会遇到报错」，而是「遇到报错时知不知道怎么处理」。
心法二：先读后改，理解报错信息
在动手修改之前，先读懂报错信息在说什么。
报错信息的三个关键部分：
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
↑ 错误类型 ↑ 错误描述
at addTask (index.html:45:15)
↑ 错误位置（文件名:行号:列号）读懂报错的三个问题：
- 是什么类型的错误？ TypeError / ReferenceError / SyntaxError
- 具体出了什么问题？ 读错误描述，用自己的话复述
- 错误发生在哪里？ 根据行号定位代码
避免：看到报错就慌，不读信息就开始改代码。这往往会越改越乱。
心法三：隔离问题，一次只改一处
当代码有多个问题时，要逐个击破，而不是一次性全改。
正确做法：
问题 1：点击添加没反应
↓ 解决
问题 2：刷新后数据丢失
↓ 解决
问题 3：样式显示不对
↓ 解决错误做法：
同时告诉 AI："添加不行，刷新丢数据，样式也不对，帮我全部修好"
↓
AI 返回大量改动
↓
不确定哪些改动解决了哪些问题
↓
新问题出现，不知道是哪个改动导致的隔离问题的好处：
- 每次改动都能确认效果
- 出现新问题时容易定位原因
- 避免「修一个问题引入三个新问题」
心法四：善用撤销，改错了就退回
改代码就像走迷宫，走错了要能退回来重新选路。
实用技巧：
| 场景 | 操作 |
|---|---|
| 刚改错了代码 | Ctrl+Z / Cmd+Z 撤销 |
| 改了很多想全部放弃 | 不保存，直接刷新页面 |
| 想保留多个版本 | 每完成一个功能就备份一次文件 |
备份策略：
todo-v1.html ← 完成静态页面
todo-v2.html ← 完成添加功能
todo-v3.html ← 完成删除功能
todo-v4.html ← 完成 localStorage如果 v4 改崩了，随时可以回到 v3 重来。
心法五：知道何时换思路
有时候，与其死磕一个问题，不如换个方法。
判断标准：
| 情况 | 建议 |
|---|---|
| 同一个问题，AI 反复给出类似的错误方案 | 换一个 Prompt 表述方式 |
| 改动越来越多，但问题没解决 | 回退到上一个能用的版本 |
| 代码已经「缝缝补补」面目全非 | 让 AI 重新生成这部分功能 |
| 花了 30 分钟还没解决 | 休息一下，换个思路或寻求帮助 |
「重来」不是失败：
有时候从头开始比修补更快。你已经知道要实现什么、踩过哪些坑，第二次写会比第一次顺利得多。
Debug 检查清单
遇到问题时，按这个清单逐项检查：
初步检查
- [ ] 打开控制台，查看是否有红色报错
- [ ] 阅读报错信息，识别错误类型
- [ ] 根据行号定位到具体代码位置
信息收集
- [ ] 记录错误现象（发生了什么）
- [ ] 记录期望行为（应该发生什么）
- [ ] 复制完整的报错信息
- [ ] 定位相关代码（报错行附近 10-20 行）
问题解决
- [ ] 先诊断原因，再请求修复
- [ ] 一次只解决一个问题
- [ ] 替换代码前做好备份
- [ ] 修改后立即验证效果
验证确认
- [ ] 控制台没有新的报错
- [ ] 功能按预期工作
- [ ] 没有影响其他功能
- [ ] 刷新页面后仍然正常
快速参考卡片
将这张卡片保存下来，遇到问题时快速参考：
┌─────────────────────────────────────────┐
│ Debug 快速参考 │
├─────────────────────────────────────────┤
│ 1. 打开控制台 (F12 → Console) │
│ 2. 阅读报错：类型 + 描述 + 位置 │
│ 3. 定位代码：根据行号找到相关代码 │
│ 4. 向 AI 报告：现象 + 报错 + 代码 │
│ 5. 一次一个：解决一个再处理下一个 │
│ 6. 验证结果：改完后确认问题解决 │
├─────────────────────────────────────────┤
│ 常见错误速记： │
│ • TypeError → 变量未定义或类型不对 │
│ • ReferenceError → 拼写错误或未声明 │
│ • SyntaxError → 括号/引号/逗号不匹配 │
│ • 无报错但不工作 → 逻辑错误，对比期望 │
└─────────────────────────────────────────┘本节要点
- 报错是正常的，专业程序员每天都在 debug
- 先读懂报错信息，再动手修改
- 一次只解决一个问题，避免越改越乱
- 善用备份和撤销，给自己留后路
- 知道何时该换思路或重新开始
恭喜你完成了 Debug 实战章节。现在你不仅知道如何开发功能，也知道如何解决开发中遇到的问题。
这正是 Vibe Coding 的核心技能：让 AI 帮你写代码，也让 AI 帮你修代码。