Vibe Coder Debug 第一课：90% 的报错，信息本身就把答案写好了

场景重现

你运行项目，终端哗啦啦滚出二十行红色英文。你的第一反应可能是：截图 → 发给 AI → "这是怎么了？"

AI 大概率会回你一段泛泛的解释。因为你给的信息太少——就像你跟医生只说"我难受"，医生也没法确诊。

报错信息的三要素

任何一条像样的报错都包含三部分：

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (src/components/UserList.jsx:12:20)

1. 类型（TypeError）—— 错误的"病名"。这个词可以直接拿去搜索
2. 位置（UserList.jsx 第 12 行第 20 列）—— "病灶在哪"
3. 描述（Cannot read properties... reading 'map'）—— "发生了什么"：你想对一个空值调用 map 方法

90% 的情况下，读完这三样你自己就有方向了。剩下 10%，也需要你把这三样完整交给 AI。

新手最常见的三个坏习惯

坏习惯一：只截第一行。 很多关键信息（尤其是位置和调用链）在后面几行。要复制就复制完整的报错输出。

坏习惯二：截图而不是复制文本。 终端里的报错是可以选中复制的。文本比截图好用得多——AI 处理文本更准，你也方便贴到搜索引擎。

坏习惯三：不说明"我做了什么"。 报错不是凭空出现的。"我刚加了登录功能，一提交表单就报这个错"和单纯甩一条报错，AI 给出的答案质量天差地别。

马上能用的两个终端操作

上面说"要复制完整的报错"，但很多新手卡在更基础的一步：终端里的字根本不知道怎么复制。这里一次讲清。

操作一：完整复制终端报错

• Windows 终端：用鼠标选中报错文本，选中即复制；或选完后按右键复制
• VS Code 内置终端：选中文本后 Ctrl+C 即可复制（没选中时 Ctrl+C 是中断，别慌）
• macOS：选中文本后 Cmd+C 复制

复制范围记住一句话：从第一行 TypeError / ReferenceError 开始复制，别只截最后一行。 第一行是"病名"，最后几行是"病灶位置"，缺一不可。

操作二：重启 dev server

dev server 卡死、改了代码没反应、报错看起来很诡异时，先重启再说，很多"灵异现象"会自己消失：

1. 在跑 dev server 的终端里按 Ctrl+C 停掉它
2. 重新运行启动命令，比如：

npm run dev

3. 如果连 Ctrl+C 都没反应（彻底卡死），直接关掉这个终端窗口，开一个新的再跑启动命令

终端报错 vs 浏览器报错

两处都要看：

• 终端报错 —— 项目启动失败、编译失败时出现，通常是语法错误、依赖缺失
• 浏览器 Console（按 F12 打开） —— 页面能打开但功能不对时出现，通常是数据问题、逻辑错误

Network 面板也值得认识：请求变红（如 404、500）说明前后端交互出了问题，点开能看到具体哪个接口失败。

让 AI 修 bug 的提示词模板

项目出现了以下报错（完整原文粘贴在这里）：
【报错全文】

复现步骤：【做了什么操作之后出现的】
期望行为：【本来应该怎样】

请先分析原因并用一句话向我确认你的判断，
再给出修复方案，改动尽量小，不要顺手重构其他代码。

最后一句很重要。不约束的话，AI 经常借修 bug 之名大改特改，引入新问题。

五个高频报错速查

报错关键词	人话翻译	常见原因
404 Not Found	找不到资源/接口	路径写错、文件名大小写不符
Cannot read properties of undefined	对一个空值取属性	数据还没加载就来用了
Module not found	找不到依赖包	忘了 install 或包名拼错
EADDRINUSE	端口被占用	上一个服务没关干净
SyntaxError	语法错误	少了括号/引号，常发生在手动改代码后

自查题（读完自测）

1. 情景题：终端出现下面这条报错，请指出它的三要素——

   TypeError: Cannot read properties of undefined (reading 'map')
       at UserList (src/components/UserList.jsx:12:20)
   

2. 判断：报错太长，只复制最后一行给 AI 就够了。

3. dev server 卡死没反应，你的第一步应该是什么？

4. 判断：页面能打开，但点按钮没反应——应该优先去翻终端报错。

参考答案：

1. 类型 TypeError；位置 UserList.jsx 第 12 行第 20 列；描述 对一个空值调用了 map 方法
2. 错。要从第一行 TypeError 开始复制完整报错，病名和病灶缺一不可
3. 在该终端按 Ctrl+C 停掉后重新 npm run dev；彻底卡死就关掉终端重开一个
4. 错。页面能打开说明编译没问题，应优先看浏览器 Console（按 F12）

小结

报错是机器在用它的方式跟你说话，而且通常说得很清楚。复制全文 → 说明上下文 → 约束修改范围，这三步能让你的 debug 效率立刻上一个台阶。

下一篇我们回到基本功：agent 总让你"在终端里运行 xxx"，那我们就花十分钟把终端彻底搞明白。