发布日期: 2026-04-29

文章字数: 4.6k

阅读时长: 19 分

阅读次数:

JavaScript Console 全解析：15 种高效调试用法

一、引言

你还在把 console.log 当 “万能调试工具” 吗？上周我帮同事排查 bug，他的控制台滚了 3 屏全是 “test””123”，最后发现问题出在一个被忽略的异步函数里 —— 其实只要用对 Console 方法，5 分钟就能定位问题。

本文将从基础到高级，系统讲解 JavaScript Console 的 15 种用法，包括：

基础方法：log、info、warn、error、debug
进阶方法：table、group、time、timeLog、timeEnd
高级技巧：trace、assert、count、countReset、dir、dirxml
生产环境处理方案

二、立即体验：Console 方法演示

操作提示：先打开浏览器开发者工具（按 F12），然后点击下方按钮查看各种 Console 方法的输出效果。

三、基础方法：信息分级的 “信号灯”

3.1 console.log：基础但不简单

在使用 console 进行调试时，有一些信息是我们特别关注的，我们可以使用一些特殊方式来使其更显眼。console.log 不仅能输出简单文本，还支持占位符格式化和样式化输出，让重要信息脱颖而出。

3.1.1 占位符格式化

占位符允许你将变量插入到字符串中的指定位置，让输出更加清晰和易读。常见的占位符有：

占位符	说明	示例
`%s`	字符串	`console.log('Hello %s', 'World')` → `Hello World`
`%d` / `%i`	整数	`console.log('Age: %d', 25)` → `Age: 25`
`%f`	浮点数	`console.log('PI: %f', Math.PI)` → `PI: 3.141593`
`%o`	对象	以可展开的方式显示对象
`%c`	CSS 样式	对后续文本应用 CSS 样式

// 基础用法
console.log("Hello, World!");

// 占位符用法
console.log("用户 %s 已登录，ID: %d", "Alice", 123);
console.log("圆周率: %f", Math.PI);

// 对象输出
const user = { name: "Bob", age: 30 };
console.log("用户对象: %o", user);

3.1.2 样式化输出

使用 %c 占位符可以为日志添加 CSS 样式，让重要信息在控制台中更加醒目：

// 样式化输出
console.log("%cHello", "color: red; font-size: 20px; font-weight: bold");
console.log(
  "%c警告",
  "background: yellow; color: black; padding: 2px 8px; border-radius: 4px",
);
console.log(
  "%c成功",
  "color: green; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 2px #ccc;",
);

3.2 console.error & console.warn：错误与警告

在调试过程中，并非所有信息都同等重要。有些信息需要立即引起注意，有些则只是提醒。使用 console.error 和 console.warn 可以帮助我们区分不同严重程度的问题，浏览器也会对它们进行特殊处理。

try {
  throw new Error("自定义错误");
} catch (err) {
  console.error("捕获到错误:", err);
}

console.warn("⚠️ 此 API 即将废弃，请使用新的 API");

3.3 console.info & console.debug：信息分级

随着应用复杂度的增加，日志数量会急剧增长。为了更好地管理日志，我们可以根据信息的重要程度进行分级。console.info 和 console.debug 就是为此而生的，它们在控制台中可以被选择性地显示或隐藏。

1 2	console.info("ℹ️ 用户已完成注册"); console.debug("🔍 调试信息：当前状态为 active");

四、进阶方法：让调试效率翻倍

掌握了基础方法后，学习这些进阶技巧可以让你的调试效率提升一个档次。它们不仅能帮你更好地组织和展示数据，还能精准测量代码性能。

4.1 console.table：数据可视化神器

当我们需要查看数组或对象数据时，普通的 console.log 输出可能会显得杂乱无章。

常规做法

通常我们会遍历数组并逐个输出：

const users = [
  { name: "Alice", age: 25, city: "Beijing", role: "admin" },
  { name: "Bob", age: 30, city: "Shanghai", role: "user" },
  { name: "Charlie", age: 28, city: "Guangzhou", role: "user" },
];

// 常规做法：遍历输出
console.log("用户列表:");
users.forEach((user, index) => {
  console.log(`${index + 1}. ${user.name} - ${user.age}岁 - ${user.city}`);
});

使用 console.table

console.table 可以将数据以表格形式展示，让数据结构一目了然：

