console.log、info、warn和error有什么区别？JS日志级别详解

题图：ECMAScript 控制台日志管道与多运行时架构流向

一、四种日志方法的语义定位与核心表现差异

很多开发者在初学阶段习惯使用 console.log 打天下，无论是变量探针、流程跟踪还是捕获异常都一律使用同一方法。这种做法在小型演示项目中尚可应付，但一旦进入业务复杂的大型系统，控制台很快就会被泛滥的白色文本淹没，导致致命错误被忽略。理解四种方法的语义边界是规范化编码的第一步。

1. console.log()：通用调试探针

console.log() 是使用频率最高的方法，其设计定位是常规通用信息与临时调试探针。在浏览器控制台中，它以最普通的默认样式（黑色或暗黑模式下的浅灰白色文本）输出，不带有任何特殊的警示图标。

在 DevTools 的分级过滤器中，console.log() 属于 Info 分组。它的核心价值在于轻量、直接，适合在开发阶段验证某些局部变量的即时取值或函数是否被触发。

2. console.info()：业务状态与重要信息通告

console.info() 的语义是信息性通告（Informational Logging）。它表示系统正在按照预期正常运作，但记录的内容具有阶段性、业务性的里程碑意义。例如：“应用版本 v2.4.0 初始化就绪”、“WebSocket 握手成功并接入节点 #3”、“用户身份验证通过”。

在渲染差异上：早期的 Firefox 与特定版本的 Safari 控制台会为 console.info() 前置一个蓝色的感叹号或圆形 ℹ 图标；在现代 Chromium 浏览器中，为了保持控制台界面的平整度，它与 console.log() 的前缀视觉差被精简，但依然在底层打上了完整的 Info 级别元数据标签。

3. console.warn()：潜在风险与非致命告警

console.warn() 用于指示可能导致意外情况的非致命警示（Warning）。此时程序依然能够继续向下运行，并未崩溃，但已经处于非最佳状态或存在潜在隐患。常见使用场景包括：

• 调用了已被标记为 @deprecated 的旧版 API，提醒调用方尽快迁移；
• 接口返回数据缺失了非必要字段，系统自动触发了保底默认兜底策略；
• 检测到内存占用过高或某个异步操作耗时异常偏长。

在浏览器 DevTools 中，console.warn() 会以醒目的黄色/琥珀色背景及黄色三角感叹号 ▲ 呈现，并且在消息右侧或展开后附带轻量级的调用栈信息（Call Stack），方便开发者快速逆向溯源到引发告警的代码行。

4. console.error()：运行中断与严重异常追踪

console.error() 代表阻断当前流程或业务失败的严重错误（Severe Error）。例如：网络请求返回 500/404 导致数据加载失败、JSON 反序列化崩溃、未捕获的 Promise Rejection 等。

当执行 console.error() 时，浏览器控制台会以高对比度的淡红/暗红背景和红色圆圈错号 ✖ 显示。更为关键的是，无论你传入的是普通字符串还是 Error 实例，控制台都会默认自动捕获并渲染完整的交互式调用栈（Interactive Stack Trace）。展开该堆栈，可以逐层点击进入对应的源码文件和具体代码行号（若配有 Source Map 则直接定位回 TypeScript/JSX 源码）。

图 1：四种核心日志方法关键维度全量技术对照表

二、运行时底层流与环境差异：DevTools vs Node.js

同样一行日志代码，在前端浏览器环境与后端 Node.js 环境中，底层的执行管道存在本质区别。这也是许多全栈开发者在处理日志重定向时容易混淆的关键所在。

1. 浏览器 DevTools 中的多级门控过滤

现代浏览器的 Console 面板并不是一个简单的文本接收器，而是一个带有分级过滤门控（Level Filter Gate）的虚拟化渲染容器。在 Chrome DevTools 的右上角，提供了 Levels 下拉选择框，包含四个核心等级：

• Verbose（详细）：接收 console.debug()，默认通常处于未勾选状态；
• Info（信息）：接收 console.log() 和 console.info()；
• Warnings（警告）：独立接收 console.warn()；
• Errors（错误）：独立接收 console.error()。

这一机制允许开发者在排查复杂的生产环境 Bug 时，一键取消勾选 Info，使屏幕仅保留 Warnings 与 Errors。如果你的代码全篇混用 console.log()，该过滤功能将彻底失效。

图 2：浏览器 DevTools 控制台日志级别多级门控与分流机制

2. Node.js 运行时的 POSIX 标准流绑定（stdout vs stderr）

在 Node.js 服务端，没有所谓的图形化 DevTools 面板，Console API 的底层直接绑定到操作系统的标准 POSIX 文件描述符（File Descriptors）上：

这种流分发机制在生产运维中至关重要。例如通过 Docker 部署的 Node.js 容器，日志收集探针（如 Fluentd、Filebeat、Promtail）通常会根据输出流来源（stdout 还是 stderr）自动为日志行打上严重性标签。如果将严重错误写在 console.log 中，监控系统将无法及时触发告警。

三、控制台日志调试的高级实战操作步骤

掌握了级别区别之后，在日常开发和线上问题排查中，建议遵循以下标准步骤组织控制台调试过程：

图 3：控制台日志分级调试与工程排查标准四步操作法

步骤一：语义对齐与正确传参（警惕引用突变陷阱）

在打印复杂对象时，初学者常常写出以下代码：

// 存在隐患的写法
const user = { name: "Alice", role: "guest" };
console.log("当前用户信息：" + user); // 输出: 当前用户信息：[object Object]
console.log("用户信息对象：", user);
user.role = "admin"; // 后续代码修改了属性

