别光知道用console.log调试了，快来试试这些高效的调试方法！

作为一名前端开发人员，你一定经常使用 console.log 来进行开发调试，这当然没什么问题，但你可能不知道，除了 console.log ，浏览器的 Console 对象还包含了许多其他非常有用的方法，让我们一起来领略一下吧。

console.log

介绍

console.log方法使我们最常使用的了，用于在控制台打印信息。他的功能还是很强大的，各种数据类型如number、string、array、object、function等都能打印，并在后面显示错误发生的位置。

示例

let num = 123
let str = '123'
let arr = [1, 2, 3]
let obj = {
a: 1,
b: 2,
c: 3,
}
function func() {
// 我是全掘金最帅的
}
console.log(num)
console.log(str)
console.log(arr)
console.log(obj)
console.log(func) 复制代码

Chrome控制台效果如下：

console.info

介绍

console.info 和 console.log 的作用是几乎完全一样的，也是在控制台中打印信息，只不过打印时的样式可能与 console.log 略有区别。
在这里需要说明一下，Console 对象并不是javascript的内置对象，而是浏览器的内置对象，因此在控制台中的输出样式和各浏览器相关。

示例

console.log('this is console.log')
console.info('this is console.info') 复制代码

在Chrome浏览器的控制台中效果如下，二者看上去没有什么区别： 在火狐浏览器的控制台效果如下，console.info 打印的内容前面多了个 ! 符号：

console.error

介绍

console.error 同样和console.log的作用几乎一样，不过会将打印的内容通过显目的红色标注出来并前面带一个 × 。
如下所示，当大家在开发调试的过程中通过 console.log 打印的内容很多，但某条打印信息想要快速的找到时，console.error 这种“万黑丛中一点红”的效果，可以让你很便捷地找到。

示例

console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.error('牛牛牛牛牛牛牛牛牛午牛牛牛牛牛牛') // 这里面有个 '午' 字
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛') 复制代码

小提示

当然了，当我们的程序逻辑执行出错时，在控制台中的报错信息也是通过 console.error 来打印的，所以如果你真的使用 console.error 来进行调试时，千万不要把打印的内容误以为代码逻辑有错误。

console.warn

介绍

console.warn的道理同上，会通过黄色感叹号来高亮打印信息。

示例

console.log('this is console.log')
console.warn('this is console.warn') 复制代码

控制台输出如下：

console.time和console.timeEnd

介绍

console.time 和 console.timeEnd 两个方法是结合在一起使用的，他们接受一个相同的参数，输出两句表达式中间的代码的执行时间。

示例

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

chrome控制台的打印信息如下：

小提示

1. console.time 和 console.timeEnd 接收的参数不止可以是字符串，可以是任何类型，也可以是变量，甚至这种传入两个“长相相同”的引用类型也可以。他会对传入的对象执行toString()方法作为最终的打印名称，例如你对console.time 和 console.timeEnd分别传入值[1, 2, 3]，虽然两个[1, 2, 3]的地址不同，但执行了toString方法后他们都变成了1, 2, 3，这也是符合规则的。

2. 可以同时定义多组console.time 和 console.timeEnd，并且他们之间可以交叉使用，只要保持每组接收的参数一致就行，如下面的使用方法也是可以的：

console.time('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
 for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器1');
for (var i = 0; i < 10000; i++) {
 for (var j = 0; j < 10000; j++) {}
}
console.timeEnd('计时器2'); 复制代码

执行结果如下：

应用

JS中文网 – 全球极客挚爱的技术成长平台 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

console.time 和 console.timeEnd 可以让你在开发过程中方便的调试各段逻辑的执行时间，去比较不同的方法所消耗的时间。再了解这两个方法之前，我一般是通过两个Date.now()相减去计算某段逻辑的执行时间，有了这组方法后调试更加方便了。

console.count

介绍

console.count 会打印当前的打印内容，并在后面跟上该内容的打印次数。

示例

console.count('content1');
console.count('content1');
console.count('content1');
console.count('content2');
console.count('content2');
for (let i = 0; i < 5; i++) {
console.count('content3')
} 复制代码

控制台的打印结果如下：

console.table

介绍

console.table 会将复合数据类型（对象，数组等）在控制台中以表格的形式打印输出，并且你可以将对象数组嵌套乃至结合使用，他都能够将其解析为表格形式。

示例

let obj= {
a: 1,
b: 2,
c: 3
};
console.table(obj);
let arr = [1, 2, 3]
console.table(arr);
let data1 = [
{ num: 1 },
{ num: 2 },
{ num: 3 },
]
console.table(data1);
let data = [
{ a: 1 },
{ b: 2 },
{ c: 3 },
]
console.table(data); 复制代码

控制台的输出结果如下：

console.group/console.groupCollapsed和console.groupEnd

介绍

console.group和console.groupEnd 结合使用，他们用于将打印的信息分组，可以把信息进行折叠和展开。

示例

console.group('第一层');
console.group('第二层');
console.log('error');
console.error('error');
console.warn('error');
console.groupEnd();
console.groupEnd(); 复制代码

Chrome浏览器的打印结果如下： console.groupCollapsed 和 console.groupEnd 结合使用和上述的作用是一样的，唯一区别是 console.group 打印的内容第一次展示是展开的，console.groupCollapsed 打印的内容第一次展示是收齐的。

console.trace

介绍

console.trace 是一个调试过程中十分有用的方法，他可以追溯你的逻辑执行过程。

示例

function d(a) {
console.trace();
return a;
}
function b(a) {
return c(a);
}
function c(a) {
return d(a);
}
let a = b('123'); 复制代码

控制人输出如下： 当逻辑执行到let a = b('123') 语句时，b函数会调用c函数，c函数再调用d函数，d函数中调用了console.trace()，这时console.trace()会将整个执行过程自底向上追溯打印出来。

console.assert

介绍

console.assert 方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数（并且以error提示的形式输出）。

示例

console.assert(true === false, "输出内容1")
console.assert(true === true, "输出内容2") 复制代码

控制台的结果如下： 第一个console.assert 的参数1为false，所以打印了，第一个console.assert true，所以没打印。

console.clear

介绍

console.clear 方法会清空控制台所有打印内容，并将光标返回第一行，就不多说了。

给console的内容设置style

在你逛各个网站时，如果你去看他们的控制台打印信息，那么你可能会发现一些有趣的内容。例如?天猫的控制台：

介绍

我们也可以给控制台的日志信息添加样式。方法很简单，我们只需要将css style作为第二个参数传到console.log打印内容中，同时在第一个参数中添加%c，第二个参数中的内容将替换掉%c。

示例

const style = 'color: red; background: skyblue; font-size: 24px; padding: 10px; font-weight: bold;'
console.log('%c都看到这里了，还不点个赞？', style) 复制代码

控制台打印信息如下：

总结

Console对象方法众多，功能强大，学着使用各种console方法，能够让我们在开发调试中事半功倍，快去体验一下各种有趣的console吧！

作者：梨香
链接：https://juejin.im/post/6891427703249977352