const users = [
  { name: "Alice", age: 25, city: "Beijing", role: "admin" },
  { name: "Bob", age: 30, city: "Shanghai", role: "user" },
  { name: "Charlie", age: 28, city: "Guangzhou", role: "user" },
];

// 显示所有列
console.table(users);

// 只显示指定列
console.table(users, ["name", "age", "city"]);

4.2 console.group：给日志 “建文件夹”

当项目复杂时，控制台输出会变得非常混乱。我们需要一种方式来组织和管理日志。

常规做法

通常我们会使用分隔符来区分不同模块的日志：

// 常规做法：使用分隔符
console.log("===== 用户认证模块 =====");
console.log("开始验证用户身份");
console.log("验证成功，用户ID:", 123);
console.log("----- Token 生成 -----");
console.log("生成 Access Token");
console.log("生成 Refresh Token");
console.log("===== 详细日志 =====");
console.log("这是一些详细信息...");

使用 console.group

console.group 可以帮助我们将相关的日志组织在一起，形成可折叠的分组，就像在文件系统中建文件夹一样：

// 使用 console.group：创建可折叠分组
console.group("📦 用户认证模块");
console.log("开始验证用户身份");
console.log("验证成功，用户ID:", 123);
console.group("🔑 Token 生成");
console.log("生成 Access Token");
console.log("生成 Refresh Token");
console.groupEnd();
console.groupEnd();

// 默认折叠的分组（适合详细日志）
console.groupCollapsed("📋 详细日志（点击展开）");
console.log("这是一些详细信息...");
console.groupEnd();

4.3 console.time：精准测量性能

性能优化是前端开发的重要课题。精准测量代码执行时间是找出性能瓶颈的关键。

常规做法

通常我们会手动记录时间戳并计算差值：

// 常规做法：手动记录时间
const startTime = Date.now();

// 模拟数据处理
setTimeout(() => {
  console.log(`第一步完成，耗时: ${Date.now() - startTime}ms`);

  setTimeout(() => {
    console.log(`第二步完成，耗时: ${Date.now() - startTime}ms`);

    setTimeout(() => {
      console.log(`全部完成，总耗时: ${Date.now() - startTime}ms`);
    }, 300);
  }, 500);
}, 200);

使用 console.time

console.time 提供了更简洁的方式来测量时间，无需手动计算：

// 使用 console.time：自动计时
console.time("数据处理");

// 模拟数据处理
setTimeout(() => {
  console.timeLog("数据处理", "第一步完成");

  setTimeout(() => {
    console.timeLog("数据处理", "第二步完成");

    setTimeout(() => {
      console.timeEnd("数据处理"); // 自动输出总耗时
    }, 300);
  }, 500);
}, 200);

五、高级技巧：高手专属黑科技

这些是前端工程师的”压箱底”技巧，在处理复杂问题时特别有用。掌握它们，你就能在调试时游刃有余。

5.1 console.trace：追踪函数调用栈

在复杂的项目中，一个函数可能被多个地方调用。当这个函数出现问题时，我们需要知道它是从哪里被调用的。

常规做法

通常我们会手动抛出错误来查看调用栈：

function thirdPartyLib() {
  // 常规做法：手动抛出错误查看调用栈
  try {
    throw new Error("追踪调用栈");
  } catch (err) {
    console.error(err.stack);
  }
}

function myFunction() {
  thirdPartyLib();
}

myFunction();

使用 console.trace

console.trace() 可以直接打印完整的调用栈，更加简洁：

function thirdPartyLib() {
  console.trace("🔍 thirdPartyLib 调用追踪");
}

function myFunction() {
  thirdPartyLib();
}

myFunction();

5.2 console.assert：条件性报错

在调试过程中，我们经常需要检查某些条件是否满足。

常规做法

通常我们会使用 if 语句来进行条件检查：

const user = { id: null, name: "Guest" };

// 常规做法：使用 if 判断
if (!user.id) {
  console.error("❌ 用户ID不存在");
}
if (!user.name) {
  console.error("❌ 用户名不存在");
}

使用 console.assert

console.assert 提供了一种简洁的方式来进行断言检查，只有当条件为 false 时才会输出错误信息：

const user = { id: null, name: "Guest" };

// 使用 assert：更简洁的断言
console.assert(user.id, "❌ 用户ID不存在");
console.assert(user.name, "❌ 用户名不存在");

5.3 console.count：统计执行次数

在调试事件处理或循环逻辑时，我们常常需要知道某个函数被调用了多少次。

