AI 编程

Vibe coding 调试工作流

一套实用的 vibe coding 应用调试工作流，涵盖可复现的缺陷报告、根因分析、回归测试、AI 编程提示词和更稳妥的修复。

发布于 更新于
Vibe Coding调试AI 编程

调试 vibe coding 应用与调试你逐行编写的代码不同。AI 可能在你来不及检查的情况下创建了文件、状态流、辅助函数、样式规则和数据假设。如果过早要求修复，工具可能只修补表面症状，又造成第二个缺陷。

本指南介绍一套可重复使用的 vibe coding 应用调试工作流：复现缺陷、隔离行为、找出根因、在可行时添加回归测试、实施最小修复，并验证原始用户路径。目标是使用 AI 编程工具进行调试，同时避免让它们重写半个应用。

本指南适合谁

  • 使用 AI 构建了原型、现在需要修复异常行为的创始人
  • 在发布前审核 AI 生成应用代码的开发者
  • 使用 AI 应用构建工具，需要为技术审核提供更清晰缺陷报告的设计师和运营人员
  • 将 vibe coding 原型转化为可维护应用的产品团队
  • 希望 AI 调试提示词能够减少随意重构的任何人

分步工作流程

  1. 使用精确步骤复现缺陷，记录起始 URL、账户状态、浏览器、输入值和预期结果。
  2. 使用错误消息、截图说明、控制台输出或失败的测试记录实际结果。
  3. 在进行编辑前，让 AI 检查相关文件。
  4. 要求解释根因，并明确指出出错的假设、函数、组件、路由、查询或样式规则。
  5. 要求提供能够保留现有行为的最小修复。
  6. 在可行时，为路由、验证、数据写入、身份验证、计费、SEO 或重要 UI 行为添加回归测试。
  7. 运行针对性测试或手动复现路径。
  8. 检查差异中是否有无关重构、依赖项变更、大范围重写或环境变更。
  9. 修复后重新运行原始用户路径。
  10. 保存缺陷报告和修复提示词，以便下次更轻松地诊断类似问题。

推荐工具

  • Claude 适合阅读代码库、分析根因和谨慎规划缺陷修复
  • ChatGPT 适合将杂乱的缺陷报告改写成清晰的调试提示词
  • Cursor 适合本地代码编辑、搜索和测试驱动的调试
  • Lovable 适合在应用仍处于早期阶段时迭代原型
  • v0 适合隔离 UI 组件行为和视觉状态问题

调试提示词模板

AI 生成的应用出现异常行为时，使用以下提示词：

I need to debug this vibe coded app bug: [bug description]. Reproduce the bug from these steps: [steps]. Expected result: [expected]. Actual result: [actual]. Before editing files, inspect the relevant route, component, state, API, and styling code. Explain the root cause in concrete terms. Then propose the smallest fix and the verification command or manual path that proves the bug is fixed. Do not refactor unrelated code or change environment variables.

If this affects behavior, add or update a regression test before implementing the fix. After the fix, summarize the exact files changed and the remaining risk.

缺陷报告检查清单

  • 哪个页面或路由出现了缺陷？
  • 哪项具体的用户操作会触发它？
  • 使用了哪些输入值？
  • 问题属于视觉、状态、API、身份验证、数据还是构建问题？
  • 你预期会发生什么？
  • 实际发生了什么？
  • 问题出现在移动端、桌面端，还是两者都有？
  • 是否存在控制台错误、网络错误、服务器日志、失败的测试或异常的构建输出？
  • 缺陷出现前最近发生了什么变化？

常见错误

  • 不提供复现步骤，只要求 AI "fix this"
  • 只有一个状态条件有误，却让 AI 重写整个组件
  • 因为 UI 看起来简单，就忽略生成的代码
  • 真正问题出在数据结构或条件渲染，却只修复样式症状
  • 没有运行原始失败路径就接受修复
  • 跳过重要工作流的回归测试
  • 将修改环境变量或依赖项作为调试捷径

实用示例

较弱的提示词：the save button does not work, fix it.

更好的提示词：on the prompt detail page, clicking Save while signed in shows a success toast but the saved item does not appear in history after refresh. Reproduce the bug with a signed-in user, inspect the save button, API route, persistence helper, and history query. Explain whether the issue is client state, API payload, database write, or history filtering. Add a regression test if the route behavior is wrong, make the smallest fix, then run the targeted test and describe the manual verification path.

更好的提示词为 AI 提供了具体路径、预期结果、实际结果、需要检查的文件、根因要求和验证标准。

常见问题

问：修复缺陷时应该让 AI 同时进行重构吗？ 答：通常不应该。先修复缺陷。只有在测试或明确的手动验证路径保护现有行为后，才进行重构。

问：如果无法为缺陷编写测试怎么办？ 答：使用精确的手动复现路径。对于 UI 问题，应包括视口、状态、输入值和确切的预期视觉行为。

问：如何阻止 AI 修改过多文件？ 答：要求它先检查代码、解释根因、提出最小修复，并避免无关重构、依赖项、迁移和环境变更。

问：为什么调试 vibe coding 代码让人感觉混乱？ 答：AI 生成的代码可能在组件、状态、API 调用和样式中隐藏假设。放慢工具的速度并强制它解释行为链，调试效果会更好。

相关工具

相关指南