image.jpg

前言

个人而言，在前端开发中调试用的最多命令就是console了；哪里有问题了，我都会console.log下；相比debug调试来说，我还是喜欢这个！console.log()这个命令只要是前端coder都会知道，不过console命令只要这几个吗?你真的会用console.log()吗！

干货

下面就具体安利下console命令具体的命令：

1.console.log()

console.log('hello');
console.log('hello word!')

这个很常用，日志查看，这个不多说了

2 .占位符

console.log("%d+%d=%d",1,2,1+2)
console.log("%s+%s=%d",'a','b','a+b')

结果：

图片1.png

这个很好理解，就想c语言入门的时候，print打印一样。%d占位符表示number类型，%s占位符表示字符串类型；前端这里也这两种占位符用的多

3.分组-console.group()

console.group('第一组');
console.log('姓名：张飞');
console.log('性别：女');
console.groupEnd();
console.group('第二组');
console.log('姓名：Joy');
console.log('性别：男');
console.groupEnd();

结果：

图片2.png

4.查看对象信息-console.dir(obj)

var obj={
  name:'Marry',
  sex:'man',
  age:24,
  fun:function(){
    console.log(123);
}
console.dir(obj);

结果：

图片3.png

和console.log(obj)打印对象一样

5.性能分析-console.profile()

function doTask(){
    doSubTaskA(1000);
    doSubTaskA(100000);
    doSubTaskB(10000);
    doSubTaskC(1000,10000);
}
function doSubTaskA(count){
    for(var i=0;i<count;i++){}
}
 
function doSubTaskB(count){
    for(var i=0;i<count;i++){}
}
 
function doSubTaskC(countX,countY){
    for(var i=0;i<countX;i++){
        for(var j=0;j<countY;j++){} 
    }
}
console.profile('性能分析开始');
doTask();
console.profileEnd();

结果：

图片4.png
这里说明的是，有些文章查看方式是在console下显示的，而这里是在图片红箭头出查看，我看了下应该是浏览器做出的调整，这里放得是chrome浏览器查看方式，其余浏览器读者可自行查看下profile栏目

6.计时功能-console.time()

console.time("控制台计时器一");
  for(var i=0;i<1000;i++){
    for(var j=0;j<1000;j++){}
  }
console.timeEnd("控制台计时器一");

结果：

图片5.png

7.其他

除这些外还有其他的命令，输入下面代码可以查看，读者自己可以尝试尝试！

for(var i in console){
  console.log(i)
}

图片6.png

---

关注公众号：闲言碎语而已
个人网站：百咧个度，欢迎访问！
微博：柯琦-闲言碎语欢迎关注！