Console Log 最全使用详解

console是浏览器控制台、Node.js 内置调试工具，远不止 console.log，本文分基础打印、格式化、分组、计时、断言、性能、堆栈、表格、对象检测、DOM、特殊高级 API完整覆盖。

一、基础打印类

1. console.log () 普通日志

输出通用信息，支持多参数、拼接

console.log("普通文本");console.log("金额",200000,"利率","15~18%");// 模板字符串console.log(`额度：${20}万`);

2. console.info() 信息日志

和 log 功能完全一致，仅图标区分（蓝色信息图标），语义化区分普通日志

console.info("贷款期限36期");

3. console.warn () 警告日志

黄色警告标识，附带调用堆栈，用于提示风险、不致命错误

console.warn("利率偏高，请谨慎借贷");

4. console.error () 错误日志

红色报错标识，完整堆栈，用于捕获异常、程序错误

console.error("接口请求失败");// 打印错误对象try{JSON.parse("xxx");}catch(e){console.error("解析失败：",e);}

5. console.debug () 调试日志

默认浏览器隐藏，需控制台设置开启「Verbose」才显示，用于开发调试，上线可隐藏

console.debug("用户贷款参数：20万，36期");

二、格式化输出（占位符 % 语法）

所有打印方法都支持占位符，浏览器 / Node 通用：

示例：

// 数字、字符串console.log("最高额度：%d万，利率%s",20,"15~18%");// CSS 彩色文字（浏览器专属）console.log("%c红色加粗大字","color:red;font-size:24px;font-weight:bold");// 多样式拼接console.log("%c额度%c20万","color:#666","color:red;font-size:30px");console.log("%d年%d月%d日",2011,3,26);

三、分组折叠日志（层级管理大量输出）

1. console.group (label) 开启折叠组
2. console.groupCollapsed (label) 默认折叠（推荐，避免刷屏）
3. console.groupEnd () 关闭分组

console.groupCollapsed("贷款产品详情");console.log("最高额度：20万");console.log("期限：36期");console.log("利率：15~18%");console.groupEnd();console.group("第一组信息");console.log("第一组第一条:我的博客(https://blog.csdn.net/glony)");console.log("第一组第二条:blog(https://blog.csdn.net/glony)");console.groupEnd();console.group("第二组信息");console.log("第二组第一条:https://blog.csdn.net/glony");console.log("第二组第二条:欢迎你加入");console.groupEnd();

支持嵌套分组：

console.group("外层");console.group("内层");console.log("嵌套日志");console.groupEnd();console.groupEnd();

四、计时工具（性能耗时统计）

• console.time (label) 启动计时器
• console.timeLog (label) 中途打印耗时
• console.timeEnd (label) 结束并输出总耗时
• label 必须完全一致，不填默认 default

console.time("循环耗时");for(leti=0;i<100000;i++){}console.timeLog("循环耗时","循环中途标记");console.timeEnd("循环耗时");// 输出：循环耗时: 2.123ms

五、断言判断 console.assert ()

条件不成立才打印错误日志，成立则无输出，用于校验参数、拦截非法逻辑

语法：console.assert(条件, 报错信息, 附加参数)

constmoney=10;// 额度必须大于0，否则报错console.assert(money>0,"贷款额度不能为负数！当前额度：",money);

六、表格打印 console.table () 结构化展示数组 / 对象

自动生成控制台表格，比 log 看数组清晰百倍

// 对象数组constloanList=[{name:"产品A",limit:200000,term:36,rate:"15%"},{name:"产品B",limit:100000,term:24,rate:"16%"}];console.table(loanList);// 只展示指定列console.table(loanList,["name","limit"]);

七、堆栈调用追踪

1. console.trace () 打印当前调用栈

直接查看当前代码执行链路，定位函数调用来源

functioncalcRate(){console.trace("追踪利率计算调用栈");}calcRate();

2. console.count () /console.countReset () 计数打印

统计代码执行次数，常用于循环、事件触发次数

functionsubmit(){console.count("提交按钮点击次数");}submit();submit();// 重置计数console.countReset("提交按钮点击次数");

八、对象 / 变量深度检测

1. console.dir () 分层打印对象

对比 log：log 输出文本混合，dir 纯对象树，可展开查看属性、原型链，DOM 元素用 dir 会打印属性而非 HTML

constinfo={limit:200000,term:36};console.dir(info);// DOM元素打印属性console.dir(document.body);varinfo={blog:"https://blog.csdn.net/glony",id:495489065,message:"测试对象"};console.dir(info);

2. console.dirxml () 打印 DOM 树

专门输出 HTML/XML DOM 结构，等价于控制台选中元素查看 Elements 面板

console.dirxml(document.querySelector("div"));<div id="info"><h3>www.csdn.net</h3></div><script type="text/javascript">varinfo=document.getElementById('info');console.dirxml(info);</script>

九、性能分析高级 API（浏览器专属）

1. console.profile () /console.profileEnd () 性能分析
   开启 JS 性能分析面板，记录函数执行耗时、调用频率

console.profile("贷款计算性能");// 待分析代码functioncompute(){}compute();console.profileEnd("贷款计算性能");

2. console.timeStamp () 性能标记
   配合 Performance 性能面板，在时间轴添加自定义标记

console.timeStamp("进入贷款页面");

十、计数、清空、内存监控

1. console.clear () 清空控制台
   清除所有打印日志，部分浏览器支持快捷键 Ctrl+L

console.clear();

2. console.memory（浏览器只读属性）
   查看当前 JS 堆内存占用，用于内存泄漏排查

console.log(console.memory);// { usedJSHeapSize: 占用内存, totalJSHeapSize: 总分配内存 }

十一、Node.js 独有拓展（浏览器不支持）

• console.log(obj, depth) 深度打印对象，控制递归层级
• console.table 同样支持，但无 DOM 相关 API
• console.stdlog / console.stderr 标准输出流
• console.markTimeline 时间线标记

十二、实用开发技巧

1. 批量打印多个变量

constlimit=200000,term=36;console.log({limit,term});// 自动打包成对象，带变量名

2. 彩色分级日志封装

constlog={success:(msg)=>console.log(`%c✅${msg}`,"color:#09c372;font-size:14px"),warn:(msg)=>console.warn(`%c⚠️${msg}`,"color:#ff9800;font-size:14px"),error:(msg)=>console.error(`%c❌${msg}`,"color:#f44336;font-size:14px")}log.success("额度校验通过");log.warn("利率过高");log.error("放款失败");

3. 线上环境屏蔽控制台日志

通过重写 console 方法关闭打印，避免泄露信息：

if(process.env.NODE_ENV==="production"){["log","info","warn","debug"].forEach(key=>{console[key]=()=>{};})}

十三、API 完整清单汇总

• 输出打印

  log / info / warn / error / debug

• 格式化

  占位符 %s %d %f %o %O %c

• 分组

  group / groupCollapsed / groupEnd

• 计时

  time / timeLog / timeEnd

• 判断断言

  assert

• 表格

  table

  trace / count / countReset

• 对象 / DOM 打印

  dir / dirxml

• 性能分析

  profile / profileEnd / timeStamp

• 工具方法

  clear

• 内存属性

  memory（浏览器）