调试 JavaScript 时，console 是最常用也最强大的工具之一，远不止 console.log() 那么简单。下面是 9 个非常实用的 Console 命令，可以大大提升你的调试效率👇

🔥 一、console.log() —— 最基本也最常用

console.log('普通日志', someVar);
  • 用于输出变量、字符串、对象等
  • 也可以组合格式化输出：
console.log('用户 %s 登录于 %d 年', username, 2025);

🟡 二、console.table() —— 更清晰地展示表格数据

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];
console.table(users);

输出为表格，特别适合调试数组对象、接口返回值。

🔵 三、console.dir() —— 结构化查看对象属性

console.dir(document.body);
  • 显示对象的 所有属性，比 console.log() 更适合 DOM 和嵌套对象

🟣 四、console.warn() / console.error() —— 高亮警告与错误

console.warn('警告：数据格式不正确');
console.error('错误：无法连接服务器');
  • 在控制台中会以 黄色（warn）或红色（error） 显示，便于快速定位问题

🔴 五、console.assert() —— 条件不满足时才输出

console.assert(user.age > 18, '未成年人不能注册');
  • 仅当条件为 false 时才输出日志
  • 非常适合验证条件性逻辑

🟠 六、console.group() / console.groupEnd() —— 分组输出

console.group('用户信息');
console.log('姓名:', user.name);
console.log('年龄:', user.age);
console.groupEnd();
  • 输出结果会缩进分组，逻辑更清晰
  • 也可以用 console.groupCollapsed() 默认折叠

🟢 七、console.time() / console.timeEnd() —— 性能分析

console.time('加载时间');
// ... 一段执行代码 ...
console.timeEnd('加载时间');
  • 用来测量某段代码的运行时间（精确到毫秒）
  • 可用于性能优化或判断某函数是否耗时

🔵 八、console.count() —— 计数器输出

function greet() {
  console.count('greet 被调用了');
}
greet();
greet();
  • 每次调用都会显示调用次数
  • 非常适合调试循环或递归函数

🟤 九、console.trace() —— 查看函数调用栈

function a() {
  b();
}
function b() {
  console.trace('追踪调用路径');
}
a();
  • 会输出当前代码执行的堆栈路径（调用链），常用于调试递归、事件冒泡、异常路径

📌 Bonus Tips：

  • 多变量调试建议用对象结构输出：console.log({ user, token, isAdmin });
  • 浏览器控制台还支持样式：console.log('%c警告文字', 'color: red; font-weight: bold;');