JS 控制台还有彩蛋？5 个不为人知的 console 用法console 不止 log，还分级：info / warn

引言

console 远不止一条“log”这么单调：它能分级播报（info/warn/error）、把数据排成表（table）、给流程打包分组（group）、为性能计时（time）、追踪调用栈（trace），甚至用断言当场抓“现行”（assert）。
接下来，让我们把日志从“一维文本”升级为“多维仪表盘”，用对这些更高级、更便捷的方法，让调试不再是黑箱摸索，而是有条不紊、优雅高效的“现场指挥”。

方法详解

说明：下面按 用途分组 把你截图里的 console 能力逐一讲清。带 ✅/⚠️ 表示通用/有限支持（如仅部分浏览器或别在业务代码里用）。

输出分级（筛噪音用）

console.log(...data) ：普通日志。✅
console.info(...data) ：信息级；在 DevTools 里可按 Level 过滤。✅
console.warn(...data) ：黄色警告；用于“可能有问题”。✅
console.error(...data) ：错误；通常带堆栈并高亮。✅

console.debug(...data) ：最低级别调试信息；要在 DevTools 打开 Verbose/Debug 才显示（视浏览器设置）。✅

console.info('初始化完成');
console.warn('接口慢于阈值：%dms', cost);
console.error('保存失败', err);
console.debug('细节：', detail);

结构化查看（更好读）

console.table(data, columns?) ：把数组/对象表格化显示。✅
```
console.table(users, ['id', 'name', 'role']);
```
console.dir(obj, { depth }) ：以对象树形展开（更适合看原型/不可枚举）。✅
```
console.dir(config, { depth: 2 });
```
console.dirxml(node) ：以 XML/DOM 视图展示 DOM 节点。⚠️（浏览器支持，Node 环境一般没有）
```
console.dirxml(document.querySelector('#app'));
```

分组与计时（流程化调试）

console.group(label) / console.groupCollapsed(label) / console.groupEnd() ：把一段日志打包（可折叠）。✅
```
console.groupCollapsed('⏳ 提交订单');
console.info('校验参数');
// ...
console.groupEnd();
```
console.time(label) / console.timeEnd(label) / console.timeLog(label, ...extra) ：轻量计时。✅
```
console.time('render');
```

// ... do work
console.timeLog('render', '阶段A完成');
console.timeEnd('render');

- **`console.timeStamp(label?)`**：往性能时间轴打标记（配合 *Performance* 面板）。⚠️（浏览器为主，Node 基本不支持）  
```js
console.timeStamp('首屏前');

计数、断言、栈追踪（定位触发源）

console.count(label) / console.countReset(label) ：统计某事件/函数被触发次数。✅

function onScroll(){ console.count('scroll'); }
// 某时重置
console.countReset('scroll');

console.assert(condition, ...data) ：条件为假才打印“Assertion failed”错误日志（不抛异常、不打断执行）。✅
```
console.assert(list.length > 0, '列表为空', { list });
```

console.trace(label?) ：打印调用栈（谁触发的？）。✅

function a(){ b(); } 
function b(){ console.trace('调用栈'); } 
a();

console.clear() ：清空控制台。✅

性能/分析（偏高级）

console.profile(label?) / console.profileEnd(label?) ：开始/结束一次 CPU Profile，会在 Profiler/Performance 面板生成记录。⚠️（以 Chromium 为主）
```
console.profile('渲染分析');
```

// ... 你想分析的代码
console.profileEnd('渲染分析');

- **`console.memory`**（属性）：返回 JS 堆内存信息 `{ totalJSHeapSize, usedJSHeapSize, jsHeapSizeLimit }`。⚠️（Chromium 专有，调试参考用）  
```js
console.log('内存快照', console.memory);

console.createTask(name) ：创建一个“任务”对象用于在时间轴上成对打点（task.start() / task.end()）。⚠️（非标准/实验性，部分 Chromium 版本可用，不要写进业务代码）
```
const task = console.createTask?.('图表渲染');
task?.start();
```

// ... heavy work
task?.end();