常见错误与排查：看到报错不再慌

遇到报错的第一反应

不要慌。记住三步骤：

1. 读：看清楚报错信息的关键词
2. 搜：复制报错第一行，粘贴给 AI
3. 改：按照 AI 的建议修改

最常见报错 Top 5

1. Cannot find module 'xxx'

含义： 找不到某个依赖包。

解决：

npm install xxx

2. xxx is not defined

含义： 使用了一个没有声明的变量或函数。

解决： 检查是否漏写了 import，或者变量名拼写错误。

3. Cannot read properties of undefined

含义： 试图访问一个不存在的数据。

示例：

const user = null;
console.log(user.name);  // ❌ user 是 null，没有 name

解决： 加一个判断 if (user) { console.log(user.name); }

4. Unexpected token

含义： 代码语法错误，比如少了一个括号。

解决： AI 通常会指出是哪一行，检查该行附近。

5. Module not found: Can't resolve 'xxx'

含义： import 的路径不对。

解决： 检查文件路径是否正确。

浏览器控制台

按 F12 打开浏览器开发者工具 → 点击 Console 标签。

这里会显示：

• 🔴 红色错误：代码有问题，必须修复
• 🟡 黄色警告：建议修复，不影响运行
• 💬 灰色信息：正常的日志输出

网络请求错误

404 Not Found

含义： 请求的地址不存在。

解决： 检查 API 地址是否写对。

500 Internal Server Error

含义： 服务器内部出错了。

解决： 这是后端的问题，把请求参数发给 AI 分析。

CORS error

含义： 跨域请求被阻止。

解决： 需要后端配置或使用代理。把错误信息发给 AI。

预览问题

页面空白

• 按 F12 → 看 Console 有没有报错
• 检查是否忘记 npm run dev

样式不生效

• 检查 CSS 文件名和路径
• 清除浏览器缓存（Ctrl+Shift+R）
• 检查是否有 CSS 优先级冲突

点击按钮没反应

• 检查事件绑定是否正确
• 在 Console 看有没有报错
• 用 console.log 确认函数是否被调用

调试工具

console.log：你的好朋友

console.log('这里执行了');
console.log('数据：', data);
console.log('类型：', typeof data);

→ 在 Console 里看到输出，就知道代码有没有跑到这里。

断点调试（进阶）

在浏览器开发者工具的 Sources 面板里，点击行号设置断点。代码执行到这里会暂停，你可以看每一步的变量值。

解决问题的通用流程

1. 看到报错 → 别慌
2. 读报错信息 → 找到关键词
3. 复制给 AI → "这个报错怎么解决？"
4. AI 给方案 → 试试看
5. 还不行？→ 把修改后的代码和新的报错一起发给 AI
6. 反复直到解决 ✅

小结

80% 的报错都可以通过”复制 → 粘贴给 AI → 按建议修改”来解决。

遇到看不懂的关键词，问 AI：

“Cannot read properties of undefined 是什么意思？”

下一篇我们将从零搭建一个完整前端的全流程实战。