console你只會log?

console.log我相信寫過JavaScript人必定都有接觸過，它可謂是咱們debug的靈丹妙藥。但是除了log方法，你知道console還有不少能夠幫你快速提升代碼debug效率（逼格）的方法嗎？

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

使用場景

輸出不一樣類型（level）的內容。

用法

這幾個方法用起來都差很少，只不過輸出結果可能會存在顏色上的區別：

注意console.debug若是沒有輸出能夠將log level中的verbose選上（chrome）:

替換字符串 - string substitution

使用場景

呈現輸出時的上下文信息（context）。

用法

如今支持如下替換字符串：

替換字符串	描述
%o 或者 %O	JavaScript 對象，能夠是整數、字符串或是 JSON 數據。
%d或者%i	整數。
%s	字符串。
%f	浮點數。

爲輸出添加CSS樣式

使用場景

讓內容更加結構化並且能夠極大地提升逼格。

用法

使用%c爲某部分的輸出內容定義樣式：

console.assert

使用場景

條件性輸出。有些信息你可能只想在某些條件不知足的時候才進行輸出，這個時候你能夠用這種方法而不是加多個if判斷。

用法

console.assert(condition, ...data)

注意只有condition是false的時候data纔會被輸出：

console.table

使用情景

以表格的形式輸出數據。這個方法最適用的場景我以爲是對象的數組，由於他可讓你一目瞭然地看到數組內對象各個屬性的值。

用法

console.group

使用情景

當你有大量的內容要輸出到界面上時，可使用console.group方法爲輸出的內容添加必定的縮進來更好地整理這些內容。

用法

這裏要記住的是每一個group都須要手動地調用groupEnd來退出。

console.trace

使用情景

追蹤函數的執行棧。當你想知道一個函數具體是怎樣被調用的時，可使用console.trace這個函數去追蹤它的執行棧。

用法

console.count

使用場景

統計代碼的執行次數。

用法

你還可使用label去區分不一樣的統計類型：

console.time

使用場景

記錄代碼執行的耗時，以毫秒（ms）爲單位。

用法

console.time(timerName)

參考網站

• https://developer.mozilla.org...
• https://medium.com/javascript...

持續關注個人技術動態

我是進擊的大蔥，如今在一家電商公司作Team Leader，關注我和我一塊兒進步成獨當一面的全棧工程師！

文章首發於：幾個提升效率的console APIs

關注個人我的公衆號獲取個人最新技術推送！