常规做法

通常我们会使用一个变量来手动维护计数器：

// 常规做法：手动维护计数器
let clickCount = 0;
function handleClick() {
  clickCount++;
  console.log(`点击次数: ${clickCount}`);
}

handleClick(); // 点击次数: 1
handleClick(); // 点击次数: 2
handleClick(); // 点击次数: 3

使用 console.count

console.count 可以自动统计调用次数，无需手动维护计数器变量，代码更简洁：

// 使用 console.count：自动统计
function handleClick() {
  console.count("👆 点击次数");
}

// 模拟点击
handleClick(); // 👆 点击次数: 1
handleClick(); // 👆 点击次数: 2
handleClick(); // 👆 点击次数: 3

// 重置计数器
console.countReset("👆 点击次数");
handleClick(); // 👆 点击次数: 1

5.4 console.dir & console.dirxml：DOM 节点解析

调试 DOM 元素时，console.log 会显示元素的 HTML 结构，但有时我们需要查看元素的所有属性和方法。console.dir 可以以对象形式展示 DOM 节点，让我们看到它的完整属性列表。

const element = document.querySelector(".demo-element");

console.log("📄 console.log (HTML结构):");
console.log(element);

console.log("\n📋 console.dir (属性对象):");
console.dir(element);

六、生产环境处理方案

6.0 为什么需要清理 Console

在开发阶段，console.log、console.debug 等方法是我们的好帮手，帮助我们快速定位问题。但当代码部署到生产环境时，这些调试语句会带来以下问题：

🔒 安全风险：

可能泄露敏感数据（如 API 密钥、用户信息、内部逻辑）
暴露应用程序的内部结构和调试信息

⚡ 性能影响：

大量 console 输出会占用浏览器资源
在移动设备上可能导致卡顿

💻 用户体验：

普通用户打开控制台会看到杂乱的日志
影响专业用户对网站的信任度

📦 代码体积：

console 语句会增加打包后的代码体积
影响首屏加载速度

因此，在生产环境中清理或屏蔽非必要的 console 语句是前端工程化的重要一环。

6.1 Webpack 配置：使用 TerserPlugin

适用场景：适用于使用 Webpack 作为构建工具的项目，通过压缩阶段自动删除 console 语句。

优势：

自动化处理，无需手动清理代码
支持精确控制要删除的 console 方法
与 Webpack 构建流程无缝集成

安装依赖：

1	npm install terser-webpack-plugin --save-dev

配置 webpack.config.js：

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 删除 console
            drop_debugger: true, // 删除 debugger
            pure_funcs: ["console.log", "console.info"], // 只删除特定方法
          },
        },
      }),
    ],
  },
};

6.2 自定义 Webpack 插件

适用场景：当 TerserPlugin 的默认配置无法满足需求时，需要更精细的控制。

优势：

完全自定义处理逻辑
可以根据文件类型、路径等条件进行过滤
支持更复杂的删除规则

实现代码：

// console-clean-plugin.js
class ConsoleCleanPlugin {
  constructor(options = {}) {
    this.options = {
      exclude: ["error", "warn"], // 保留的方法
      ...options,
    };
  }

  apply(compiler) {
    compiler.hooks.emit.tap("ConsoleCleanPlugin", (compilation) => {
      for (const filename of Object.keys(compilation.assets)) {
        if (/\.js$/.test(filename)) {
          let source = compilation.assets[filename].source();

          const deleteMethods = ["log", "info", "debug", "trace", "count"];
          const methodsToDelete = deleteMethods.filter(
            (method) => !this.options.exclude.includes(method),
          );

          const regex = new RegExp(
            `console\\.(${methodsToDelete.join("|")})\\s*\\([^)]*\\)\\s*;?`,
            "g",
          );

          source = source.replace(regex, "");
          compilation.assets[filename] = {
            source: () => source,
            size: () => source.length,
          };
        }
      }
    });
  }
}

module.exports = ConsoleCleanPlugin;

6.3 Vite 配置方案

适用场景：适用于使用 Vite 作为构建工具的现代化前端项目。

优势：

Vite 内置支持多种压缩工具
配置简单，无需额外安装过多依赖
构建速度快，开发体验好

方式一：使用 terser 压缩

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ["console.log", "console.info"],
      },
    },
  },
});

方式二：使用 esbuild 压缩（默认）

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    minify: "esbuild",
    esbuild: {
      drop: ["console", "debugger"],
    },
  },
});

