你还只会 console.log 调试嘛？

点击上方蓝字关注前端真好玩，从此前端进阶不再难

console 其实提供了很多调试方法，有些方法还是挺好用的，今天就来介绍那些笔者认为不错的方法。

分类 log

如果你希望对 log 进行分类或者只是为了显示的醒目点，就可以使用以下方法。

// log 和 info 在 Chrome 下显示效果相同
console.log(1)
console.info(1)
console.error(1)
console.warn(1)

显示输出如下：

% 操作符

% 操作符笔者在写别的语言时候经常用，但是 JS 可以直接使用模板字符串来解决，但是可能很多人不知道这种用法，在这里就提一嘴。

console.log('Hello %f', 1)
console.log('Hello %s', '1')

% 后面跟的英文代表你传入变量的类型，比如说 f 代表 float（浮点数）；s 代表 string（字符串），其他还有些别的类型有兴趣的读者可以自己百度下。

另外需要注意一点的是如果传入的类型不符合你声明的，这时 JS 是不会帮你进行类型转换的，比如：

分组显示

大家应该经常有需要 log 多个的情况，这种时候你可能会选择使用这样的代码：

console.log('-----分组 1-----')
console.log('内容')
console.log('----------')

其实有更简便的方式来帮助我们分组 log

console.group('分组')
console.log('内容')
console.groupEnd()

计时

有时候你可能需要给一段代码计时，查看它需要执行多久，是否存在性能问题。通常的办法就是 date 相减，然后把这个值 log 出来，其实 console 同样也提供了此类方法。

console.time()
console.timeEnd()

对象时空固定术

之前看到几次群里有同学问类似这样的问题：为什么我明明把 XX 改了，但是输出的时候它不是我想的那样（确保代码都正确）。

let a = { b: { c: 1 } }
a.b.c = 2
console.log(a)
a.b.c = 3

当你打开 log 的时候你会发现 c 的值为 3。其实这个显示没太大问题，因为这种显示方式永远显示的是最新的对象数据。如果你就想看到 c 改动为 2 时的对象，可以选择以下方式（对象时空固定术）：

let a = { b: { c: 1 } }
a.b.c = 2
console.table(a)
a.b.c = 3

此时你会发现输出符合了你的预期

最后

大家可以来聊聊平时你在使用 console 时候的骚操作或者调试的好办法。