不为人知的console方法

1、断言：console.assert(expression, object[, object...])

// 使用chrome测试
console.assert(false,"test") //  Assertion failed  test
console.assert(false,"test","test2") // Assertion failed  test   test2
console.assert(true,"test") // 无输出

说明：当expression为false时输出后续参数，
当expression为true时无输出。

2、计数：console.count("asd")

for(var i=0;i<10;i++){
    console.count(i) 
}
for(var j=0;j<10;j++){
    console.count(j)
}

说明：console.count()用于对输出的相同值进行计数，例如上面代码中从0到9个输出了两次，第二次循环输出时，没次的输出计数都是2，如图：

image.png

3、展示属性： console.dir(obj)

var obj = {
    name:"江口不二子",
    age:10,
    sex:0,
}
console.log(obj)  // {name: "江口不二子", age: 10, sex: 0}

说明：console.dir(obj) 会在控制台打印传入对象的所有属性及属性值。

4、错误警告：console.error(object[, object...])

说明：用法与console.log()一样，只是打印样式不同，为红色警告信息。

5、分组打印：console.group()与console.groupEnd()

console.group()
console.log("1");
console.log("1");
console.log("1");
console.log("1");
console.log("1");
console.log("1");
console.log("1");
console.groupEnd();  // 结束打印分组
// 打印结果如图2所示

图2

6、信息提示：console.info(object[, object...])

说明：与console.log()类似

7、表格输出：console.table()

var obj = {
    name:"江口不二子",
    age:10,
    sex:0,
}
console.table(obj)

说明：以表格方式打印数组或对象,以上代码输出结果见图3.

图3

8、打印性能分析：console.profile([profileLabel]) 与console.profileEnd();

console.profile()
// 这里插入要进行性能分析的一段代码
console.profileEnd()

说明，console.profile()与console.profileEnd()结合会打印位于其中间一段代码的执行性能

9、打印运行时间：console.time()和console.timeEnd()

console.time('计时器');
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');

10、函数追踪：console.trace()

11、警告：console.warn()

12、console.debug() 用于输出输出debug的信息。

13、console.timeStamp() 用于标记运行时的timeline信息。

14、console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）。

15、console.clear() 清空控制台的内容（当然你可以用快捷键ctrl+L）。

16、$0 可以在控制台输出在Elements面板选中的页面元素。

17、$_ 表示上一次在控制台键入的命令，你也可以用快捷键“上方向键”来达到同样的效果。

18、$x 可以用xPath的语法来获取页面上的元素。

参考文献：你真的了解 console 吗