代码报错怎么办？正确使用 AI 排查错误

写代码时遇到报错很正常。

真正容易让人卡住的，通常不是"出现了错误"，而是下面这种情况：

• 看不懂报错信息。
• 把一句报错丢给 AI，得到一大堆不相关的建议。
• 按 AI 的方法改完，错误还在，甚至出现了新问题。
• 为了让错误消失不断改代码，最后连原来的逻辑也弄乱了。

很多人会这样问 AI：

我的代码报错了，怎么解决？

这句话提供的信息太少。

AI 不知道你用的语言、框架、版本，也不知道错误发生在哪一步，更不知道你希望程序最终做什么。它只能根据有限信息猜测，答案自然容易泛泛而谈。

这一篇我们从零开始学习：代码报错后，怎样把关键信息交给 AI，让它真正帮助你缩小排查范围。

一、先建立一个正确认识：报错信息不是废话

初学者看到一长串红色报错，第一反应往往是直接复制最后一行去搜索。

但一条完整报错，通常已经包含了很多有价值的线索：

• 错误类型。
• 错误描述。
• 出错文件。
• 出错行号。
• 函数调用路径，也就是错误是怎样一步步发生的。

例如下面这条 JavaScript 报错：

TypeError: Cannot read properties of undefined (reading 'name')
    at renderUser (app.js:12:28)
    at app.js:20:1

它至少告诉了我们：

• 错误类型是 TypeError。
• 程序尝试读取一个 undefined 值的 name 属性。
• 首先应该检查 app.js 的第 12 行。
• 错误发生在 renderUser 函数中。

所以，报错不是一段需要"删除"的红字，而是一份排查线索。

使用 AI 排查错误的第一步，不是立刻让它给修复代码，而是把错误现场保存完整。

二、为什么只发一句"这个报错怎么解决"通常没有用

假设你只把下面这句话发给 AI：

TypeError: Cannot read properties of undefined 怎么解决？

AI 可能会给出很多可能性：

• 检查变量是否初始化。
• 使用可选链 ?.。
• 增加空值判断。
• 检查接口返回数据。

这些建议不一定错，但它们只是通用方向，不是针对你项目的结论。

同一个 undefined 错误，可能由完全不同的问题造成：

• 接口还没有返回数据，就开始渲染页面。
• 属性名称写错了，例如把 userName 写成 name。
• 数组下标越界，取到了不存在的数据。
• 函数调用时漏传了参数。
• querySelector 没找到页面元素。
• 异步请求失败，但代码没有处理失败结果。

如果上下文不足，AI 只能猜。

我们要做的不是让 AI "猜得更快"，而是给它足够的信息，让它像协作开发中的同事一样分析问题。

三、向 AI 提供报错信息时，至少准备这 5 类上下文

不需要把整个项目都发给 AI。

大多数报错，只要提供与问题直接相关的信息，就足够开始排查。

1. 完整报错信息和调用栈

不要只截取最后一句错误描述。

尽量把控制台中的完整报错复制出来，尤其要保留：

• 错误类型。
• 错误信息。
• 文件名和行号。
• 调用栈。

例如：

TypeError: Cannot read properties of undefined (reading 'name')
    at renderUser (app.js:12:28)
    at loadUser (app.js:18:3)

文件名和行号能帮助 AI 快速定位应该先看哪里；调用栈则能帮助它判断错误是从哪个函数传过来的。

2. 复现步骤

告诉 AI 错误在什么操作之后发生。

例如：

复现步骤：
1. 打开用户列表页面。
2. 点击第一条用户数据。
3. 页面加载详情时，浏览器控制台报错。

如果错误不是每次都会发生，也要说明触发条件：

只有用户没有填写昵称时才会报错。

这类信息可以明显减少无关猜测。

3. 报错位置附近的最小相关代码

不要一开始就粘贴几千行代码。

更有效的方式是：提供报错行前后几十行，以及调用这个函数的关键代码。

例如：

function renderUser(user) {
  userName.textContent = user.profile.name;
}

fetch("/api/user/1")
  .then((response) => response.json())
  .then((data) => {
    renderUser(data);
  });

这段代码比"整个项目压缩包"更容易让 AI 聚焦问题。

如果错误与页面元素有关，还可以补充相关 HTML：

<p id="userName"></p>

4. 运行环境和版本

同一段代码，在不同环境下可能有不同结果。

建议说明：

• 使用的编程语言和版本。
• 框架及版本。
• Node.js、Python、Java 等运行时版本。
• 包管理器。
• 操作系统。
• 是否刚升级过依赖或工具。

例如：

运行环境：
- Windows 11
- Node.js 20.11
- Vue 3
- Vite 5
- npm 10

版本信息尤其重要。

比如 AI 按 Vue 3 写了代码，而你的项目实际仍在使用 Vue 2；或者某个库的 API 已经变化，旧教程中的写法无法直接运行。

