作者：DmitriPavlutin译者：FrontendXiaozhi来源：dmitripavlutin。已经收录在网站里，也整理了更多往期好评文章，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。我们知道console.log(message)的用法很简单，就是将参数message打印到控制台。console.log('Front-endXiaozhi')//前端小智constmyAge=28console.log(myAge)//28本文主要介绍5个有用的技巧，在使用console.log()。1.打印变量的全名。如果在控制台打印多个变量，当变量数量较多时，我们很难区分哪个变量对应哪个值。函数总和（a，b）{console.log（b）;返回a+b;}sum(1,2);sum(4,5);执行上面的代码后，我们只会看到一串数字：为了表示一个值和变量之间的关系，可以把变量用花括号括起来：{b}：2.高级格式化最常用的打印方式控制台的一些事情是简单地调用带有参数的console.log()：console.log('Front-endXiaozhi')//Front-endXiaozhi有时我们可能想要一条包含多个变量的消息。幸运的是，console.log()可以像sprintf()那样格式化字符串，使用%s、%i等说明符。constuser='前端小智';const尝试=5；console.log('%sloginfailed%itimes',user,attempts);//前端小智登录失败5次%s和%i为user和attempts的值替换。说明符%s转换为字符串，%i转换为数字。以下是可用说明符列表：说明符作用%s元素转换为字符串%d或%i元素转换为整数%f元素转换为浮点数%o元素以最有效的格式显示%O元素转换为最有效的格式formatdisplay%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树，并通过展开和折叠它们来与这些元素交互。4.1ObjectsconstmyObject={name:'JohnSmith',profession:'agent'};控制台日志（我的对象）；在Chrome控制台中，myObject的打印如下：可以展开和折叠对象属性列表，还可以看到对象的原型。4.2Arraysconstcharacters=['Neo','Morpheus','JohnSmith'];控制台日志（字符）；4.3DOM树结构我们可以直接与控制台显示的DOM元素进行交互。console.log(document.getElementById('root'));在Chrome控制台中，可以展开DOM元素并完全浏览其内容：4.4交互式嵌套消息%o说明符（与正确的打印格式相关联）可以在文本消息中插入数组、对象、DOM元素和常规文本，而不会失去交互性。constmyObject={name:'JohnSmith',profession:'agent'};console.log('Neo，注意%o',myObject);在控制台中，myObject数组未转换为字符串，同时保持交互性。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()体验更加高效。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://dmitripavlutin.com/co...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博文早一两篇），本文在GitHubhttps://github.com/qq449245884/xiaozhi已收录，本人已整理出很多我的文件。欢迎star和改进。可以参考考点面试。另外，关注公众号，后台会回复福利，看到福利就知道了。
