console命令调试技巧

在项目过程中我们用的最多的应该就是console.log了。可打印的东西比较多时，往往都是加逗号加备注来区分信息，其实console中早就为我们准备好了各种调试命令。

一、不同的样式

console.info("info");

console.warn("warn");   // 警告

console.error("error");  // 错误

console.debug("debug");

console.table();  // Object、Array都可以

Q:console.log 和 console.info 与 console.debug 有什么区别呢？

A:都是在控制台中打印信息，本质上是没有区别的，只不过名字叫的不一样而已。其中， console.info 在火狐浏览器打印出的信息，在控制显示的时候信息前面会出现一个小图标（谷歌浏览器没有）。而且谷歌浏览器和opera不支持 console.debug。

console.table案例：

var arr = [
  { name: "翠花", age: 18 },
  { name: "如花", age: 28 },
  { name: "芦花", age: 38 }
];
console.table(arr);

 二、占位符

• %s  字符串

• %d  整数

• %f  浮点数(可指定小数的位数)

• %o  对象

• %0  对象（JSON格式）

• %c  CSS样式（第二个参数为样式字符串）

let name = "张三";
let age = 18;

console.log("姓名：%s，年龄: %d",name,age);
console.log("%c你好啊！","color: #0ff;");
console.log("%c姓名：%s，%c年龄: %d","color: #00f;",name,"color: #f00;",age);

 注：占位符是可以组合使用的，顺序不能打乱，并且需要注意类型是否正确。

 三、分组打印

console.group("开始")

console.groupEnd("结束")

console.groupCollapsed("下一个分组")​​​​​​

// 创建第一个分组
console.group("第一个分组");
// 在分组内打印两条
console.log("111");
console.log("222");
// 结束第一个分组
console.groupEnd();

console.log("333");

console.groupCollapsed("第二个分组");
console.log(444);
console.log("555");
console.groupEnd(); //结束

当然，分组也是可以相互嵌套的。

四、打印执行时间

console.time()   // 开始

console.timeEnd()  //结束

// 打印执行时间，需要成对使用
lei t = 0;
console.time('forTime');
for (let i = 0; i < 999999; i++) {
    t++;
}
console.timeEnd('forTime');

五、打印对象

console.dir() 

console.dir(document.body);
console.log(document.body);

六、打印事件执行的时间戳

console.timeStamp('')

let btn = document.getElementById('btn');

btn.addEventListener("click",function(){
    console.timeStamp('click');
})

七、打印计数

console.count('item');

function fn (params) {
    console.count();  // 也可以分类统计 =》console.count(params);
    console.log("params:  %s",params);
}
fn('a')
fn('b')
fn('b')

 八、打印条件是否成立

console.assert(1===2);

 九、清空打印台信息

console.clear();

console.log(1);
console.clear();  // 清空此逻辑之前的打印
console.log(2);