5. 预期结果、实际结果和已尝试方案

这三项能帮助 AI 明确"什么才算修复成功"。

例如：

预期结果：点击用户后展示用户昵称。
实际结果：页面没有显示昵称，控制台报错。
已尝试：我打印过 data，发现它有 id 和 userName 字段，但没有 profile 字段。

其中"已尝试方案"很重要。

它可以避免 AI 重复建议你已经做过的操作，也能让它知道你已经确认过哪些事实。

四、完整案例：用 AI 排查 undefined 报错

下面我们用一个常见案例，走一遍完整排查流程。

需求是：点击按钮后，显示当前用户的名字。

代码如下：

<button id="showUserButton">显示用户</button>
<p id="userName"></p>

<script>
  const showUserButton = document.querySelector("#showUserButton");
  const userName = document.querySelector("#userName");

  function renderUser(user) {
    userName.textContent = user.profile.name;
  }

  showUserButton.addEventListener("click", () => {
    const currentUser = {
      id: 1,
      name: "小王"
    };

    renderUser(currentUser);
  });
</script>

点击按钮后，控制台出现：

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at renderUser (index.html:8:41)
    at HTMLButtonElement.<anonymous> (index.html:17:5)

不推荐的提问方式

代码报 undefined 了，帮我改一下。

这种提问让 AI 直接输出修改后的代码，你可能知道"能改"，却不知道错误为什么发生。

推荐的提问方式

我在学习原生 JavaScript，下面代码点击按钮后报错。

完整报错：
Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at renderUser (index.html:8:41)
    at HTMLButtonElement.<anonymous> (index.html:17:5)

复现步骤：
点击"显示用户"按钮后立即报错。

相关代码：
[粘贴代码]

预期结果：
页面显示"小王"。

请按下面格式回答：
1. 用简单的话解释报错含义。
2. 指出最可能有问题的代码和原因。
3. 给出最小修改方案。
4. 说明如何验证修复是否正确。
不要重构无关代码。

AI 应该帮助我们得出的结论

在 renderUser 函数中，代码读取的是：

user.profile.name

但实际传入的 currentUser 是：

{
  id: 1,
  name: "小王"
}

对象中没有 profile 属性，因此 user.profile 的值是 undefined。

继续读取 undefined.name，就会出现报错。

根据当前的数据结构，最小修改是：

function renderUser(user) {
  userName.textContent = user.name;
}

修复后不能只看"红字消失"

修改后重新点击按钮，应该验证：

• 页面是否显示"小王"。
• 控制台是否不再报错。
• 传入其他用户对象时是否仍能正常显示。
• 如果用户没有名字，页面应该显示什么。

例如，可以再增加一个边界测试：

const currentUser = {
  id: 2
};

此时需求需要进一步明确：没有名字时，页面是显示"未填写昵称"，还是禁止展示？

这一步说明：修复一个运行错误，不代表所有业务问题都已经解决。

五、正确使用 AI 排错的 5 个步骤

遇到错误时，可以按下面的顺序操作。

保存完整报错
  ↓
确定最小复现步骤
  ↓
整理相关代码和环境信息
  ↓
让 AI 解释、提出假设和排查顺序
  ↓
小范围修改并重新验证

第一步：先保存现场，不要急着乱改

看到报错后，先记录：

• 完整错误信息。
• 报错行号。
• 当时执行的操作。
• 当前输入数据。
• 最近改过哪些代码或依赖。

如果一开始就连续修改很多地方，错误信息可能会变化，后续更难判断真正原因。

第二步：让 AI 先解释，再给修复建议

第一次提问时，可以要求 AI 先做分析：

请先不要直接给完整修复代码。
请解释报错含义，列出 3 个最可能原因，
并按排查优先级告诉我应该检查什么。

这样做有两个好处：

• 你能理解错误，不只是复制答案。
• 你可以先验证 AI 的判断，再决定是否修改代码。

第三步：一次只改一个关键点

AI 有时会一次建议修改多个文件、升级依赖、重构函数。

对于初学者，更稳妥的做法是：

1. 先确认最可能的原因。
2. 只做一个最小改动。
3. 重新运行并观察结果。
4. 如果问题仍在，再进行下一步。

小范围修改更容易定位问题，也更容易撤回不合适的改动。

第四步：把新的结果继续告诉 AI

如果按建议修改后仍然报错，不要重新发一句"还是不行"。

应该补充新的结果：

我按你的第 1 个方案修改后，原来的 TypeError 消失了，
但现在出现了下面的新错误：

[粘贴新报错]

当前代码如下：
[粘贴修改后的相关代码]

页面实际表现是：
[描述现象]

请基于这些新信息继续分析，不要重复之前已经排除的原因。

AI 排错是一个逐步缩小范围的过程。每次把新证据补充进去，答案才会越来越准确。

