AI 编程工具
Debugging
根据证据定位问题
免费阅读 · 配套小练习 · 更新于
一句话理解
复现问题，读懂报错，再验证一次有针对性的修改。
打个比方
台灯不亮时，先检查是否插电、开关是否打开，再检查灯泡。调试也是用观察逐步缩小原因，而不是一次换掉房间里的所有设备。
先记录操作、实际结果与期望结果，再查看控制台报错、网络请求或相关变量。报错常带有文件与行号；它们提供线索，但不保证那一行就是根因。一次只改变一个相关条件，重做原操作，确认症状消失且原有功能仍正常。
看个例子
<script>
const total = 3;
console.log(totla + 1);
</script>这个例子故意把 total 写成 totla。在自己的本地页面运行时会出现相关 ReferenceError，具体措辞因浏览器不同。把代码、实际报错与预期输出一起交给 AI，再检查它是否修正了拼写并保留计算逻辑。
什么时候会遇到
- 给 AI 提供可复现的报错与相关代码。
- 区分脚本报错、请求失败、布局错误和数据没有保存等问题。
常见误解
没有控制台报错，不代表功能符合需求。移除报错那一行也可能只是把需要的功能一起删掉。
Vibe Coding 小练习 · 描述需求 → 看懂改动 → 验证结果
动手练一练：把复现材料交给 AI，核对修复结果
使用上方故意写错的代码；可以在自己的练习文件运行，也可以先用代码与预期结果练习写问题说明。
试着这样告诉 AI
这段代码刷新后没有输出我期望的数字 4，使用的变量是 totla，控制台报告它未定义。请结合代码定位原因，只修改相关拼写，保留原有计算与输出。先解释原因，再说明改动和重测方法；不要通过删除功能消除报错。可以在你使用的 AI 编程工具中完成；也可以先对照本页代码示例，练习理解需求、识别改动和列出检查项。
跟着做
- 把代码、复现操作、实际报错与期望输出一起交给 AI；有真实行号时也提供。
- 对照它的修改，检查是否修正了变量名，并保留 total + 1 的逻辑。
- 重新运行同一操作，检查是否输出 4，再确认原有标题、链接或按钮仍正常。
你应该看到
报错得到有针对性的修复，预期输出与原有功能都通过检查。
完成检查
- 保留计算和输出，没有只删掉出错行。
- 实际重测输出 4；若只做纸面分析，没有声称程序已验证通过。
遇到卡点？看提示
向 AI 提供可复现材料，收到修复后重做原操作；单看“已修复”不能判断结果。
查看参考思路
totla 没有被声明，正确名称是 total。修改后 total + 1 应得到 4。纸面判断可指出修复方向，实际成功还应通过运行与原有功能检查确认。
想一想
给 AI 发“还是不行”，为什么往往难以修复？
查看答案
缺少复现步骤、实际结果、期望结果和具体报错。补齐这些信息，才容易定位到相关文件与行为。