Chrome 操作指南——入门篇（九）调试小技巧

作者：Augus

2022 年 9 月 22 日
天津
本文字数：653 字
阅读完需：约 2 分钟

前言

前端开发调试的过程中，最常用的手段就是通过 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 的信息，我们可以开启每条日志的打印时间功能。

发布于: 刚刚阅读数: 3

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

Chrome 操作指南——入门篇（九）调试小技巧

前言

console.table(...)

console.assert(...)

console.log({...})

timestamps

Augus

评论