花里胡哨的JS console.log 使用小技巧

对于开发者来说，在浏览器上打印信息已经变得越来越普遍，console.log()就像是万能的方案，在你需要定位你的代码中的问题的时候。

我确信，我不是唯一一个在大多数情况下，需要通过在浏览器上打印信息来知道究竟发生了什么的人。🤪

Debugging like being the detective in a crime movie where you’re also the murderer — Filipe Fortes 🐛

 

 

除了最常见的通过console.log() 来打印信息之外，还有许多其他的方法，可以使你的debugger过程更加容易。让我们看看下面的例子。

 

1. console.log( ) | info( ) | debug( ) | warn( ) | error( )

根据事件的类型不同，会带有不同的颜色

 

 

console log/info/debug/warn/error

 

 

2. 使用占位符

占位符的使用有以下情况

%o   ——代表用对象来替换

%s   ——代表用字符串来替换

%d   ——代表用数字来替换

 

placeholders

 

 

3. 添加css 到 输出信息

你是否会觉得所有的信息看起来都是一样的？从现在起一切都会变得不同，让你的信息众多的信息中更突出。

 

Messages with colors

 

怎么样突出日志中特殊的词？像这样 😄

highlighting specific word

 

4. console.dir( )

打印一个JSON 对象

 

 

5. 打印HTML 

获取html 元素，像是一个特殊的元素

 

6.console.table ( )

用一种易于理解的方案展示JSON

 

 

7. console.group( ) & console.groupEnd( )

让日志信息实现分组

 

 

 

8.console.count( )

这个方法可以打印count() 被调用的次数，方法接受一个参数 label 如果提供label 这个方法就会按照 label 来统计次数，如果没有提供，这个方法就会统计所处的位置上的调用次数。

 

 

9.console.assert()

这个方法提供选择性打印日志，该方法只会在一个参数为false的情况下执行，为true时什么都不执行。

 

 

10.console.trace( )

这个方法用来追踪函数的调用轨迹

 

 

11.console.time( )

这个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间

 

 

12.console.memory( )

展示javaScript 应用使用了多少浏览器的内存

 

 

13.console.clear( )

这是最后一个函数了，但不是最新的函数😁, 清理掉所有打印的信息。

 

转自：https://medium.com/javascript-in-plain-english/mastering-js-console-log-like-a-pro-1c634e6393f9