第五步：修复后做回归验证

报错消失后，至少检查：

• 原来的操作是否恢复正常。
• 与这段代码相关的其他功能是否受影响。
• 空值、异常值、重复操作等边界场景是否正常。
• 控制台是否出现新的警告或报错。

如果项目使用 Git，修复前先提交或暂存当前修改，会让你更安心地尝试 AI 给出的方案。

六、AI 给了很多建议，但问题仍没解决怎么办

这并不一定表示 AI 没有用，也不意味着你操作错了。

更常见的原因是：当前证据还不足，或者 AI 的某个假设不成立。

这时不要继续随机尝试所有方案，而是让排查回到"证据"。

你可以继续补充：

• 关键变量的实际打印结果。
• 接口的真实返回数据。
• 相关配置文件。
• 最小可复现代码。
• 某个建议执行后的变化。

例如，AI 怀疑接口数据结构不对，可以先自己打印：

console.log("接口返回数据：", data);

然后把真实输出发给 AI：

我打印后的实际数据如下：
{
  "id": 1,
  "userName": "小王"
}

请根据这个真实数据重新判断，
并说明应该修改前端字段名，还是修改接口返回结构。

注意：console.log 是为了确认事实，不是为了在代码里永久留下调试语句。问题修复后，应清理不再需要的调试输出。

七、这些敏感信息不要直接发给 AI

为了排错，我们需要提供上下文，但不代表可以把所有内容原样发送。

以下信息应当删除、替换或打码：

• API Key、Access Token、密钥和密码。
• Cookie、登录凭证和会话信息。
• 用户手机号、身份证号、邮箱和地址。
• 生产环境数据库连接信息。
• 公司内部域名、服务器地址和未公开业务数据。
• 完整的生产日志和真实用户数据。

例如，下面这样的连接字符串不能直接粘贴：

mysql://admin:真实密码@生产服务器地址:3306/order_db

可以替换为：

mysql://<username>:<password>@<host>:3306/<database>

排错需要的是结构和现象，不是敏感凭证本身。

八、可直接复用的 AI 排错 Prompt 模板

遇到报错时，可以复制下面模板，再把方括号中的内容补充完整：

我在开发一个 [项目类型，例如 Vue 3 待办事项页面] 时遇到报错，
请帮我分析排查思路。

运行环境：
- 操作系统：[例如 macOS]
- 语言/运行时及版本：[例如 Node.js 20]
- 框架及版本：[例如 Vue 3 + Vite]
- 包管理器：[例如 npm]

复现步骤：
1. [操作步骤 1]
2. [操作步骤 2]
3. [出现错误的操作]

完整报错：
[粘贴完整报错和调用栈]

相关代码：
[粘贴报错行附近的最小相关代码]

预期结果：
[应该发生什么]

实际结果：
[实际发生什么]

我已经尝试过：
[已做过的排查或修改]

请按以下顺序回答：
1. 用通俗语言解释这条报错。
2. 列出最可能的原因，并按优先级排序。
3. 给出每个原因的验证方法。
4. 给出最小修改方案，并解释修改原因。
5. 告诉我修复后应该测试哪些场景。

约束：
- 不要修改无关代码。
- 如果信息不足，请明确告诉我还需要补充什么。
- 不要建议我粘贴密钥、Token、Cookie 或真实用户数据。

这份模板的重点不是"写得很长"，而是让 AI 获得判断问题所需的关键信息。

九、报错修复后的复盘清单

每次解决一个错误后，不妨花 2 分钟做个小复盘：

• 这条报错的真正原因是什么？
• 我是从哪一条线索定位到它的？
• 下次遇到同类错误，应该先检查哪里？
• AI 的哪条建议有效，哪条只是猜测？
• 这次是否需要补充测试、校验或文档？

长期坚持下来，你会发现自己越来越能读懂报错，也越来越知道该怎样向 AI 提问。

AI 的价值不只是"替你改一行代码"，更重要的是帮助你建立更清晰的排查思路。

总结

• 报错信息、行号和调用栈是重要线索，不要只复制最后一句错误。
• 向 AI 提问时，至少提供完整报错、复现步骤、相关代码、运行环境和预期结果。
• 先让 AI 解释错误和给出排查顺序，再决定是否修改代码。
• 每次只做一个最小改动，修改后立即重新运行验证。
• AI 的建议需要用真实输出和测试结果验证，不能盲目照搬。
• 提供上下文时要注意隐私，密钥、Token、Cookie 和生产数据必须脱敏。

当你能清楚地描述错误现场时，AI 才能从"泛泛的问答工具"，变成真正帮你缩小排查范围的编程助手。

下一篇我们来做一周总结：

《一周总结：把 AI 当助手，而不是答案机器》

---

✍坚持原创，求关注，点赞，收藏