我们知道console.log(message)的用法很简单，就是将参数message打印到控制台。console.log('Front-endXiaozhi')//前端小智constmyAge=28console.log(myAge)//28本文主要介绍5个有用的技巧，在使用console.log()时可以帮助你提高工作效率。1.打印变量的全名。如果在控制台打印多个变量，当变量数量较多时，我们很难区分哪个变量对应哪个值。functionsum(a,b){console.log(b);returna+b;}sum(1,2);sum(4,5);执行上面的代码后，我们只会看到一串数字：用来表示值变量和变量之间的关系可以用花括号括起来：{b}:2.高级格式化最常用的打印东西到控制台的方式就是简单地用一个参数调用console.log()：log('Front-endXiaozhi')//前端小智有时候我们可能想要一个包含多个变量的消息。幸运的是，console.log()可以使用%s、%i等说明符以sprintf()的方式格式化字符串。constuser='前端小智';constattempts=5;console.log('%s登录失败%i次',user,attempts);//前端小智登录失败5次%s%i次用户和%i值替换尝试使用。说明符%s转换为字符串，%i转换为数字。以下是可用说明符列表：说明符作用%s元素转换为字符串%d或%i元素转换为整数%f元素转换为浮点数%o元素以最有效的格式显示%O元素转换为最有效的格式格式显示%c应用程序提供的CSS具有样式打印样式浏览器控制台允许我们将样式应用于打印消息，我们可以通过使用%c说明符和相应的CSS样式如下：console.log('%cBigmessage','font-size:36px;font-weight:bold');说明符%c应用CSS样式'font-size:36px;font-weight:bold'4.交互式显示日志样式取决于主机的控制台实现。Chrome和Firefox等浏览器提供对象和数组的交互式显示，而Node控制台输出的是文本。让我们看看Chrome如何打印普通对象、数组和DOM树，并通过展开和折叠它们来与这些元素交互。(1)ObjectsconstmyObject={name:'JohnSmith',profession:'agent'};控制台日志（我的对象）；在Chrome控制台中，myObject的打印如下：可以展开和折叠对象属性列表，还可以看到对象的原型。(2)Arraysconstcharacters=['Neo','Morpheus','JohnSmith'];控制台日志（字符）；(3)DOM树结构我们可以直接与控制台显示的DOM元素进行交互。console.log(document.getElementById('root'));在Chrome控制台中，可以展开DOM元素并完整浏览其内容：（4）交互式嵌套中的消息%o说明符（关联值正确打印格式）可以插入数组、对象、DOM元素和常规文本在短信中，而不会失去交互性。constmyObject={name:'JohnSmith',profession:'agent'};console.log('Neo,beawareof%o',myObject);在控制台中，myObject数组未转换为字符串，但仍保持交互状态。5.在Node控制台打印大对象。Node中的日志是明文输出的。但是，Node中的console.log()不会显示具有深层嵌套的对象：第3层的对象显示为[Object]。constmyObject={propA:{propB:{propC:{propD:'你好'}}}};控制台日志（我的对象）；运行脚本时，propC的对象被打印为[Object]:查看完整的对象结构，可以使用JSON.stringify():constmyObject={propA:{propB:{propC:{propD:'hello'}}}};console.log(JSON.stringify(myObject,null,2));JSON.stringify(myObject,null,2)返回对象的JSON表示形式，第三个参数2设置空格缩进大小。希望这5个技巧将使您的console.log()体验更加高效。
