Day09-控制台调试各种姿势攻略作者：?liyuechun简介：JavaScript30是由WesBos发起的为期30天的挑战。项目免费提供30个视频教程，30个挑战的入门文档，以及30个挑战方案的源码。目标是帮助人们在没有框架和库、没有编译器和引用的情况下用纯JavaScript编写东西。您现在是本系列指南的第九篇。完整的中文版指南和视频教程在ZEROtoONE全栈部落。项目效果各种调试正确姿势。log的更多用法这个是最常用的，但是它还有一些更多的功能：比如参数支持类似C语言的字符串替换方式。%sString%dInteger%fFloatingpointvalue%oObject%c设置输出样式，后面的文字会根据第二个参数console.log("IamaString:%s","日志”）;//logconsole.log("我是一个整数:%d",1);//1console.log("我是一个浮点数:%d",1.23);//1.23letdog={name:"Lucky",age:"5"};console.log("%o",dog);console.log("%c3DText","text-shadow:01px0#ccc,02px0#c9c9c9,03px0#bbb,04px0#b9b9b9,05px0#aaa,06px1pxrgba(0,0,0,.1),005pxrgba(0,0,0,.1),01px3pxrgba(0,0,0,.3),03px5pxrgba(0,0,0,.2),05px10pxrgba(0,0,0,.25),010px10pxrgba(0,0,0,.2),020px20pxrgba(0,0,0,.15);字体大小:5em");清除控制台面板的输出内容要清除打印的输出内容，有两种方式，一种是JavaScript语句：console.clear()。另一个是快捷键Ctrl+L。不同样式的输出除了常规日志外，还有一些其他的预设样式，区别在于图标或颜色不同：//warning!console.warn("用于输出警告信息");//error:|console.error("用于输出错误信息");//Infoconsole.info("用于输出提示信息");//debugconsole.debug("用于输出调试信息");打印DOM节点得到DOM元素后，可以直接打印输出。constp=document.querySelector('p');console.log(p);console.dir(p);.log输出这个DOM的HTML标签。.dir会输出这个DOM元素的属性列表。断点调试console.asset(arg1,arg2)方法接受一个表达式作为参数，如果参数返回值为false，则输出第二个参数中的内容。constp=document.querySelector('p');console.assert(p.classList.contains('ouch'),'错了！');printtableconsole.table()方法，数组，对象可以以表格的形式打印输出。如果只输出其中一列，可以加上第二个参数，如下所示：console.table(dogs);console.table（狗，[“年龄”]）；groupprintingconstdogs=[{name:'Snickers',age:2},{name:'hugo',age:8}];dogs.forEach(dog=>{console.group(`${dog.name}`);//console.groupCollapsed(`${dog.name}`);//列表默认折叠console.log(`${dog.name}`);console.log(`${dog.age}`);console.log(`${dog.name}是${dog.age}岁`);console.groupEnd();});group()方法可以传入这个组的名称。group()/groupCollapsed()和groupEnd()之间的内容会自动分组，区别在于是否可以自动折叠。console.count()计数输出对象可以通过console.count()进行计数。但需要注意的是，这里的count对象仅限于count()输出的内容，并不是控制台输出的所有内容。时间计时使用time("name")和timeEnd("name")分别控制起点和终点。两者的参数代表当前时序的名称，可以自定义但需要保持不变。所以如果你想看看异步获取数据需要多长时间，你可以这样写：console.time('fetchmydata');fetch("https://api.github.com/users/soyaine").then(data=>data.json()).then(data=>{console.timeEnd('获取我的数据');console.log(data);});如果timeEnd中的名称与上述不同，则获取的数据是当前系统时间转换后的毫秒值。源码下载Github源码社区品牌：从零到一全栈部落定位：寻找共同兴趣，共同学习，持续输出全栈技术社区行业荣誉：IT行业逻辑思维文化：输出是最好的方式tolearnOfficial公众号：全栈部落社区发起人：春哥（创始人从零到一，交流微信：liyc1215）技术交流社区：全栈部落BBS全栈部落全系列教程：全栈部落完整电子书学习笔记关注全栈部落官方公众号，每晚10点领取系列原创技术推送