6.4 封装统一的 Logger 工具

为什么需要封装 Logger 工具

在实际项目中，直接使用 console.log 存在以下问题：

1. 缺乏统一管理

项目中到处都是 console.log，难以统一控制
不同开发者使用习惯不同，日志格式混乱

2. 环境区分困难

需要手动判断环境来决定是否输出日志
容易遗漏清理，导致生产环境泄露信息

3. 功能扩展受限

无法统一添加日志级别、时间戳、模块标识
难以接入第三方日志服务（如 Sentry、Datadog）

封装 Logger 的好处

优势	说明
统一管理	所有日志通过统一入口，便于维护和修改
环境适配	自动根据环境决定是否输出日志
格式规范	统一的日志格式，便于阅读和过滤
扩展性强	轻松添加日志级别、时间戳、模块信息
便于接入	易于对接第三方日志服务和监控系统

实现代码

// src/utils/logger.js
const isProduction = process.env.NODE_ENV === "production";

const levels = {
  debug: { color: "#888", prefix: "[DEBUG]" },
  info: { color: "#3B82F6", prefix: "[INFO]" },
  warn: { color: "#F59E0B", prefix: "[WARN]" },
  error: { color: "#EF4444", prefix: "[ERROR]" },
};

export const logger = {
  debug(...args) {
    if (!isProduction) {
      console.debug(
        `%c${levels.debug.prefix}`,
        `color: ${levels.debug.color}`,
        ...args,
      );
    }
  },
  info(...args) {
    if (!isProduction) {
      console.info(
        `%c${levels.info.prefix}`,
        `color: ${levels.info.color}`,
        ...args,
      );
    }
  },
  warn(...args) {
    console.warn(
      `%c${levels.warn.prefix}`,
      `color: ${levels.warn.color}`,
      ...args,
    );
  },
  error(...args) {
    console.error(
      `%c${levels.error.prefix}`,
      `color: ${levels.error.color}`,
      ...args,
    );
  },
};

使用示例

// 在项目中使用
import { logger } from "@/utils/logger";

// 调试信息（仅开发环境显示）
logger.debug("用户登录", { userId: 123 });

// 普通信息（仅开发环境显示）
logger.info("数据加载完成");

// 警告信息（始终显示）
logger.warn("API 即将废弃，请更新");

// 错误信息（始终显示）
logger.error("请求失败", error);

6.5 ESLint 规则约束

适用场景：在开发阶段提前发现问题，强制团队遵循编码规范。

优势：

实时检测，开发阶段即可发现问题
统一团队编码规范
可以灵活配置允许的 console 方法
与 IDE 集成，提供即时反馈

配置示例：

// .eslintrc.js
module.exports = {
  rules: {
    // 禁止 console.log, console.info, console.debug
    // 允许 console.warn 和 console.error
    "no-console": ["warn", { allow: ["warn", "error"] }],
  },
};

使用建议：

将规则设置为 warn 级别，提醒开发者但不阻止构建
允许 console.warn 和 console.error，因为它们通常用于重要的错误提示
配合 Git Hooks 使用，在提交代码前自动检查

七、实战案例：综合调试场景

理论知识需要结合实际应用。下面两个案例展示了如何在真实项目中综合运用各种 Console 方法来解决实际问题。

7.1 调试异步请求

console.group("🔄 API 请求: /api/users");
console.time("请求耗时");

fetch("https://jsonplaceholder.typicode.com/users")
  .then((res) => {
    console.timeLog("请求耗时", "响应已接收");
    return res.json();
  })
  .then((data) => {
    console.timeLog("请求耗时", "数据解析完成");
    console.table(data.slice(0, 3), ["name", "email"]);
    console.timeEnd("请求耗时");
    console.groupEnd();
  })
  .catch((err) => {
    console.error("❌ 请求失败:", err);
    console.groupEnd();
  });

7.2 调试循环性能

console.time("⏱️ 数组处理");

const arr = Array.from({ length: 100000 }, (_, i) => i);
console.timeLog("⏱️ 数组处理", "数组创建完成");

const result = arr.filter((item) => item % 2 === 0);
console.timeLog("⏱️ 数组处理", "过滤完成");

const doubled = result.map((item) => item * 2);
console.timeLog("⏱️ 数组处理", "映射完成");

console.timeEnd("⏱️ 数组处理");