console命令调试技巧

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

一、不同的样式

console.info("info");

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

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

console.debug("debug");

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

Q:console.logconsole.infoconsole.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);

猜你喜欢

转载自blog.csdn.net/m0_63057114/article/details/129873464