4.5.2 用 AI 帮你修 AI 的代码
经过本节学习，你将掌握：
- 向 AI 报告问题的标准流程
- 诊断、修复、验证的三个 Prompt 模板
- 避免无效沟通的常见误区
Debug 的三步流程
用 AI 修复代码问题，遵循「诊断 → 修复 → 验证」的三步流程：
┌─────────┐ ┌─────────┐ ┌─────────┐
│ 诊断 │ → │ 修复 │ → │ 验证 │
│ 找到原因 │ │ 获取方案 │ │ 确认解决 │
└─────────┘ └─────────┘ └─────────┘每一步都有对应的 Prompt 模板。
第一步：诊断 Prompt
目标：让 AI 帮你分析问题原因，而不是直接给修复代码。
诊断 Prompt 模板：
我的待办清单代码出现了问题，请帮我分析原因。
【错误现象】
[描述你看到了什么]
【控制台报错】
[粘贴完整的报错信息，包括行号]
【相关代码】
[粘贴报错位置附近的代码，大约 10-20 行]
请帮我分析：
1. 这个错误是什么意思？
2. 最可能的原因是什么？
3. 应该检查哪些地方？
先不要给修复代码，我想先理解问题。为什么先诊断：直接让 AI 修复，有时会「治标不治本」。先理解问题，你才能判断 AI 的修复方案是否靠谱。
诊断 Prompt 示例：
我的待办清单代码出现了问题，请帮我分析原因。
【错误现象】
点击添加按钮后，任务没有出现在列表中
【控制台报错】
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
at addTask (index.html:45:15)
【相关代码】
function addTask() {
const input = document.querySelector('.task-input');
const taskText = input.value.trim();
if (taskText) {
tasks.push({ text: taskText, completed: false });
renderTasks();
input.value = '';
}
}
请帮我分析：
1. 这个错误是什么意思？
2. 最可能的原因是什么？
3. 应该检查哪些地方？
先不要给修复代码，我想先理解问题。第二步：修复 Prompt
目标：在理解问题后，让 AI 提供修复方案。
修复 Prompt 模板：
根据刚才的分析，请帮我修复这个问题。
【问题原因】
[用你自己的话复述 AI 分析的原因]
【修复要求】
1. 给出修复后的完整代码
2. 用注释标注修改的地方
3. 解释为什么这样修改能解决问题
【技术要求】
- 保持原有的代码风格
- 不要改动其他功能
- 关键逻辑添加中文注释修复 Prompt 示例：
根据刚才的分析，请帮我修复这个问题。
【问题原因】
tasks 变量在使用前没有初始化，所以是 undefined，无法调用 push 方法
【修复要求】
1. 给出修复后的完整代码
2. 用注释标注修改的地方
3. 解释为什么这样修改能解决问题
【技术要求】
- 保持原有的代码风格
- 不要改动其他功能
- 关键逻辑添加中文注释第三步：验证 Prompt
目标：修改代码后，让 AI 帮你确认问题是否真正解决。
验证 Prompt 模板：
我已经按照你的建议修改了代码。请帮我验证：
【修改后的代码】
[粘贴修改后的代码]
【当前状态】
[描述现在的运行情况]
请确认：
1. 原来的问题是否解决了？
2. 修改是否引入了新的问题？
3. 还有什么需要注意的地方？有效信息采集清单
向 AI 报告问题时，提供的信息越完整，AI 的回答越准确。
必须提供的信息：
| 信息类型 | 说明 | 获取方式 |
|---|---|---|
| 错误现象 | 发生了什么 | 用自己的话描述 |
| 控制台报错 | 完整的报错文本 | 从控制台复制 |
| 相关代码 | 报错位置附近的代码 | 根据行号定位 |
建议提供的信息：
| 信息类型 | 说明 | 获取方式 |
|---|---|---|
| 你的操作步骤 | 做了什么导致报错 | 回忆并记录 |
| 之前的状态 | 报错前代码是否正常 | 回忆 |
| 已尝试的方法 | 你做过哪些尝试 | 记录 |
常见沟通误区
以下是一些无效的问题描述，以及如何改进：
误区 1：描述太模糊
| 无效描述 | 有效描述 |
|---|---|
| "代码不工作" | "点击添加按钮后，任务没有出现在列表中" |
| "有个错误" | "控制台显示 TypeError: Cannot read properties of undefined" |
| "样式有问题" | "任务列表的背景色消失了，变成了白色" |
误区 2：不提供报错信息
| 无效做法 | 有效做法 |
|---|---|
| "控制台有报错" | 复制完整的报错信息，包括行号 |
| "我看到红色文字" | 截图或复制红色文字的内容 |
误区 3：一次问太多问题
| 无效做法 | 有效做法 |
|---|---|
| "添加不行，删除也不行，刷新还丢数据" | 先解决一个问题，确认修复后再处理下一个 |
误区 4：不提供代码上下文
| 无效做法 | 有效做法 |
|---|---|
| "第 45 行有问题" | 粘贴第 40-50 行的代码，让 AI 看到上下文 |
快速修复话术
如果你想跳过诊断，直接让 AI 修复，可以用这个精简版话术：
我的待办清单报错了：
【现象】[一句话描述]
【报错】[粘贴控制台报错]
【代码】
[粘贴相关代码]
请直接给我修复后的完整代码。示例：
我的待办清单报错了：
【现象】点击添加按钮没反应
【报错】Uncaught TypeError: Cannot read properties of undefined (reading 'push')
at addTask (index.html:45:15)
【代码】
function addTask() {
const input = document.querySelector('.task-input');
const taskText = input.value.trim();
if (taskText) {
tasks.push({ text: taskText, completed: false });
renderTasks();
input.value = '';
}
}
请直接给我修复后的完整代码。本节要点
- Debug 遵循「诊断 → 修复 → 验证」三步流程
- 诊断时先理解问题，不急于要修复代码
- 提供完整信息：现象 + 报错 + 代码
- 避免模糊描述，一次只解决一个问题
- 快速修复话术适合简单问题，复杂问题建议走完整流程
接下来，让我们通过真实案例，看看这些方法如何应用。