【前端】前端控制台报错速查手册（完整版）

最新推荐文章于 2025-10-18 03:58:55 发布

全栈前端老曹

最新推荐文章于 2025-10-18 03:58:55 发布

阅读量1.4k

点赞数 45

CC 4.0 BY-SA版权

分类专栏：前端教程前端业务实践原生JS教程与实战文章标签：前端 console javascript 报错控制台

本文链接：https://blog.csdn.net/qq_38060125/article/details/148389585

前端教程同时被 3 个专栏收录

98 篇文章

订阅专栏

前端业务实践

48 篇文章

订阅专栏

原生JS教程与实战

27 篇文章

订阅专栏

以下是老曹总结的《前端控制台报错速查手册》的完整版内容大纲和核心章节，涵盖前端开发中所有常见控制台报错类型、错误规则、调试技巧与解决方案，适用于 Vue、React、原生 JS 项目等各类前端技术栈。

📘 前端控制台报错速查手册（完整版）

📚 目录

控制台基础介绍
报错分类与级别说明
JavaScript 错误类型详解
网络请求错误码解析
模块加载与构建错误
路由与页面跳转错误
数据绑定与响应式异常
浏览器兼容性问题
第三方库相关报错
性能监控与优化建议
实战调试技巧
常见报错修复模板
附录：工具推荐与资源链接

1️⃣ 第一章：控制台基础介绍

控制台的作用

显示运行时错误信息
输出日志用于调试
查看网络请求状态
分析性能瓶颈
操作 DOM 元素

如何打开控制台？

Chrome / Edge / Firefox：
- 快捷键：F12 或 Ctrl + Shift + I（Windows/Linux），Cmd + Option + I（Mac）
- 右键页面 → “检查” → 切换到 Console 标签页

2️⃣ 第二章：报错分类与级别说明

类型	图标	描述
`Error` ❌	红色 ×	致命错误，脚本停止执行
`Warning` ⚠️	黄色 ⚠️	警告，不影响运行但可能存在问题
`Info` ℹ️	蓝色 i	一般信息提示
`Log` 💬	白色 log	普通日志输出（console.log）
`Debug` 🐛	灰色 dot	用于调试信息（console.debug）

3️⃣ 第三章：JavaScript 错误类型详解

✅ `ReferenceError`

含义：引用了未定义的变量或函数。
示例：
```
console.log(x); // x 未定义
```
修复：
- 检查变量是否声明
- 是否拼写错误
- 是否作用域外访问

✅ `TypeError`

含义：操作非法数据类型。
示例：
```
let obj = null;
console.log(obj.name);
```
修复：
- 加空值判断
- 使用可选链 obj?.name

✅ `SyntaxError`

含义：语法错误，代码无法被解析。
示例：
```
let a = "hello; // 少引号
```
修复：
- 检查括号、引号匹配
- 使用 ESLint 预防语法错误

✅ `RangeError`

含义：数值超出允许范围。
示例：
```
function loop() { loop(); }
loop();
```
修复：
- 避免无限递归
- 设置递归终止条件

✅ `URIError`

含义：URL 编解码错误。
示例：
```
decodeURIComponent('%');
```
修复：
- 使用 try…catch 包裹
- 对输入进行合法性校验

✅ `EvalError`

含义：使用 eval() 函数时出错（现代浏览器较少使用）。

4️⃣ 第四章：网络请求错误码解析

状态码	含义	常见场景
`400 Bad Request`	请求格式错误	参数缺失、JSON 格式错误
`401 Unauthorized`	未授权	Token 失效
`403 Forbidden`	禁止访问	权限不足
`404 Not Found`	资源不存在	URL 错误
`500 Internal Server Error`	服务器内部错误	后端崩溃
`502 Bad Gateway`	网关错误	Nginx 或反向代理配置错误
`504 Gateway Timeout`	网关超时	后端响应太慢

5️⃣ 第五章：模块加载与构建错误

常见错误：

Cannot find module 'xxx'
Module not found: Error: Can't resolve 'xxx'
Failed to fetch dynamically imported module
Uncaught SyntaxError: Unexpected token '<'

修复方法：

执行 npm install
检查路径大小写、相对路径正确性
Vite/webpack 配置动态导入方式
确保开发服务器已启动

6️⃣ 第六章：路由与页面跳转错误

常见错误：

NavigationDuplicated（Vue Router v4+）
No route matched with the incoming path
页面空白无报错（history 模式部署问题）

修复方法：

使用 try...catch 捕获导航异常
修改为 hash 模式或配置服务器重定向
添加 fallback 路由处理 404

7️⃣ 第七章：数据绑定与响应式异常

常见错误：

Computed property was assigned a value
Set operation on key "xxx" failed: target is readonly
TypeError: Cannot assign to read only property 'xxx' of object '#<Object>'

修复方法：

使用 .value 修改 ref 值
使用 toRefs() 替代 reactive()
避免直接修改 props
正确使用 watch 和 computed

8️⃣ 第八章：浏览器兼容性问题

常见错误：

Promise is not defined（IE 不支持 Promise）
Arrow function is not supported in this browser
CSS variable is not recognized

解决方案：

使用 Babel 转译 ES6+
引入 polyfill 支持旧浏览器
设置 PostCSS 自动添加前缀
使用 feature detection 替代 browser sniffing

9️⃣ 第九章：第三方库相关报错

常见错误：

jQuery is not defined
Vue is not defined
Can't import the named export 'xxx' from non EcmaScript module
Invariant Violation: xxx must be used within a Provider

修复方法：

检查依赖安装与引入顺序
使用按需引入插件（如 babel-plugin-import）
升级库版本解决兼容性问题

🔟 第十章：性能监控与优化建议

控制台相关指标：

Performance 面板查看加载时间
Network 面板查看请求耗时
Memory 面板检测内存泄漏
Lighthouse 审计性能评分

🔪 第十一章：实战调试技巧

技巧	说明
`console.table(data)`	表格展示对象数组
`console.time()` / `console.timeEnd()`	计算执行时间
`debugger` 关键字	在代码中插入断点
`$0` / `$_`	获取最近选中的 DOM 或表达式结果
`Sources` 面板	设置断点、单步执行、查看调用堆栈
`Network` 面板	查看请求头、响应体、加载时间

🛠️ 第十二章：常见报错修复模板

报错类型	示例代码	修复方式
ReferenceError	`console.log(x)`	声明变量或检查拼写
TypeError	`obj.undefinedProp`	使用 `?.` 运算符
URIError	`decodeURIComponent('%')`	增加 try/catch
404 Not Found	请求地址错误	检查 API 地址或路径别名
Module not found	`import xxx` 报错	检查路径或执行 npm install
NavigationDuplicated	Vue Router 报错	全局捕获异常
White Screen	页面空白	检查路由模式、静态资源路径

📎 第十三章：附录

工具推荐

名称	用途
Chrome DevTools	主力调试工具
Vue Devtools	Vue 项目调试
React Developer Tools	React 项目调试
Lighthouse	性能审计
Sentry	线上错误收集平台
Bugsnag	错误追踪与分析

学习资源

名称	链接
MDN Console API 文档	https://developer.mozilla.org/zh-CN/docs/Web/API/Console
Vue 3 官方文档	https://vuejs.org/guide/
React 官方文档	https://reactjs.org/docs/getting-started.html
Webpack 官方文档	https://webpack.js.org/concepts/
Vite 官方文档	https://vitejs.dev/guide/