对于前端开发者来说，Chrome自带的Chrome Dev Tools是不可或缺的开发调试工具。但是，你可能只用过console.log()，却不知道console有很多强大的调试方法。

Chrome自带的开发者工具提供了强大的调试系统，可以用来查看DOM树结构、CSS样式调试、动画调试、JS代码断点调试。今天不说别的，只说用console调试那些东西。

当使用React、Vue等需要编译语法的前端框架时，前端调试变得不那么容易了。除了React Dev工具、Vue Dev工具、Redux Dev工具等Chrome插件，就是一堆console.log()打印我们需要看到的变量。虽然也有用，但是相对简单，调试复杂数据需要多次输出比较。

如果你平时只使用console.log()输出一些变量的值，那么你肯定没有用过console的强大功能。下面带你玩玩控制台花式调试。

console主要函数

我们先来看看Chrome(博主使用的Chrome版本为：60.0.3112.90版(正式版)(64位))上的console对象的属性和功能。

看完之后才知道，console中除了log方法还有很多其他的方法。

下面，我们来看看一些主要的调试功能和用法。

console.log(), console.error(), console.warn(), console.info()

最基本也是最常见的用法是分别输出一般信息、错误信息、警告信息和提示信息，错误和警告方法都有特定的图标和颜色标记。

console.assert(expression, message)

参数：

表达式：条件语句，语句会被解析成Boolean，当它为false时，会触发message语句的输出。

消息：输出语句，可以是任何类型。

该函数将在expression为false时在控制台上输出一条语句，输出内容是传入的第二个参数消息的内容。当我们只需要在特定情况下输出语句时，可以使用console.assert。

例子如下：

函数大于(a，b) {

console.assert(a b，{message:a不大于b ， a:a， b :b })；

}

greaterThan(5，6)；

console.count(label)

参数：

标签:计算数量的标识符

此函数用于计算并输出以特定标识符作为参数的console.count函数被调用的次数。下面的例子更直观：

功能登录(名称){

console.count(名称“已登录”)；

}

console.dir(object)

参数：

对象：输出一个实体对象。

该功能用于打印出对象的属性、功能、表达式等详细信息。如果对象被记录为HTML元素，HTML元素的DOM表达式的属性将被打印出来，如下所示：

console . dir(document . body)；

console.dirxml(object)

该函数将打印出xml元素及其后代，对HTML和XML元素调用console.dirxml()和console.log()是等效的。

console.group([label]), console.groupEnd([label])

参数：

标签:组分组的标识符

在控制台新建一个分组，然后输出到控制台的内容会自动添加一个缩进，表示该内容属于当前分组。调用console.groupEnd()后，当前分组结束。

例如：

console.log(这是外层)；

console . group()；

console.log(“级别2”)；

console . group()；

console.log(“级别3”)；

console.warn(更多级别3 )；

console . groupend()；

console.log(回到2级)；

console . groupend()；

console.log(回到外层)；

console.groupCollapsed(label)

这个函数和console.group()唯一的区别是，这个函数的输出默认不扩展分组，而console.group()是默认的扩展分组。

console.time([label]), console.timeEnd([label])

标签:用于标记计时器的名称；如果留空，默认值为default。

Console.time()会启动一个定时器，当执行到console.timeEnd()函数(要求两个函数有相同的lable参数)时，会结束定时器，将定时器的总时间输出到控制台。

这里还有几个例子：

console . time()；

var arr=新数组(10000)；

for(var I=0；长度；i ) {

arr[I]=new Object()；

}

console . time end()；

//默认值：3.696044921875毫秒

为console.time(label)设置一个自定义标签字段，并使用console.timeEnd(label)设置相同的标签字段来结束计时器。

console.time(total )。

var arr=新数组(10000)；

for(var I=0；长度；i ) {

arr[I]=new Object()；

}

console . time end( total )；

//总计：3.696044921875毫秒

设置多个标签属性，启动多个定时器同步计时。

console.time(total )。

console . time( init arr )；

var arr=新数组(10000)；

console . time end( init arr )；

for(var I=0；长度；i ) {

arr[I]=new Object()；

}

console . time end( total )；

//初始化数组：0.0546875毫秒

//总计：2.5419921875毫秒

console.trace(object)

该函数将从控制台上调用console.trace()的位置打印出堆栈信息。

本文只说明Chrome自带开发者工具的控制台功能和使用方法。下面这篇文章讲解了Chrome自带开发者工具的其他功能，用户有兴趣可以看看。

Chrome工具9个调试技巧详解：//www . jb51 . net/article/147438 . htm