花里胡哨的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( )

這是最后一個函數了，但不是最新的函數😁, 清理掉所有打印的信息。