JS console.log 使用小技巧

731 阅读2分钟

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

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

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


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


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

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


image.png


console log/info/debug/warn/error


使用占位符

占位符的使用有以下情况


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

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

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


image.png


placeholders


添加css 到 输出信息

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

image.png


Messages with colors


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

image.png

highlighting specific word


console.dir( )

打印一个JSON 对象

image.png


打印HTML

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

image.png

console.table ( )

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

image.png

console.group( ) & console.groupEnd( )

让日志信息实现分组

image.png



console.count( )

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

image.png

console.assert()

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

image.png


console.trace( )

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

image.png


console.time( )

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

image.png


console.memory( )

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

image.png


console.clear( )

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


转自:medium.com/javascript-…