你不知道的console方法全解

console.log()相信我们并不默认,也是我们最长应用的一个,但是在console这个对象上面不止有这一个方法,如果学会其他方法会对我们的调试水平得到很大的提高下面我来介绍一下。

1. console.assert()传入的参数返回值如果是false,那么浏览器则会提示

2. 反之为true,则什么都没有。

3. console.clear()很显然这是一个用于清除控制台的函数，他会帮我们清除控制台的信息。

4. console.count()执行后会打印两个数据,第一个数据是传入的变量,第二个参数是打印调用的次数

5. console.countReset()调用以后回去重置上一个方法穿入数据的调用次数。

6. console.debug()与常规的console.log并没有什么区别,区别仅仅是debug打印的数据,默认会被浏览器屏蔽掉,需要将浏览器的详细选项勾选上才可以看的到。

7. console.dir()这个函数应用场景是比如我们需要获取一个元素参看他的属性

但浏览器却给我们返回了一个dom元素,这个时候就可以使用我们的console.dir打印,打印结果如下

8. console.dirxml(),官方说明显示一个明确的 XML/HTML 元素的包括所有后代元素的交互树。如果无法作为一个 element 被显示，那么会以 JavaScript 对象的形式作为替代。它的输出是一个继承的扩展的节点列表，可以让你看到子节点的内容。但是当我打印一个元素的结果发现他和console.log()都是一样的。

9. console.error和console.warn以及console.info写框架的人一定不陌生,console.error红色背景提示用户并有一个x的icon。

console.warn黄色背景提示用户,加上一个！icon

10. console.group()传入一个字符串，后续log打印的内容都会被记录下来,通过console.groupEnd()来结束记录。打印的样子如下

浏览器默认状态如果想要缩放状态使用console.groupCollapsed()。

11. console.profile()和console.profileEnd传入一个变量console.profile()开始记录性能分析报告，

console.profileEnd()结束记录。

12. console.table()会将一个数组在控制台打印为一个表格。

如果是数组对象嵌套形式

13. console.time() console.timeLog() console.timeEnd()

• console.time()传入一个字符串,开始一个传入参数为名字的定时器。

• console.timeEnd()结束这个定时器,告诉你这个定时器执行了多久。

• console.timeLog()告诉你执行了多久,但不会结束这个定时器。

• 可以用于记录一个循环或者函数执行用了多久

14. console.trace告诉你都是谁调用了它。

function foo() {
    function bar() {
        console.trace();
    }
    bar();
}

foo();

在这段代码中先调用foo,再调用bar,打印结果:

小结:console.table打印数组数据,console.trace打印谁调用,console.count记录执行了多少次，console.dir解析dom节点为对象,其它的用处不大。