Easy-Vibe 报错自救指南用「截图 描述」让 AI 帮你解决 90% 的代码错误【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文对应 Easy-Vibe 课程体系 Stage 1AI 产品经理阶段的「附录 B常见报错与排查」docs/fr-fr/stage-1/appendix-b-common-errors/index.md。在 AI 时代排查代码错误的方式已经彻底改变——你不需要背下所有错误类型不需要成为调试专家甚至不需要理解错误本身。你只需要学会一件事怎么问 AI。读完本文你将掌握一套从「直接描述现象 截图」到「打开 F12 补充关键信息」再到「迭代直到解决」的标准排错流程让 AI 真正成为你的调试助手。0. 这一章为什么重要排错思维要从「自己 debug」切换为「问 AI」很多初学者遇到报错时的第一反应是慌张开始瞎改代码花半小时搜索「xxx 错误怎么解决」试图自己理解错误是什么意思一个人 debug 到深夜。这些都是在浪费时间。在 AI 时代调试已经变成了一件很简单的事看到报错 → 截图 → 问 AI → 按 AI 说的做你不需要理解错误不需要会调试甚至不需要知道问题出在哪里。你只需要学会怎么问。这正是 Easy-Vibe 课程反复强调的理念在 AI IDE 入门章节 中明确指出从今以后要让 AI 成为你的「第一求助对象」——无论概念不清、工具装不上、命令不会用还是程序报错都先问 AI再亲自动手验证。本附录正是把这一理念落成了一套可操作、可复制的具体排错流程。1. 核心心法截图问 AI1.1 最简单的提问方式不需要复杂的提示词模板两种方式任选其一方式一描述现象格式刚才做了什么现在出现了什么。刚才我修改了登录页面的代码现在页面白屏了怎么办方式二截图直接截图当前页面或报错信息发给 AI。[截图] 这个报错怎么解决最好的方式描述 截图二者结合信息最完整刚才我修改了登录页面的代码现在页面白屏了。 [截图] 怎么办记住描述清楚上下文加上截图AI 能更快帮你解决问题。关于「截图」这一环有一个关键前提值得注意并非所有 AI 模型都支持图像输入。在 AI IDE 入门章节 中给出了详细的模型能力对照以 Trae 可用模型为例豆包 Seed 系列、Kimi-K2.5、Gemini 系列、GPT 系列支持图像输入而 GLM-4.x、MiniMax-M2.x、DeepSeek-V3.1、Kimi-K2-0905、Qwen-3-Coder 等纯文本模型不支持。因此截图提问前先确认当前使用的模型支持读图若不支持就把报错文本直接复制粘贴给 AI效果等同。1.2 如何把问题讲清楚很多初学者知道要提问但不知道怎么说。其实只需要讲清楚三件事① 刚才做了什么刚才我点击了保存按钮 刚才我修改了登录页面的代码 刚才我刷新了页面② 现在看到了什么现在页面是空白的 现在按钮点了没反应 现在显示报错信息③ 想要达到什么效果我想让数据保存成功 我想让页面正常显示 我想让按钮点击后弹出提示完整示例刚才我点击了保存按钮现在页面显示保存失败的报错。 [截图] 我想让表单数据成功保存到数据库该怎么办关键原则用大白话描述不用专业术语按时间顺序说先做了什么然后发生了什么把你的预期说出来让 AI 知道你想要什么。这套「做了什么 → 看到什么 → 想要什么」的结构与课程里推荐的通用提问模型完全一致「我的目标是……我目前进行到……我尝试过……实际结果或完整报错是……先解释原因再告诉我最小的下一步。」信息越精确AI 的回答就越贴合你的项目上下文。2. 第一步直接描述现象提问先别急着打开 F12遇到问题时不要急着打开 F12。先直接描述现象截图当前页面丢给 AI 看看。很多时候AI 看到截图就能直接给出解决方案。2.1 常见现象怎么描述以下五类高频问题直接照搬句式即可页面白屏页面打开是空白的怎么办 [截图]按钮点击没反应点击这个按钮没反应帮我看看。 [截图]数据保存不了点了保存数据没存上怎么办 [截图]样式显示不对这个按钮位置偏了怎么调整 [截图]接口报错调用接口报错了帮我看看。 [截图]2.2 如果 AI 直接解决了恭喜你问题解决了按照 AI 说的修改即可。2.3 如果 AI 说「需要更多信息」这时候才需要打开 F12补充关键信息。往下看。3. 第二步补充关键信息——F12 开发者工具的三种用法当 AI 说需要更多信息时根据问题类型打开 F12 截取对应的内容。3.1 什么时候需要补充信息AI 可能会这样回复「请打开 Console 看看有没有报错」「截图 Network 面板给我看看」「需要看具体的错误信息」。这时候根据下面的指引补充截图。注意进入这一步说明第一步的「描述 截图」信息还不够你需要把浏览器开发者工具中真实、原始的错误证据交给 AI。3.2 补充 Console 信息页面白屏 / 报错Console控制台面板记录着页面运行时的 JavaScript 错误、警告与日志是排查「白屏、交互无响应、运行时异常」的第一现场。第一步按 F12 打开开发者工具Windows/Linux 按F12Mac 按CmdOptionI或者右键页面选「检查」。第二步切换到 Console 标签页第三步截图红色报错信息红色文本通常是未捕获的异常包含错误类型与堆栈位置第四步发给 AIConsole 报错如下 [截图]3.3 补充 Network 信息数据问题 / API 报错Network网络面板记录页面发出的每一次 HTTP 请求是排查「数据没存上、接口报错、加载不出内容」的核心证据。请求链路上的任何一环——URL、状态码、请求参数、返回结果——都可能暴露问题所在。第一步按 F12 打开开发者工具第二步切换到 Network 标签页第三步重新操作一遍点保存 / 刷新页面让出问题的请求重新发生一次才能被 Network 面板捕获。第四步找到对应请求截图看 URL 和状态码如 404、500、401 等判断是路径错误、服务器异常还是权限问题看 Payload传的参数核对发送给后端的数据是否正确看 Response返回结果看后端实际返回了什么。第五步发给 AINetwork 信息如下 请求[截图1] 参数[截图2] 返回[截图3]把这三张截图一起发给 AI它就能判断问题究竟出在前端组装参数、接口路径还是后端返回逻辑上。3.4 补充 Elements 信息样式问题Elements元素面板展示页面的 DOM 结构与实际生效的 CSS 样式是排查「按钮位置偏了、颜色不对、布局错乱」等视觉问题的利器。第一步右键元素 → 「检查」开发者工具会自动定位到该元素。第二步截图 Styles 面板其中会显示该元素当前生效的 CSS 规则以及被覆盖、被划掉的样式第三步发给 AI元素样式如下 [截图]4. 第三步迭代直到解决排错往往不是一次问答就能结束的。关键在于用正确的节奏反复迭代。4.1 低效的做法这些做法会浪费你的时间看到报错就慌张开始瞎改代码花半小时搜索错误解决方案试图自己理解每个错误的意思一个人 debug 到深夜。4.2 高效的做法按照这套流程来先直接描述现象截图提问AI 说需要更多信息时再打开 F12 补充按照建议修改代码改完后测试如果问题还在就继续截图提问。把「问 AI → 动手改 → 验证 → 把新结果再丢回给 AI」作为一个循环直到问题解决。在 AI IDE 入门章节 中这一循环被描述为「AI 原生学习闭环」问题出现 → 立即询问 AI 并补充上下文 → 亲自尝试建议 → 结果不符则把新结果或完整报错再给 AI → 直到符合预期后用自己的话复述原理沉淀为可复用的技能。这一闭环同样适用于 Easy-Vibe 课程中的实战项目。例如在 examples/trae-block-game/prompt.txt 中向 AI 提出需求的方式就是一句话描述目标「帮我做一个像这样的方块小游戏人物可以走动也可以放方块。做好后帮我打开看看」而当运行中出现报错时把「现象 截图 报错文本」原样反馈给 AI就是本附录所教的排错动作。5. 总结完整流程遇到问题 ↓ 直接描述现象 截图 ↓ 丢给 AI怎么办 ↓ AI 直接解决 ↓ 是 按 AI 说的做 ↓ 测试是否解决 ↓ ↓ 否 / AI 需要更多信息 打开 F12补充关键信息 ↓ 再发给 AI ↓ 重复直到解决这套流程的三个要点可以浓缩为先问再查默认动作是「描述 截图」直接问 AI而不是自己钻研或搜索按需补证只有 AI 明确要求更多信息时才打开 F12按问题类型截取 Console / Network / Elements 中的对应证据循环迭代改完必测测完把新结果反馈给 AI直到问题解决并把解决过程沉淀为自己的经验。掌握这套流程后课程预期的目标是90% 的常见报错都能独立解决——不需要记住错误类型不需要成为调试专家只需要学会如何问 AI。这也正是 Easy-Vibe 课程「让任何想法变成可用产品」的能力基础排错不再依赖记忆与经验而依赖一套人人可复制的标准流程。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考