本章导读
在 AI 时代，排查错误的方式已经变了。
你不需要背下所有错误类型，不需要成为调试专家，甚至不需要理解错误是什么意思。
你只需要学会一件事：怎么问 AI。本章会教你一套从简单到进阶的排查流程：
- 第一步：直接问：描述现象 + 截图，一句话提问
- 第二步：补充信息：如果解决不了，再打开 F12 补充关键信息
掌握这套流程后，90% 的报错你都能自己解决。
ℹ️ 说明
本章所有方法基于 Cursor/Trae/Claude 等 AI IDE 的实际使用经验，可直接应用于日常开发。
1. 核心心法：截图问 AI
⚠️ 为什么这一章很重要？
很多初学者遇到报错时的第一反应是：
- 慌张，开始瞎改代码
- 花半小时搜索"xxx 错误怎么解决"
- 试图自己理解错误是什么意思
- 自己 debug 到深夜
在 AI 时代，调试已经变成了一件很简单的事：
看到报错 → 截图 → 问 AI → 按 AI 说的做你不需要理解错误，不需要会调试，甚至不需要知道问题出在哪里。
你只需要学会怎么问。1.1 最简单的提问方式
不需要复杂的模板，两种方式任选：
方式一：描述现象
格式：刚才做了什么，现在出现了什么
刚才我修改了登录页面的代码，现在页面白屏了，怎么办？方式二：截图
直接截图当前页面或报错信息
[截图]
这个报错怎么解决？最好的方式：描述 + 截图
刚才我修改了登录页面的代码，现在页面白屏了。
[截图]
怎么办？记住：描述清楚上下文，加上截图，AI 能更快帮你解决问题。
1.2 如何把问题讲清楚
很多初学者知道要提问，但不知道怎么说。其实只需要讲清楚三件事：
1. 刚才做了什么
刚才我点击了保存按钮
刚才我修改了登录页面的代码
刚才我刷新了页面2. 现在看到了什么
现在页面是空白的
现在按钮点了没反应
现在显示报错信息3. 想要达到什么效果
我想让数据保存成功
我想让页面正常显示
我想让按钮点击后弹出提示完整示例：
刚才我点击了保存按钮，现在页面显示"保存失败"的报错。
[截图]
我想让表单数据成功保存到数据库，该怎么办？关键原则：
- 用大白话描述，不用专业术语
- 按时间顺序说：先做了什么，然后发生了什么
- 把你的预期说出来，让 AI 知道你想要什么
2. 第一步：直接描述现象提问
遇到问题时，不要急着打开 F12。先直接描述现象，截图当前页面，丢给 AI 看看。
很多时候，AI 看到截图就能直接给出解决方案。
2.1 常见现象怎么描述
💡 直接描述即可
页面白屏
页面打开是空白的，怎么办？
[截图]按钮点击没反应
点击这个按钮没反应，帮我看看。
[截图]数据保存不了
点了保存，数据没存上，怎么办？
[截图]样式显示不对
这个按钮位置偏了，怎么调整？
[截图]接口报错
调用接口报错了，帮我看看。
[截图]2.2 如果 AI 直接解决了
恭喜你，问题解决了！按照 AI 说的修改即可。
2.3 如果 AI 说"需要更多信息"
这时候才需要打开 F12，补充关键信息。往下看。
3. 第二步：补充关键信息
当 AI 说需要更多信息时，根据问题类型，打开 F12 截取对应的内容。
3.1 什么时候需要补充信息
AI 可能会这样回复：
- "请打开 Console 看看有没有报错"
- "截图 Network 面板给我看看"
- "需要看具体的错误信息"
这时候，根据下面的指引补充截图。
3.2 补充 Console 信息（页面白屏/报错）
💡 操作步骤
第一步：按 F12 打开开发者工具
Mac 是 Cmd+Option+I，或者右键页面选"检查"。
第二步：切换到 Console 标签页
第三步：截图红色报错信息
第四步：发给 AI
Console 报错如下：
[截图]3.3 补充 Network 信息（数据问题/API 报错）
💡 操作步骤
第一步：按 F12 打开开发者工具
第二步：切换到 Network 标签页
第三步：重新操作一遍（点保存/刷新页面）
第四步：找到对应请求，截图
- 看 URL 和状态码
- 看 Payload（传的参数）
- 看 Response（返回结果）
第五步：发给 AI
Network 信息如下：
请求：[截图1]
参数：[截图2]
返回：[截图3]3.4 补充 Elements 信息（样式问题）
💡 操作步骤
第一步：右键元素 → "检查"
开发者工具会自动定位到该元素。
第二步：截图 Styles 面板
第三步：发给 AI
元素样式如下：
[截图]4. 第三步：迭代直到解决
4.1 低效的做法
这些做法会浪费你的时间：
看到报错就慌张，开始瞎改代码 花半小时搜索错误解决方案 试图自己理解每个错误的意思 一个人 debug 到深夜
4.2 高效的做法
按照这套流程来：
先直接描述现象截图提问 AI 说需要更多信息时，再打开 F12 补充 按照建议修改代码 改完后测试，如果问题还在就继续截图提问
5. 总结：完整流程
遇到问题
↓
直接描述现象 + 截图
↓
丢给 AI："怎么办？"
↓
AI 直接解决？
↓ 是
按 AI 说的做
↓
测试是否解决
↓
↓ 否 / AI 需要更多信息
打开 F12，补充关键信息
↓
再发给 AI
↓
重复直到解决📄 This content is adapted from the Easy-Vibe project by Datawhale, licensed under CC BY-NC-SA 4.0. You are free to share and adapt this material with attribution, for non-commercial purposes, under the same license.