携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第十二天,点击查看活动详情
前言
前端开发调试的过程中,最常用的手段就是通过 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的信息,我们可以开启每条日志的打印时间功能。