正确规范：需要快照对象当时的状态时，推荐使用深拷贝或者 JSON.parse(JSON.stringify(obj)) 固化快照，或者使用规范的占位符：

// 规范写法 1：格式化占位符 (%o 展开对象，%s 字符串，%d 数值)
console.info("用户 [%s] 已登录，权限代码: %d", user.name, 101);

// 规范写法 2：即时深拷贝快照，避免异步展开被突变影响
console.log("用户初始化快照:", structuredClone(user));

// 规范写法 3：error 输出必须传入真实的 Error 实例，而非纯字符串
try {
  throw new Error("连接远程服务超时 [ETIMEDOUT]");
} catch (err) {
  // 错误做法: console.error("发生错误: " + err.message); // 丢失完整调用栈！
  // 正确做法: 将错误对象作为独立参数传入
  console.error("远程调用失败，上下文信息:", { retryCount: 3 }, err);
}

步骤二：结构化分组与折叠（console.groupCollapsed）

当执行批量操作（例如渲染大型表格、执行批处理请求）时，散落的日志会让控制台极其混乱。使用 console.groupCollapsed() 可以让日志默认收起，保持界面清爽：

function executeTransaction(orderId, items) {
  console.groupCollapsed(`[订单交易处理] 订单号: #%s`, orderId);
  console.info("开始校验库存，商品总数: %d", items.length);
  items.forEach((item, index) => {
    console.log(`- 检查项目 [%d]: %s (数量: %d)`, index + 1, item.name, item.qty);
  });
  console.info("库存校验通过，准备提交网关");
  console.groupEnd(); // 务必关闭分组
}

步骤三：利用 trace() 与度量 API 定位调用链路与瓶颈

在复杂的组件树或事件总线（EventBus）架构中，某个函数可能在数十个不同位置被调用。仅靠 console.log("here") 无法得知究竟是哪一段业务代码触发了执行。此时应调用 console.trace()：

function onStateChanged(newState) {
  if (!newState.isValid) {
    // 打印当前调用链，精确指出是从哪个组件的哪个事件冒泡上来的
    console.trace("[StateAudit] 状态非法变更调用回溯");
  }
}

// 性能耗时度量
console.time("大数据列表过滤与计算耗时");
// ... 执行计算密集型任务 ...
console.timeEnd("大数据列表过滤与计算耗时"); 
// 浏览器会自动输出类似: "大数据列表过滤与计算耗时: 12.458ms"

四、生产环境下的日志治理与工程化落地

在研发阶段，日志是排错利器；但在生产环境中，肆意残留的调试日志会带来严重问题：

• 敏感信息泄露：用户手机号、Token、加密密钥若通过 console.log 打在控制台，任何打开 F12 的人均可直接查阅；
• 内存泄露隐患：被控制台输出的对象引用在特定浏览器中可能被持久持有，阻碍垃圾回收器（GC）释放内存；
• 主线程卡顿：如果在每秒触发数百次的 scroll、mousemove 或高频 WebSocket 消息中执行大量输出，控制台 DOM 节点激增将引发明显的页面掉帧。

图 4：企业级全生命周期日志治理与多环境分流架构

1. 构建阶段自动剥离调试日志

现代打包工具提供了强大的 AST 插件，可以在构建生产环境包时自动清除 console.log 和 console.info，同时安全保留 console.error 和 console.warn：

// vite.config.ts / rollup.config.js 配置示例
import { defineConfig } from 'vite';

export default defineConfig({
  esbuild: {
    // 仅在生产构建时剔除常规 log 与 info，保留 warn 和 error 供异常告警捕获
    drop: process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [],
  },
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        // 更细粒度的指定剔除的方法名称
        pure_funcs: process.env.NODE_ENV === 'production' 
          ? ['console.log', 'console.info', 'console.debug'] 
          : []
      }
    }
  }
});

2. 轻量级 Logger 门面模式设计

在企业项目中，推荐通过单例或模块封装统一的 Logger 工具类，集中管理环境判断、时间戳格式化与监控平台对接：

// src/utils/logger.ts
type LogLevel = 'debug' | 'info' | 'warn' | 'error';

class AppLogger {
  private isProd = process.env.NODE_ENV === 'production';

  debug(message: string, ...args: any[]) {
    if (!this.isProd) {
      console.debug(`%c[DEBUG]%c ${message}`, 'color:#64748B;font-weight:bold;', '', ...args);
    }
  }

  info(message: string, ...args: any[]) {
    if (!this.isProd) {
      console.info(`%c[INFO]%c ${message}`, 'color:#345E82;font-weight:bold;', '', ...args);
    }
  }

  warn(message: string, ...args: any[]) {
    // 警告级别在开发与生产环境中均保留
    console.warn(`[WARN] ${message}`, ...args);
  }

  error(message: string, error?: any, context?: Record<string, any>) {
    console.error(`[ERROR] ${message}`, error, context);
    if (this.isProd && window.Sentry) {
      // 生产环境自动同步上报至异常遥测平台
      window.Sentry.captureException(error || new Error(message), {
        extra: context
      });
    }
  }
}

export const logger = new AppLogger();

五、日志级别选用决策矩阵与总结

为了在团队日常协作中达成共识，可以参考如下决策矩阵快速做出判断：

核心总结：console.log、console.info、console.warn 和 console.error 不仅仅是文本打印工具，它们是软件可观测性（Observability）在客户端及运行时环境的起点。区分日志级别的本质，是将开发调试信息、系统运行通告、潜在风险警告与阻断性故障进行严格解耦。在日常编码中坚持按语义选择对应级别，结合 DevTools 过滤与生产自动化剥离，能够让前端代码兼具高效的可调试性与稳健的线上防护能力。