---
title: "4.5.2 用 AI 帮你修 AI 的代码"
order: 3
---


![04-practice-0-to-1_4.5-debug_4.5.2-fix-with-ai.png](/images/Basic/04-practice-0-to-1_4.5-debug_4.5.2-fix-with-ai.png)
# 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 遵循「诊断 → 修复 → 验证」三步流程
- 诊断时先理解问题，不急于要修复代码
- 提供完整信息：现象 + 报错 + 代码
- 避免模糊描述，一次只解决一个问题
- 快速修复话术适合简单问题，复杂问题建议走完整流程

接下来，让我们通过真实案例，看看这些方法如何应用。

→ [4.5.3 真实案例复盘](./4.5.3-real-cases.md)