07|【30岁前端转型全栈】前后端遇到报错怎么处理?当然是console.log和System.out.println?

前言

大家好，我是歌谣✨ B 站、知乎、C 站、抖音多平台同步更新，专注 AI 背景下的后端技术学习。

最好的种树是十年前，其次是现在。我是一名热爱写作、坚持持续学习的技术革新者。深耕 Java 后端、工作流引擎、项目实战，结合 AI 时代的技术趋势，拆解工程落地、源码与业务架构。

能关注到我的，大多是热爱学习、年轻上进的技术伙伴。欢迎私信一起交流后端、探讨技术问题，结伴学习，共同成长。

背景

一、为什么不能只靠 `console.log` 和 `System.out.println`

前端 `console.log`

优点：随手写，浏览器控制台立刻能看到。
缺点：
- 调试完要手动删，容易漏。
- 复杂对象打印不全，嵌套深了显示 [Object]。
- 异步、循环里打印太多，控制台刷屏。
- 生产环境不能留。

后端 `System.out.println`

优点：零依赖，新手最快上手。
缺点：
- 没有日志级别（INFO/DEBUG/ERROR）。
- 没有时间戳、线程名、类名、traceId。
- 无法按包/环境控制输出。
- 高并发下性能差，可能拖慢接口。
- 生产环境基本不可用。

所以，打印可以用，但只能应急 。真正要定位问题，得引入断点和日志框架。

操作

二、前端：从 `console.log` 到浏览器断点

1. 基础打印

javascript 复制代码

console.log('user:', user);console.error('请求失败:', err);console.table(list);// 表格展示数组

2. `debugger` 语句

在代码里写：

ini 复制代码

debugger;

打开浏览器 DevTools，代码运行到这里会自动暂停，效果等同于手动打断点。

3. 浏览器 DevTools 断点

打开 Chrome/Edge DevTools → Sources 面板：

在左侧文件树找到源码，点击行号，出现蓝色标记，就是行断点。
触发后，右侧会显示：
- Scope：当前作用域变量
- Call Stack：调用栈
- Watch：手动添加要监视的表达式
顶部控制按钮：
- Resume：继续运行
- Step Over：单步跳过
- Step Into：进入函数
- Step Out：跳出函数

4. 高级断点

条件断点 ：右键行号 → Add conditional breakpoint，比如 i === 100 才停。
日志断点：右键行号 → Add logpoint，不暂停，只输出日志，相当于"不删代码的 console.log"。
异常断点 ：在 Sources 面板右侧的 Breakpoints 里勾选 Pause on caught exceptions，抛出异常时自动暂停。
XHR/Fetch 断点：在 Sources → XHR/Fetch Breakpoints 里加 URL 关键字，请求发出时暂停。

5. Network 面板

接口报错先看 Network：

请求 URL、方法、参数
响应状态码（400/401/500）
响应体（后端返回的错误信息）
请求头（token、content-type）

这样能快速判断是前端传错，还是后端返回错。

三、后端：从 `System.out.println` 到 IDE 断点

1. 用日志框架代替 `System.out.println`

推荐 SLF4J + Logback ，Lombok 的 @Slf4j 最方便：

java

less 复制代码

@Slf4j@ServicepublicclassUserService{publicvoidcreate(User user){        log.info("创建用户, userId={}, name={}", user.getId(), user.getName());        log.debug("详细参数: {}", user);try{// ...}catch(Exception e){            log.error("创建用户失败, userId={}", user.getId(), e);}}}

好处：

有级别：info、debug、warn、error
有时间、线程、类名
可配置输出到文件、按天切割
生产环境可通过配置关闭 debug

2. IDE 断点（以 IntelliJ IDEA 为例）

在代码行号左侧点击，出现红点，就是行断点。
以 Debug 模式启动项目，请求触发后程序暂停。
调试面板：
- Frames：调用栈
- Variables：当前变量值
- Watches：监视表达式
控制按钮：
- Resume：继续
- Step Over：单步跳过
- Step Into：进入方法
- Step Out：跳出方法
- Evaluate Expression ：临时执行表达式，比如 req.getProjectCode()

3. 高级断点

条件断点 ：右键红点 → Condition，填 req.getProjectCode().equals("P001")，只有满足条件才停。
异常断点 ：Run → View Breakpoints → 添加 Java Exception Breakpoint，比如 NullPointerException，抛出时自动暂停。
方法断点：在方法签名行打断点，进入/退出方法时暂停。
字段断点：在字段上打断点，读写该字段时暂停。
日志断点：右键断点 → 取消 Suspend，勾选 Evaluate and log，不暂停只打印，适合生产排查。