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

文章目录一、先建立一个正确认识报错信息不是废话二、为什么只发一句“这个报错怎么解决”通常没有用三、向 AI 提供报错信息时至少准备这 5 类上下文1. 完整报错信息和调用栈2. 复现步骤3. 报错位置附近的最小相关代码4. 运行环境和版本5. 预期结果、实际结果和已尝试方案四、完整案例用 AI 排查 undefined 报错不推荐的提问方式推荐的提问方式AI 应该帮助我们得出的结论修复后不能只看“红字消失”五、正确使用 AI 排错的 5 个步骤第一步先保存现场不要急着乱改第二步让 AI 先解释再给修复建议第三步一次只改一个关键点第四步把新的结果继续告诉 AI第五步修复后做回归验证六、AI 给了很多建议但问题仍没解决怎么办七、这些敏感信息不要直接发给 AI八、可直接复用的 AI 排错 Prompt 模板九、报错修复后的复盘清单总结✍创作者全栈弄潮儿 个人主页全栈弄潮儿的个人主页️ 个人社区欢迎你的加入全栈开发社区 专栏地址欢迎订阅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 排查错误的第一步不是立刻让它给修复代码而是把错误现场保存完整。二、为什么只发一句“这个报错怎么解决”通常没有用假设你只把下面这句话发给 AITypeError: 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. 报错位置附近的最小相关代码不要一开始就粘贴几千行代码。更有效的方式是提供报错行前后几十行以及调用这个函数的关键代码。例如functionrenderUser(user){userName.textContentuser.profile.name;}fetch(/api/user/1).then((response)response.json()).then((data){renderUser(data);});这段代码比“整个项目压缩包”更容易让 AI 聚焦问题。如果错误与页面元素有关还可以补充相关 HTMLpiduserName/p4. 运行环境和版本同一段代码在不同环境下可能有不同结果。建议说明使用的编程语言和版本。框架及版本。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报错下面我们用一个常见案例走一遍完整排查流程。需求是点击按钮后显示当前用户的名字。代码如下buttonidshowUserButton显示用户/buttonpiduserName/pscriptconstshowUserButtondocument.querySelector(#showUserButton);constuserNamedocument.querySelector(#userName);functionrenderUser(user){userName.textContentuser.profile.name;}showUserButton.addEventListener(click,(){constcurrentUser{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就会出现报错。根据当前的数据结构最小修改是functionrenderUser(user){userName.textContentuser.name;}修复后不能只看“红字消失”修改后重新点击按钮应该验证页面是否显示“小王”。控制台是否不再报错。传入其他用户对象时是否仍能正常显示。如果用户没有名字页面应该显示什么。例如可以再增加一个边界测试constcurrentUser{id:2};此时需求需要进一步明确没有名字时页面是显示“未填写昵称”还是禁止展示这一步说明修复一个运行错误不代表所有业务问题都已经解决。五、正确使用 AI 排错的 5 个步骤遇到错误时可以按下面的顺序操作。保存完整报错 ↓ 确定最小复现步骤 ↓ 整理相关代码和环境信息 ↓ 让 AI 解释、提出假设和排查顺序 ↓ 小范围修改并重新验证第一步先保存现场不要急着乱改看到报错后先记录完整错误信息。报错行号。当时执行的操作。当前输入数据。最近改过哪些代码或依赖。如果一开始就连续修改很多地方错误信息可能会变化后续更难判断真正原因。第二步让 AI 先解释再给修复建议第一次提问时可以要求 AI 先做分析请先不要直接给完整修复代码。 请解释报错含义列出 3 个最可能原因 并按排查优先级告诉我应该检查什么。这样做有两个好处你能理解错误不只是复制答案。你可以先验证 AI 的判断再决定是否修改代码。第三步一次只改一个关键点AI 有时会一次建议修改多个文件、升级依赖、重构函数。对于初学者更稳妥的做法是先确认最可能的原因。只做一个最小改动。重新运行并观察结果。如果问题仍在再进行下一步。小范围修改更容易定位问题也更容易撤回不合适的改动。第四步把新的结果继续告诉 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:passwordhost: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 当助手而不是答案机器》✍坚持原创求关注点赞收藏