console是浏览器控制台、Node.js 内置调试工具远不止 console.log本文分基础打印、格式化、分组、计时、断言、性能、堆栈、表格、对象检测、DOM、特殊高级 API完整覆盖。一、基础打印类console.log () 普通日志输出通用信息支持多参数、拼接console.log(普通文本);console.log(金额,200000,利率,15~18%);// 模板字符串console.log(额度${20}万);console.info() 信息日志和 log 功能完全一致仅图标区分蓝色信息图标语义化区分普通日志console.info(贷款期限36期);console.warn () 警告日志黄色警告标识附带调用堆栈用于提示风险、不致命错误console.warn(利率偏高请谨慎借贷);console.error () 错误日志红色报错标识完整堆栈用于捕获异常、程序错误console.error(接口请求失败);// 打印错误对象try{JSON.parse(xxx);}catch(e){console.error(解析失败,e);}console.debug () 调试日志默认浏览器隐藏需控制台设置开启「Verbose」才显示用于开发调试上线可隐藏console.debug(用户贷款参数20万36期);二、格式化输出占位符 % 语法所有打印方法都支持占位符浏览器 / Node 通用占位符作用%s字符串%d / %i整数数字%f浮点数%o展开对象DOM / 普通对象%O紧凑打印对象%cCSS 样式仅浏览器有效示例// 数字、字符串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);三、分组折叠日志层级管理大量输出console.group (label) 开启折叠组console.groupCollapsed (label) 默认折叠推荐避免刷屏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 必须完全一致不填默认 defaultconsole.time(循环耗时);for(leti0;i100000;i){}console.timeLog(循环耗时,循环中途标记);console.timeEnd(循环耗时);// 输出循环耗时: 2.123ms五、断言判断 console.assert ()条件不成立才打印错误日志成立则无输出用于校验参数、拦截非法逻辑语法console.assert(条件, 报错信息, 附加参数)constmoney10;// 额度必须大于0否则报错console.assert(money0,贷款额度不能为负数当前额度,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]);七、堆栈调用追踪console.trace () 打印当前调用栈直接查看当前代码执行链路定位函数调用来源functioncalcRate(){console.trace(追踪利率计算调用栈);}calcRate();console.count () /console.countReset () 计数打印统计代码执行次数常用于循环、事件触发次数functionsubmit(){console.count(提交按钮点击次数);}submit();submit();// 重置计数console.countReset(提交按钮点击次数);八、对象 / 变量深度检测console.dir () 分层打印对象对比 loglog 输出文本混合dir 纯对象树可展开查看属性、原型链DOM 元素用 dir 会打印属性而非 HTMLconstinfo{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);console.dirxml () 打印 DOM 树专门输出 HTML/XML DOM 结构等价于控制台选中元素查看 Elements 面板console.dirxml(document.querySelector(div));div idinfoh3www.csdn.net/h3/divscript typetext/javascriptvarinfodocument.getElementById(info);console.dirxml(info);/script九、性能分析高级 API浏览器专属console.profile () /console.profileEnd () 性能分析开启 JS 性能分析面板记录函数执行耗时、调用频率console.profile(贷款计算性能);// 待分析代码functioncompute(){}compute();console.profileEnd(贷款计算性能);console.timeStamp () 性能标记配合 Performance 性能面板在时间轴添加自定义标记console.timeStamp(进入贷款页面);十、计数、清空、内存监控console.clear () 清空控制台清除所有打印日志部分浏览器支持快捷键 CtrlLconsole.clear();console.memory浏览器只读属性查看当前 JS 堆内存占用用于内存泄漏排查console.log(console.memory);// { usedJSHeapSize: 占用内存, totalJSHeapSize: 总分配内存 }十一、Node.js 独有拓展浏览器不支持console.log(obj, depth) 深度打印对象控制递归层级console.table 同样支持但无 DOM 相关 APIconsole.stdlog / console.stderr 标准输出流console.markTimeline 时间线标记十二、实用开发技巧批量打印多个变量constlimit200000,term36;console.log({limit,term});// 自动打包成对象带变量名彩色分级日志封装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(放款失败);线上环境屏蔽控制台日志通过重写 console 方法关闭打印避免泄露信息if(process.env.NODE_ENVproduction){[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表格tabletrace / count / countReset对象 / DOM 打印dir / dirxml性能分析profile / profileEnd / timeStamp工具方法clear内存属性memory浏览器