4.5.1 常见错误类型速查
经过本节学习，你将掌握：
- 区分四类常见错误：语法错误、运行时错误、逻辑错误、样式错误
- 阅读浏览器控制台的报错信息
- 根据错误类型选择正确的排查方向
打开控制台：你的 Debug 第一步
控制台是浏览器内置的「错误报告器」。当代码出问题时，它会告诉你哪里错了。
| 系统 | 打开方式 |
|---|---|
| Windows | 按 F12，点击 Console 标签 |
| Mac | 按 Cmd + Option + J |
打开后，你会看到一个面板。如果有红色文字，那就是错误信息。
如何阅读报错信息
控制台的报错信息看起来像这样：
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
at addTask (index.html:45:15)
at HTMLButtonElement.<anonymous> (index.html:52:5)这段信息告诉你三件事：
| 组成部分 | 含义 | 上面例子中的值 |
|---|---|---|
| 错误类型 | 这是什么类型的错误 | TypeError |
| 错误描述 | 具体出了什么问题 | 试图读取 undefined 的 'push' 属性 |
| 错误位置 | 错误发生在哪个文件的哪一行 | index.html 第 45 行 |
有了这些信息，你就能告诉 AI 准确的问题描述。
四类常见错误
第一类：语法错误（SyntaxError）
什么是语法错误：代码写法不符合 JavaScript 的语法规则，就像写作文时标点符号用错了。
典型报错：
Uncaught SyntaxError: Unexpected token '}'Uncaught SyntaxError: missing ) after argument list常见原因：
| 原因 | 示例 |
|---|---|
| 括号不匹配 | function test( { } 少了一个 ) |
| 引号不匹配 | let name = "小李; 少了结束引号 |
| 多了或少了逗号 | {name: "小李" age: 20} 少了逗号 |
| 关键字拼写错误 | funtion 写成了 funtion |
快速定位：语法错误通常会指向具体行号，检查那一行及其附近的括号、引号、逗号。
修复 Prompt 模板：
控制台报错：SyntaxError: [具体错误信息]
错误位置：第 X 行
请帮我检查这一行附近的语法问题，找出缺失或多余的符号。第二类：运行时错误（TypeError / ReferenceError）
什么是运行时错误：代码语法没问题，但运行时出了问题。就像食谱步骤正确，但冰箱里没有需要的食材。
常见的运行时错误：
| 错误类型 | 含义 | 典型报错 |
|---|---|---|
| TypeError | 对一个值进行了不恰当的操作 | Cannot read properties of undefined |
| ReferenceError | 使用了一个不存在的变量 | xxx is not defined |
待办清单中的典型场景：
场景 1：变量是 undefined
Uncaught TypeError: Cannot read properties of undefined (reading 'push')原因：试图对一个还没有值的变量调用方法。比如任务列表 tasks 还没初始化就调用了 tasks.push()。
场景 2：函数未定义
Uncaught ReferenceError: addTask is not defined原因：调用了一个还没有定义的函数。可能是函数名拼写错误，或者代码顺序不对。
快速定位：查看报错信息中提到的变量名或方法名，检查它是否被正确定义和初始化。
修复 Prompt 模板：
控制台报错：TypeError: Cannot read properties of undefined (reading 'push')
错误位置：addTask 函数第 X 行
请帮我检查：
1. 相关变量是否被正确初始化
2. 是否存在拼写错误
3. 代码执行顺序是否正确第三类：逻辑错误（无报错但行为异常）
什么是逻辑错误：代码能运行，控制台也没有红色报错，但结果不是你想要的。这是最难排查的一类错误。
待办清单中的典型场景：
| 现象 | 可能原因 |
|---|---|
| 点击添加按钮没反应 | 事件监听器没有正确绑定 |
| 任务添加了但看不到 | 任务被添加到了错误的位置 |
| 刷新后数据丢失 | localStorage 保存逻辑没有执行 |
| 标记完成但刷新后恢复 | 完成状态没有保存到 localStorage |
| 删除按钮删错了任务 | 任务索引计算错误 |
快速定位：由于没有报错信息，需要用「排除法」逐步缩小问题范围。
修复 Prompt 模板：
我遇到了一个逻辑问题：
【现象】点击添加按钮后，任务没有出现在列表中
【期望】任务应该出现在任务列表区域
【已确认】控制台没有报错信息
请帮我检查：
1. 事件监听器是否正确绑定到按钮
2. 添加任务的函数是否被调用
3. 新任务是否被正确添加到页面的任务列表区域第四类：样式错误（CSS 问题）
什么是样式错误：功能正常，但页面显示不对。元素错位、颜色不对、布局混乱。
待办清单中的典型场景：
| 现象 | 可能原因 |
|---|---|
| 整个页面样式消失 | CSS 代码被误删或有语法错误 |
| 任务列表挤成一团 | flex 或 grid 布局设置错误 |
| 按钮看不见 | 颜色与背景相同，或元素被隐藏 |
| 手机上显示异常 | 缺少响应式设计 |
快速定位：使用浏览器的「元素检查」功能（右键 → 检查），查看元素的样式是否生效。
修复 Prompt 模板：
页面样式出现问题：
【现象】任务列表区域的样式全部消失，变成了纯文本
【期望】任务应该有背景色、边框和合理的间距
请帮我检查 CSS 代码，确保：
1. 样式选择器正确匹配 HTML 元素
2. CSS 语法没有错误
3. 关键样式属性没有被覆盖错误类型速查表
遇到问题时，用这张表快速判断属于哪类错误：
| 判断依据 | 错误类型 | 下一步行动 |
|---|---|---|
控制台有 SyntaxError | 语法错误 | 检查报错行附近的括号、引号、逗号 |
控制台有 TypeError 或 ReferenceError | 运行时错误 | 检查报错中提到的变量是否正确定义 |
| 控制台没有报错，但功能不对 | 逻辑错误 | 描述现象和期望，让 AI 帮你排查 |
| 功能正常，但显示不对 | 样式错误 | 用「检查元素」查看 CSS 是否生效 |
本节要点
- 打开控制台是 debug 的第一步，红色文字就是错误信息
- 报错信息包含三个关键部分：错误类型、错误描述、错误位置
- 四类错误各有特征：语法错误有具体位置、运行时错误提到变量名、逻辑错误没有报错、样式错误看页面显示
- 根据错误类型选择对应的排查方向，能大大提高修复效率
接下来，我们学习如何用 AI 系统化地修复这些错误。