排错约 20 分钟更新于 2026-07-31

第四步：学会排查 AI 代码错误

用错误现象、复现步骤和控制台信息定位问题，而不是反复要求 AI“再修一下”。

30 秒直接答案

排错时先保留可复现的错误版本，写清预期结果和实际结果，再查看浏览器控制台的第一条相关错误。把完整错误信息、相关代码和复现步骤交给 AI，要求先解释原因和最小修复，不要重写整个项目。

学完你能做到

先缩小问题范围

确认是内容、样式、交互、文件路径还是部署问题。

后续错误可能只是连锁反应。复制完整错误文本，不只发截图。

修复后不仅重试失败动作，还要确认原有内容和功能没有退化。

可复制提示词

请帮助定位网页错误，不要先重写全部代码。
预期结果：[应该发生什么]
实际结果：[实际发生什么]
复现步骤：[1、2、3]
控制台第一条相关错误：[完整错误]
相关代码：
"""
[代码]
"""
请输出：可能原因、验证方法、最小修改、修改后检查清单。

代码示例

// 常见错误：找不到元素时调用方法
const button = document.querySelector("#start");
if (button) {
  button.addEventListener("click", () => alert("开始"));
}

动手练习 · 约 20 分钟

排错清单

FAQ

没有控制台错误就代表代码正确吗？

不代表。样式、内容和逻辑错误可能不产生控制台报错，仍需按预期结果测试。

可以把整个项目发给 AI 吗？

应只提供解决问题需要的文件并先移除密钥、私人数据和无权分享的代码。

AI 解释的错误原因一定正确吗？

不一定。要通过复现、最小修改和测试验证。

浏览器、托管服务和产品界面可能变化，请以当前官方文档为准。