JavaScript 调试工具对象

console 是 JavaScript 开发中最常用的调试工具对象，无论是在浏览器环境还是 Node.js 中，它都提供了丰富的 API 来输出信息、分析性能、追踪代码执行路径，极大提升了开发效率和问题排查能力。

学习目标

掌握 console 的常用方法及其适用场景
学会使用 console.table()、console.time() 等高级功能提升调试体验
理解如何通过分组、计数、断言等方式组织日志输出
避免在生产环境中遗留敏感或冗余的 console 调用

基础日志输出

`console.log()`

通用日志

最常用的方法，用于输出普通信息。

console.log("Hello, World!");
console.log("用户 ID:", 12345);
console.log({ name: "张三", age: 28 });

用途：变量检查、流程跟踪、数据打印。

`console.error()`

错误信息

输出错误消息，通常在控制台中以红色显示。

console.error("文件未找到！");
console.error(new Error("网络请求失败"));

用途：捕获异常、报告运行时错误。

`console.warn()`

警告信息

输出警告消息，通常以黄色显示。

console.warn("该 API 即将废弃，请使用新版本。");

用途：提示潜在问题、不推荐用法、兼容性风险。

`console.info()`

信息提示

输出信息性消息，部分浏览器支持样式定制。

console.info("应用已启动");

// 使用 %c 自定义样式（仅限浏览器）
console.info('%c这是蓝色加粗信息！', 'color: blue; font-size: 16px; font-weight: bold;');

用途：强调重要但非错误的信息。

结构化与可视化

`console.table()`

表格化数据

将数组或对象以表格形式展示，清晰易读。

const users = [
    { name: "Amit", age: 30 },
    { name: "Jatin", age: 25 }
];

console.table(users);

输出效果（浏览器 /Node.js）：

┌─────────┬─────────┬─────┐
│ (index) │  name   │ age │
├─────────┼─────────┼─────┤
│    0    │ 'Amit'  │  30 │
│    1    │ 'Jatin' │  25 │
└─────────┴─────────┴─────┘

适用场景：

调试 API 返回的列表数据
比较多个对象的属性值

提示：可传入第二个参数指定要显示的列：
console.table(users, ["name"]); // 只显示 name 列

性能与执行分析

`console.time()` 与 `.timeEnd()`

计时器

测量代码块执行耗时（单位：毫秒）。

console.time('计算耗时');

function heavyTask() {
    let sum = 0;
    for (let i = 0; i < 1e6; i++) {
        sum += i;
    }
    return sum;
}

heavyTask();
console.timeEnd('计算耗时'); // 输出：计算耗时: 4.21ms

用途：

性能优化对比
定位慢操作

注意：标签名必须一致才能配对。

`console.trace()`

调用栈追踪

输出当前函数的完整调用栈，帮助定位问题源头。

function a() { b(); }
function b() { c(); }
function c() { console.trace(); }

a();

输出示例：

console.trace
    at c (<anonymous>:4:17)
    at b (<anonymous>:3:15)
    at a (<anonymous>:2:15)
    at <anonymous>:6:1

用途：排查“谁调用了这个函数？”、“错误从哪一层抛出？”

条件与计数辅助

`console.assert()`

断言检查

当条件为 false 时，输出错误信息；否则无输出。

console.assert(5 > 10, "5 不大于 10，断言失败！");
// 控制台输出：Assertion failed: 5 不大于 10，断言失败！

console.assert(true, "这不会显示");

用途：

快速验证前置条件
替代简单的 if (!condition) throw ...

`console.count()`

调用计数

统计某段代码被执行的次数。

function login() {
    console.count("用户登录次数");
    // 登录逻辑...
}

login(); // 用户登录次数: 1
login(); // 用户登录次数: 2
login(); // 用户登录次数: 3

用途：

检查函数是否被重复调用
监控事件触发频率

支持多个标签独立计数：

console.count("A"); // A: 1
console.count("B"); // B: 1
console.count("A"); // A: 2

日志组织与可读性

`console.group()` 与 `.groupEnd()`

日志分组

将相关日志折叠成一个可展开 / 收起的组。

console.group('用户信息');
console.log('姓名：李四');
console.log('年龄：28');
console.log('城市：北京');
console.groupEnd();

console.groupCollapsed('调试详情'); // 默认折叠
console.log('请求头:', headers);
console.log('响应时间:', 120);
console.groupEnd();

优势：

避免日志杂乱
按模块 / 功能分类输出
groupCollapsed() 默认收起，适合大量调试信息

Console 方法速查

方法	用途	典型场景
`log()`	普通输出	打印变量、流程标记
`error()`	错误输出	异常捕获、报错
`warn()`	警告输出	不推荐用法提示
`info()`	信息输出	启动提示、状态说明
`table()`	表格展示	数组 / 对象数据调试
`time()` / `timeEnd()`	性能计时	优化前后对比
`assert()`	条件断言	前置条件验证
`count()`	调用计数	函数调用频率监控
`trace()`	调用栈追踪	定位调用源头
`group()` / `groupEnd()`	日志分组	模块化日志组织

最佳实践

开发阶段善用 console，上线前务必清理
- 可使用构建工具自动移除 console 调用
- 或封装自己的日志工具，支持“静默模式”
优先使用语义化方法
- 错误用 error()，警告用 warn()，避免全用 log()
复杂数据用 table() 或展开对象查看
- 比 log(JSON.stringify(...)) 更直观
避免在循环中频繁调用 console
- 可能导致性能下降或控制台卡顿

利用 %c 在浏览器中高亮关键信息（仅限前端）

console.log('%c重要提示', 'color: red; font-size: 20px;');

思考题

如何在不修改代码的情况下，临时禁用所有 console.log 输出？
console.time() 的精度能达到微秒吗？它的底层原理是什么？
在 Node.js 和浏览器中，console.table() 的输出格式有何不同？

源本科技 | 码上会

学习目标

基础日志输出

console.log()

console.error()

console.warn()

console.info()