Bug:读懂报错
“Vibe coding”课程第 21 课,共 26 课。免费,有动画和小测验。
错误藏在哪
Bug 就是程序里的错误。比如:在健身打卡应用里点“保存”,结果毫无反应。错误一般藏在三个地方。DevTools(浏览器的开发者工具,Windows 按 F12,Mac 按 Cmd+Option+I)里的 Console:页面代码报出的红字。同一处的 Network 标签页:页面发给服务器的每一个请求。还有托管平台上的日志(logs):记录服务器和构建过程都干了什么。
Network 与状态码
打开 Network,点“保存”,就会看到图里那一行:“POST /api/save 500”。POST 是发送数据的请求。/api/save 是你服务器上的地址。500 是状态码。速查:200 一切正常,404 找不到(地址错了),401 和 403 没权限(没登录或不允许),500 服务器出错。所以问题不在按钮:去看服务器日志。
套路:从 bug 到修好
第 1 步:故意再触发一次 bug,记下操作步骤。第 2 步:从 Console 或日志里把报错完整复制下来。第 3 步:把报错、步骤和你期望的结果一起发给智能体。第 4 步:写上“先解释原因,暂时别改代码”。第 5 步:修复,然后你亲自检查。第 6 步:commit。“把报错完整发过去”在讲给 AI 布置任务那课提过,这里是完整流程。
陷阱:靠删除来“修好”
智能体有时会靠删掉“碍事的东西”来“修好”bug。比如:保存时卡在“检查用户是否已登录”这一步,智能体就把这个检查删了。报错没了,可现在谁都能往别人的训练记录里写东西。同样,智能体有时会删掉失败的测试,或者把报错藏起来。看 diff:图里那行红色的“删掉了检查?”就是你该问“为什么”的信号。
原地打转?回退
第五次尝试了,结果越改越糟:智能体修好一处又弄坏另一处。停下来。回退到最后一个能用的 commit,就像图里那支“回退”箭头。开一个新会话:旧会话里塞满了失败的尝试,智能体会被它们绕晕。把任务重新描述一遍,而且拆小:不要说“把保存修好”,而是“保存一条带日期的训练记录”。小步骤修得更快。
自测一下
- 在 Network 里看到“POST /api/save 500”,这说明什么?
正确答案: 服务器出错了:去看服务器日志. 500 表示服务器端出错。404 是地址不对,401 或 403 是权限问题。 - 报 bug 给智能体,最好怎么写?
正确答案: 完整报错、操作步骤和期望结果. 有完整报错、步骤和期望,智能体才知道哪里坏了、应该怎样。只说“坏了”,它只能瞎猜。 - 智能体删掉登录检查来“修”bug,你怎么办?
正确答案: 回退,让它找真正的原因. 没有登录检查,谁都能往别人的数据里写。报错是没了,问题却更大了:要找原因,而不是拆掉防护。