输出信息分类
不止于console.log()
扩展一下,输出信息的一般有如下四个
1、console.log 用于输出普通信息
2、console.info 用于输出提示性信息
3、console.error用于输出错误信息
4、console.warn用于输出警示信息
5、console.debug用于输出调试信息
你可以添加占位符,支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种
%s 字符串
console.log('hello: %s',"world");
//hello: world
%o 占位符，可以用来查看一个对象内部情况
var dog = {};
dog.name = "金毛";
dog.color = "黄色";
console.log("%o", dog);
//{name: "金毛", color: "黄色"}
对于JSON对象输出,可以使用 console.table来让其以表格形式更直观地显示:
以上边那个 dog对象为例子,
console.table(dog).png
或者解析一个对象数组:
console.table(dogs).png
在Chrome里面还有一个叫 %c , 仅在Chrome中支持,你可以把%c理解为css样式占位符,
用法:
console.log("%c","...css-style...")
让我们来看看好玩点的,比如在控制台输出一张图片
控制台输出图片.png
又或者输出一个
控制台输出带样式的文字.png
另外,在Chrome中支持 jQuery的$选择方法:
Chrome中的jQuery$方法.png
断言console.assert()
当检测到传入的表达式为false的情况下才输出
注意：assert方法在firebuglite中不支持，Chrome和FireBug支持。
var willShowCondition=false;
console.assert(willShowCondition,'检测到flase,输出该行');
//Assertion failed: 检测到flase,输出该行
统计 console.count()
会显示当前语句执行次数,自动在提示信息后补全 :和一个空格
const WillDid4Times=(n=4)=>{
while(n--){
console.count("次数统计");
}
}
WillDid4Times();
/* output:
次数统计: 1
次数统计: 2
次数统计: 3
次数统计: 4
*/
注意 : 当count中有变量时,将不会视为同一次的输出
const WillDid4Times=(n=4)=>{
while(n--){
console.count(`次数${n}`);
}
}
WillDid4Times()
//output
/*
次数3: 1
次数2: 1
次数1: 1
次数0: 1
*/
记录代码执行耗时
console.time & console.timeEnd
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
//Array initialize: 380.48193359375ms
