Chrome操作指南——入门篇(九)调试小技巧

155 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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]);

image.png

而且表格还支持缩放,排序和过滤。

console.table([john, jane, emily], 'firstName');

console.assert(...)

有些时候可能需要通过判断一定的条件,在打印日志。比如当数组为空时,或者该值为空时打印。

const stus = [], john = { name: 'john', age: ''}
if(!stus.length) console.log('数组为空')
if(!john.age) console.log('年龄为空')

image.png

但是通过console.assert(...)就省去了判断的烦恼。

console.assert(stus.length, '数组为空')
console.assert(john.age, '年龄为空')

image.png

console.log({...})

当我们打印的变量一多的时候,可能就分不清哪个是哪个了,影响阅读体验,这个时候我们就可以通过es6语法的新特性,给每个加上一个key,这样就能很容易的分清楚了。

image.png

当然,我们也可以加上 console.table 让数据更加直观。

timestamps

当然,为了更好的观察log的信息,我们可以开启每条日志的打印时间功能。

timestamps.gif