输出信息分类

不止于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