文章目录一、代码检查不是只看有没有报错二、第一层检查语法是否正确新手怎么检查语法让 AI 帮你检查语法三、第二层检查代码能不能正常运行运行检查要看什么对照运行环境检查四、第三层检查功能结果是否正确例子待办数量统计如何判断功能结果正确使用验收表五、第四层检查边界和异常是否处理常见边界情况让 AI 帮你生成边界测试六、第五层检查是否适合当前项目1. 是否符合项目结构2. 是否重复实现已有能力3. 是否新增了不必要的依赖4. 是否修改了无关代码七、检查安全和隐私风险1. 不要把敏感信息写死2. 检查用户输入3. 检查权限八、让 AI 进行一次代码验收九、使用 Git 或备份保护修改检查改动范围十、一个完整的检查流程第一步检查语法第二步检查启动第三步检查正常功能第四步检查边界第五步检查需求范围第六步记录问题十一、常见误区误区一只检查代码不检查需求误区二只测试一次成功场景误区三把 AI 的自我检查当作最终验收误区四发现问题就让 AI 全部重写十二、一份可收藏的代码验收清单十三、总结✍创作者全栈弄潮儿 个人主页全栈弄潮儿的个人主页️ 个人社区欢迎你的加入全栈开发社区 专栏地址欢迎订阅AI 编程提效实战上一期我们用 AI 完成了一个简单的待办事项页面。流程大致是明确需求 ↓ 让 AI 制定计划 ↓ 让 AI 生成代码 ↓ 在浏览器中运行 ↓ 测试添加、完成和删除代码能够运行之后很多新手会产生一个疑问页面能打开按钮也能点击是不是就说明代码没有问题答案是不一定。代码没有报错只能说明它暂时没有触发明显错误。它仍然可能存在没有满足完整需求。某些输入会导致结果错误。页面刷新后数据丢失。删除一条数据时影响了其他数据。引入了不必要的依赖。修改了项目中原本正常的功能。存在安全或隐私风险。所以AI 写完代码后我们还需要完成一个重要步骤对 AI 生成的代码进行验收。今天我们从零开始学习一套简单的检查方法帮助你判断一段 AI 代码是否真的可以使用。一、代码检查不是只看有没有报错很多初学者检查代码时只关注下面两件事编辑器有没有红色提示。浏览器能不能打开页面。这两个检查当然有用但还不够。我们可以把代码质量检查分成 5 个层次第一层语法是否正确 ↓ 第二层代码是否能够运行 ↓ 第三层功能结果是否正确 ↓ 第四层边界和异常是否处理 ↓ 第五层是否适合项目和真实使用越靠后的检查越接近真正的交付。二、第一层检查语法是否正确语法错误是最容易发现的一类问题。例如下面的 JavaScript 少了一个右括号functiongreet(name{return你好${name};}运行时通常会直接报错代码无法执行。常见语法问题包括括号没有成对出现。引号没有闭合。大括号缺失。关键字拼写错误。JavaScript、HTML 或 CSS 语法混用。代码块嵌套关系不正确。新手怎么检查语法可以使用编辑器的错误提示。浏览器开发者工具的 Console。项目自带的检查命令。语言或框架提供的格式化工具。如果是一个简单的 HTML 文件直接在浏览器中打开按F12查看 Console 就可以发现很多问题。让 AI 帮你检查语法可以这样提问请只检查下面代码中的语法问题。 要求 1. 列出具体错误位置。 2. 解释为什么这是语法错误。 3. 给出最小修改建议。 4. 不要顺便重构代码。 代码 [粘贴代码]注意“只检查语法”这句话。如果你直接说“帮我检查代码”AI 可能同时修改命名、结构、性能和样式让你无法判断到底改了什么。三、第二层检查代码能不能正常运行语法正确不代表代码一定能运行。例如constbuttondocument.querySelector(#saveButton);button.addEventListener(click,(){console.log(保存成功);});这段代码语法没有问题。但如果页面中不存在idsaveButton的元素button就可能是null执行监听方法时会报错。运行检查要看什么运行代码时重点检查页面是否能正常打开。程序是否能正常启动。依赖是否都已经安装。文件路径是否正确。导入的变量和方法是否存在。按钮、表单和接口是否真的触发。控制台是否出现错误。对照运行环境检查AI 可能使用了你的环境不支持的写法。例如代码使用了较新的 JavaScript 语法。项目使用 Vue 2但 AI 按 Vue 3 的写法生成。项目使用 Node.js 16但代码依赖更高版本能力。AI 使用了一个项目中没有安装的第三方库。因此向 AI 提供环境信息很重要请基于以下环境检查代码是否可以运行 - 操作系统macOS - Node.js20 - 项目框架Vue 3 - 包管理器npm - 不允许新增第三方依赖四、第三层检查功能结果是否正确这是最重要的一层。代码没有报错也可能把事情做错。例子待办数量统计假设需求是显示当前未完成的待办数量。AI 生成了todoCount.textContent未完成${todos.length};这段代码可以运行但它统计的是全部待办事项不是未完成事项。正确的逻辑应该是constunfinishedCounttodos.filter((todo)!todo.completed).length;todoCount.textContent未完成${unfinishedCount};如何判断功能结果正确不要只凭“看起来对”来判断。应该把需求转换为可以操作的测试步骤。例如需求是用户可以添加待办事项。可以转换成操作输入“学习 AI 编程”点击添加。 预期列表中出现“学习 AI 编程”。需求是用户可以标记待办事项为已完成。可以转换成操作点击某条事项前面的复选框。 预期文字出现删除线未完成数量减少 1。需求只有转换成“操作”和“预期结果”才容易真正验证。使用验收表可以先列出一张简单的验收表功能操作预期结果实际结果添加待办输入内容后点击添加列表出现新事项待填写空输入校验不输入内容直接点击添加不新增事项并提示待填写标记完成点击复选框文字出现删除线待填写取消完成再次点击复选框恢复未完成状态待填写删除事项点击删除按钮事项从列表消失待填写数量统计完成一条事项未完成数量减 1待填写测试时逐项填写“实际结果”。如果实际结果和预期结果不一致就找到了需要修改的问题。五、第四层检查边界和异常是否处理很多 AI 生成的代码只演示最顺利的情况。但真实使用中用户可能输入空内容、错误类型或超长文本。常见边界情况对于一个普通函数可以检查输入为空。输入只有空格。输入为null。输入为undefined。输入类型错误。输入为 0。输入为负数。输入达到最大值。数据数组为空。数据字段缺失。对于待办事项页面可以检查1. 输入框为空时点击添加。 2. 输入框只有空格时点击添加。 3. 连续添加很多条事项。 4. 添加很长的待办内容。 5. 连续点击添加按钮。 6. 添加后立即完成。 7. 添加后立即删除。 8. 删除列表中的最后一条事项。 9. 删除后数量是否正确。让 AI 帮你生成边界测试下面是一个待办事项功能的需求和代码。 请不要修改代码只生成测试清单。 请分成 3 类 1. 正常场景。 2. 边界场景。 3. 异常场景。 每个场景请包含 - 操作步骤。 - 输入数据。 - 预期结果。 - 如果失败可能说明什么问题。AI 很适合帮助我们补充“可能没有想到的测试场景”。但测试清单仍然要结合真实需求调整。六、第五层检查是否适合当前项目一段代码功能正确也不代表适合直接放进项目。还需要检查以下内容。1. 是否符合项目结构例如项目已经规定页面放在 pages 目录。 请求方法放在 api 目录。 业务工具放在 utils 目录。但 AI 把所有代码都写进了页面组件中。即使能运行也会导致项目越来越难维护。2. 是否重复实现已有能力项目中可能已经有通用请求方法。日期格式化函数。表单校验方法。权限判断工具。统一错误提示组件。如果 AI 没有看到这些内容可能会重新写一套。这会增加重复代码和后续维护成本。3. 是否新增了不必要的依赖一个简单的日期格式化AI 可能建议安装一个很大的第三方库。新增依赖前应该确认项目中是否已经有类似依赖。这个功能是否可以用现有代码完成。新依赖是否维护正常。是否会增加构建体积和安全风险。可以要求 AI请优先使用项目已有的方法。 如果需要新增依赖请说明理由、替代方案和潜在影响。 不要默认安装第三方库。4. 是否修改了无关代码AI 有时会顺手修改无关组件。全局样式。配置文件。其他接口。不属于当前需求的工具函数。修改范围越大回归风险越高。七、检查安全和隐私风险初学者容易忽略安全检查但 AI 代码尤其需要关注这一点。1. 不要把敏感信息写死不推荐constapiKey真实的 API Key;不要把下面内容直接写进代码并提交API Key。数据库密码。登录 token。私钥。Cookie。2. 检查用户输入如果代码直接把用户输入拼到页面中需要注意安全风险。例如element.innerHTMLuserInput;如果userInput来自用户或外部接口可能带来脚本注入风险。在待办事项案例中使用title.textContenttodo.title;通常比把内容写入innerHTML更稳妥。3. 检查权限对于涉及用户数据、订单、文件和管理功能的代码要确认谁可以调用。是否需要登录。是否检查数据归属。普通用户能否访问管理员功能。不要因为 AI 没有提到权限就认为权限不重要。八、让 AI 进行一次代码验收当你自己完成初步检查后可以把需求、代码和测试结果交给 AI 进行辅助审查。建议使用下面的 Prompt请帮我验收下面这段代码但不要直接重写。 需求 [粘贴明确的功能需求和验收标准] 代码 [语言] [粘贴代码]我已经完成的测试[列出操作和实际结果]请按以下结构回答需求是否都已经覆盖。哪些功能可以从代码中确认。哪些功能需要实际运行才能确认。可能存在的语法或运行问题。可能遗漏的边界和异常情况。可能存在的安全或隐私风险。修改范围是否超出了需求。按严重程度列出问题必须修复建议修复可以暂不处理最后给出一份人工复测清单。如果无法根据现有信息判断请明确标记为“无法确认”不要自行假设。### 为什么不要直接让 AI 重写 如果你一开始就说 text 帮我把这段代码改好。AI 可能直接修改大量内容。你反而无法知道原来的问题是什么。哪些修改是必须的。哪些修改只是 AI 的个人偏好。先让 AI 验收和列问题再决定是否修改更容易掌握过程。九、使用 Git 或备份保护修改如果代码属于正式项目修改前建议保留可恢复版本。可以使用Git 提交。新建备份分支。复制一份文件。保存修改前后的差异。这样即使 AI 的修改不合适也可以快速恢复。检查改动范围每次让 AI 修改后都要查看哪些文件发生了变化 每个文件改了什么 有没有出现需求之外的修改 有没有删除原来的逻辑如果使用 Git可以重点查看代码差异而不是只看最终文件。十、一个完整的检查流程以 Day 11 的待办事项功能为例完整检查可以这样进行第一步检查语法打开index.html确认HTML 标签能够正常解析。CSS 没有明显错误。JavaScript 没有语法报错。第二步检查启动直接用浏览器打开页面确认页面能够显示。输入框和按钮存在。Console 没有红色报错。第三步检查正常功能依次测试添加一条事项 ↓ 添加第二条事项 ↓ 完成第一条事项 ↓ 删除第二条事项每一步都观察列表和数量变化。第四步检查边界测试空输入 只有空格 超长内容 连续快速点击 删除最后一条第五步检查需求范围确认代码没有额外引入登录。数据库。第三方框架。与待办功能无关的配置。第六步记录问题发现问题时不要只记“不能用”。可以按照下面的格式记录问题 输入空格后仍然新增了一条事项。 复现步骤 1. 在输入框中输入 3 个空格。 2. 点击添加。 预期结果 不新增事项并提示输入不能为空。 实际结果 列表新增了一条空白事项。有了清晰的问题记录再让 AI 帮助修复效率会更高。十一、常见误区误区一只检查代码不检查需求代码写得很漂亮但如果没有实现真正的需求仍然是不合格的。先问它解决的是我真正要解决的问题吗误区二只测试一次成功场景一次成功只能说明一个输入有效。还要测试空输入。边界值。错误输入。重复操作。多次连续操作。误区三把 AI 的自我检查当作最终验收AI 可以列出风险但它不一定真正运行了你的代码也不一定掌握全部业务背景。AI 的检查结果只能作为辅助。最终仍然要靠本地运行。自动化测试。人工操作。代码审查。误区四发现问题就让 AI 全部重写大范围重写可能引入新的问题。更好的方式是先定位一个问题 ↓ 说明复现步骤 ↓ 只修改相关部分 ↓ 重新测试十二、一份可收藏的代码验收清单每次使用 AI 生成代码后可以复制下面的清单需求检查 [ ] 代码实现了需求中列出的所有功能。 [ ] 没有把不需要的功能一起加进来。 [ ] 输入、输出和业务规则符合预期。 语法和运行 [ ] 代码没有语法错误。 [ ] 项目或页面可以正常启动。 [ ] 依赖和导入路径都存在。 [ ] 控制台没有未处理的错误。 功能测试 [ ] 测试了至少一个正常场景。 [ ] 测试了至少一个边界场景。 [ ] 测试了至少一个异常场景。 [ ] 实际结果和预期结果一致。 边界和异常 [ ] 空值可以正确处理。 [ ] 错误类型可以正确处理。 [ ] 重复操作不会产生错误结果。 [ ] 数据为空时页面不会崩溃。 项目检查 [ ] 目录和代码风格符合项目规范。 [ ] 没有修改无关文件。 [ ] 没有重复实现已有工具。 [ ] 没有新增不必要的依赖。 安全检查 [ ] 没有提交密码、token 或 API Key。 [ ] 用户输入经过合理处理。 [ ] 权限和数据归属已经确认。 [ ] 没有把敏感数据打印到日志。 交付确认 [ ] 我理解代码的主要逻辑。 [ ] 我知道如何复现和验证功能。 [ ] 我保留了可以恢复的版本。十三、总结AI 写完代码后真正重要的不是马上发布而是完成一次有条理的验收。今天我们学习了 5 个检查层次语法检查代码能不能被正确解析。运行检查项目、页面和依赖能不能正常启动。功能检查代码结果是否符合需求。边界检查空值、异常和重复操作是否处理。项目检查是否符合结构、规范、安全和修改范围。可以把这套方法浓缩成一句话先确认代码能运行再确认结果正确最后确认它适合真实项目。AI 可以帮助你写代码也可以帮助你列测试清单和发现风险。但真正的验收必须回到实际环境需求 ↓ 代码 ↓ 运行 ↓ 测试 ↓ 审查 ↓ 交付下一篇文章我们继续学习代码报错怎么办正确使用 AI 排查错误。✍坚持原创求关注点赞收藏