对于前端开发者来说，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
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。