前言
前端开发调试的过程中,最常用的手段就是通过 console.log(...)
来打印各种信息。不过在某些情况下,除了通过log来打印,也可以通过别的方式来进行打印,而且效果更直观,更方便。
console.table(...)
当我们需要打印一个数组或者对象的时候,完全就可以通过console.table(...)
实现,它把你所需要东西,解析成一个表格,观看更加直观。
function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } var john = new Person("John", "Smith"); var jane = new Person("Jane", "Doe"); var emily = new Person("Emily", "Jones"); console.table([john, jane, emily]); 复制代码
而且表格还支持缩放,排序和过滤。
console.table([john, jane, emily], 'firstName'); 复制代码
console.assert(...)
有些时候可能需要通过判断一定的条件,在打印日志。比如当数组为空时,或者该值为空时打印。
const stus = [], john = { name: 'john', age: ''} if(!stus.length) console.log('数组为空') if(!john.age) console.log('年龄为空') 复制代码
但是通过console.assert(...)
就省去了判断的烦恼。
console.assert(stus.length, '数组为空') console.assert(john.age, '年龄为空') 复制代码
console.log({...})
当我们打印的变量一多的时候,可能就分不清哪个是哪个了,影响阅读体验,这个时候我们就可以通过es6语法的新特性,给每个加上一个key,这样就能很容易的分清楚了。
当然,我们也可以加上 console.table
让数据更加直观。
timestamps
当然,为了更好的观察log的信息,我们可以开启每条日志的打印时间功能。