经过本节学习，你将掌握：
报错不是失败的信号，而是代码在告诉你「这里需要调整」。
| 错误认知 | 正确认知 |
|---|---|
| 报错说明我做错了 | 报错是调试过程的一部分 |
| 专业程序员不会遇到报错 | 专业程序员每天都在 debug |
| 代码报错了，我的项目完蛋了 | 90% 的报错都能在几分钟内解决 |
记住：每一次成功的 debug，都是你能力的提升。专业程序员和初学者的区别，不是「会不会遇到报错」，而是「遇到报错时知不知道怎么处理」。
在动手修改之前，先读懂报错信息在说什么。
报错信息的三个关键部分：
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
↑ 错误类型 ↑ 错误描述
at addTask (index.html:45:15)
↑ 错误位置（文件名:行号:列号）读懂报错的三个问题：
避免：看到报错就慌，不读信息就开始改代码。这往往会越改越乱。
当代码有多个问题时，要逐个击破，而不是一次性全改。
正确做法：
问题 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 分钟还没解决 | 休息一下，换个思路或寻求帮助 |
「重来」不是失败：
有时候从头开始比修补更快。你已经知道要实现什么、踩过哪些坑，第二次写会比第一次顺利得多。
遇到问题时，按这个清单逐项检查：
打开控制台，查看是否有红色报错
阅读报错信息，识别错误类型
根据行号定位到具体代码位置
记录错误现象（发生了什么）
记录期望行为（应该发生什么）
复制完整的报错信息
定位相关代码（报错行附近 10-20 行）
先诊断原因，再请求修复
一次只解决一个问题
替换代码前做好备份
修改后立即验证效果
控制台没有新的报错
功能按预期工作
没有影响其他功能
刷新页面后仍然正常
将这张卡片保存下来，遇到问题时快速参考：
┌─────────────────────────────────────────┐
│ Debug 快速参考 │
├─────────────────────────────────────────┤
│ 1. 打开控制台 (F12 → Console) │
│ 2. 阅读报错：类型 + 描述 + 位置 │
│ 3. 定位代码：根据行号找到相关代码 │
│ 4. 向 AI 报告：现象 + 报错 + 代码 │
│ 5. 一次一个：解决一个再处理下一个 │
│ 6. 验证结果：改完后确认问题解决 │
├─────────────────────────────────────────┤
│ 常见错误速记： │
│ • TypeError → 变量未定义或类型不对 │
│ • ReferenceError → 拼写错误或未声明 │
│ • SyntaxError → 括号/引号/逗号不匹配 │
│ • 无报错但不工作 → 逻辑错误，对比期望 │
└─────────────────────────────────────────┘恭喜你完成了 Debug 实战章节。现在你不仅知道如何开发功能，也知道如何解决开发中遇到的问题。
这正是 Vibe Coding 的核心技能：让 AI 帮你写代码，也让 AI 帮你修代码。