console 调试技巧

前言

若是统计一番前端最经常使用的方法，那么 console.log 必定位列其中。不管你写的是原生 JS 亦或者是 JQuery、Vue等等，调试之时，都离不开 console.log 方法。可是，console 对象中的方法不只仅只有 log 方法。强大的 console 对象提供了大量控制台调试的相关方法，掌握这些方法能够大大方便你的调试，甚至作出一些炫酷的控制台字符画。

基本输出

console 对象最基础的方法毫无疑问是 log，该方法会直接在控制台上输出参数，若是输入多个参数，那么输出在控制台上的参数用空格分隔，以下所示：

console.log('Hello World');
console.log('Hello', 'World');

打开控制台，运行结果以下图所示：

console.log 还含有相似于 Python 的占位符功能，可是，我的认为该功能能够彻底被 ES6 中的字符串模板彻底替代，有兴趣的能够去了解，在此再也不赘述。

分类输出

厌倦了 console.log 单调的输出？欢迎尝试 console 对象的分类输出功能。console 对象提供了 info、warn、error 方法分别输出提示、警告以及错误信息。

咱们输入下面这段代码：

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

结果以下图所示：

能够发现，warn 和 error 方法分别输出了一条警告和一条错误信息。可是，为何 log 方法和 info 方法输出是同样的呢？

缘由在于，我使用的是 Chrome 浏览器，在 Chrome 浏览器上，log 方法和 info 方法的表现是同样的。可是，在其余浏览器上，好比 FireFox，info 方法前面会有一个信息图标。

因为 info 方法的效果不明显，而且各个浏览器中效果有差别，因此通常状况下，咱们使用 log 方法代替 info 方法。

断言输出

console 对象提供了相似于单元测试中的断言的方法：assert。该方法接收两个参数，第一个参数为断言条件，第二个参数表明断言信息。

同单元测试断言同样，当断言条件为 true 时，assert 无输出；只有当断言条件为 false 时，assert 方法才会在控制台中输出一条断言错误信息。

咱们输入如下代码：

console.assert(true, 'true')
console.assert(false, 'false')

控制台以下所示：

能够发现，控制台只输出了那一条断言条件为 false 的语句。

分组输出

当你的控制台上输出了大量信息时，控制台会显得极其杂乱，你甚至不知道某一条信息是哪条代码输出的。此时，console 对象的 group 以及 groupEnd 方法能够拯救你。

将部分 console 语句放入 group 与 groupEnd 之间，能够造成将这部分 console 语句划定为一组信息进行输出。其中，group 方法接收一个字符，做为分组名称，groupEnd 方法不接收参数用于结束分组。

输入如下代码：

console.group('1')
console.log('1-1')
console.warn('1-2')
console.error('1-3')
console.groupEnd()

console.group('2')
console.log('2-1')
console.warn('2-2')
console.error('2-3')
console.groupEnd()

结果如图所示：

经过点击分组的箭头，能够折叠分组，方便概括整理控制台信息，避免控制台被海量信息淹没。

表格输出

咱们不只能够将控制台信息分组输出，咱们还能够将其以表格的形式输出。

console 的 table 方法能够将一个对象以表格的形式输出，当输入的参数不是对象时，此时，table 方法至关于 log 方法。

输入如下代码：

const obj = {
    a: {
        id: 1,
        value: 1
    },
    b: {
        id: 2,
        value: 2
    }
};

console.log(obj)

console.table(obj)

控制台如图所示：

控制台不只以表格形式输出了对象，还以基础输出的方式输出了对象以方便查看信息。

计次输出

在平常开发中，有一个常见的调试需求——计算一段代码的执行次数。通常来讲，咱们会在这段代码中定义一个变量，每执行一次它就进行一次自增，并经过 console.log 方法输出该变量。

能够看出，上述的方法略显麻烦，可不能够一行代码就解决这个问题呢？固然能够！count 方法，你值得拥有。

for(let i = 0; i < 5; i++){
    console.count("num");
}
console.count("num");
console.count("anotherNum")

结果以下图所示：

能够发现，count 方法经过输入的字符串区分不一样的计数语句。

计时输出

当测试算法性能时，咱们一般使用时间复杂度来评价算法的性能，可是，时间复杂度哪里有代码执行时间来的直观呢？

在以前不了解 console 对象的时候，咱们在算法的头尾分别获取时间戳，取时间戳的差值做为代码执行时间。很明显，这种方法太过繁琐。

使用 console 对象的 time 以及 timeEnd 方法能够计算出代码执行时间。

console.time('time');
let sum = 0;
for (let i = 0; i < 100000;i++) {
    sum += i;
}
console.timeEnd('time');

结果以下图所示：

最后

除了上述的方法，cnosole 方法还有不少强大的方法，好比：dir、debug、trace等，可是它们有的在 Chrome 效果不佳，有的能被 Chrome debugger 完美替代，因此，在此再也不赘述。若是有兴趣，能够进一步了解。