在项目过程中我们用的最多的应该就是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);