console 不只是 console.log()，它有一套完整、可交互、带性能分析能力的调试工具链，但多数人只用到了 20% 的功能；关键在于按场景选方法，而不是堆 console.log()。
直接说结论：console 不只是 console.log()，它有一套完整、可交互、带性能分析能力的调试工具链，但多数人只用到了 20% 的功能；关键在于按场景选方法，而不是堆 console.log()。
哪些 console 方法能替代 console.log() 并提升效率？
重复打印变量类型、结构或执行路径时，console.log() 很容易变成“信息噪音”。更精准的做法是：
-
console.table()：适合查看数组或对象的键值对，尤其当字段名统一（如 API 返回的用户列表），比层层展开console.log()直观得多 -
console.dir()：强制以可交互树形结构输出 DOM 节点或复杂对象（比如event.target），绕过浏览器对某些对象的简略显示逻辑 -
console.count()和console.countReset()：在循环或事件回调里追踪某段逻辑被执行了多少次，无需手动维护计数器 -
console.time()/console.timeEnd()：测量某段代码耗时，比Date.now()更轻量，且支持多个命名标签并行计时
如何用 console.group() 组织大量调试输出？
当多个模块同时输出日志，控制台会迅速变得混乱。用分组可以折叠/展开逻辑块，视觉上隔离上下文：
console.group('API 请求流程');
console.log('请求参数:', params);
fetch('/api/user')
.then(res => {
console.group('响应处理');
console.log('状态码:', res.status);
console.log('Headers:', res.headers);
console.groupEnd();
});
console.groupEnd();
注意：console.groupCollapsed() 默认收起分组，适合“次要但可能需要查”的日志；嵌套层级过深（>5 层）会导致 Chrome 控制台渲染变慢，建议用语义化标签代替深层嵌套。
立即学习“Java免费学习笔记（深入）”；
为什么 console.assert() 比 if + console.log() 更可靠？
console.assert() 是唯一一个「条件不满足才触发」的 console 方法，天然适配防御性调试：
const user = getUserById(123); console.assert(user, '用户未找到，ID 为 %d', 123); // 只有 user 为 falsy 时才输出
它和 debugger 配合效果更好：开启浏览器的「Break on caught exceptions」后，配合 console.assert(false) 可强制中断；另外，它不会污染生产环境——Webpack/Vite 构建时可通过 drop_console 插件自动移除所有 console.*，但 console.assert() 因含逻辑判断，有时会被误保留，上线前需检查。
容易被忽略的细节：console 的异步陷阱与作用域泄漏
在闭包或异步回调中直接打印对象引用，常看到“看似正确实则错乱”的值：
const obj = { a: 1 };
console.log(obj); // 看起来没问题
setTimeout(() => {
obj.a = 2;
}, 100);
此时 Chrome 控制台里点开那个 obj，显示的是 a: 2——因为控制台延迟求值。解决方法只有两个：
- 用
console.log(JSON.stringify(obj))强制快照（仅限可序列化数据） - 用
console.log({...obj})或console.log(Object.assign({}, obj))浅拷贝一次
另外，console 方法全部是同步调用，但输出本身由 DevTools 主进程处理，高频率调用（如每帧 console.log()）会显著拖慢页面帧率，尤其在低端设备上——这不是 bug，是设计使然。
