精讀《精通 console.log》

1 引言

本週精讀的文章是 Mastering JS console.log like a Pro，一塊兒來更全面的認識 console 吧！

2 概述 & 精讀

console 的功能主要在於控制檯打印，它能夠打印任何字符、對象、甚至 DOM 元素和系統信息，下面一一介紹。

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

直接打印字符，區別在於展現形態的不一樣：

<img width=400 src="https://img.alicdn.com/tfs/TB1xZ_WveH2gK0jSZFEXXcqMpXa-1492-566.png">

新版 chrome 控制檯能夠將打印信息分類：

<img width=200 src="https://img.alicdn.com/tfs/TB1fZ2Vvhn1gK0jSZKPXXXvUXXa-420-446.png">

log() 與 info() 都對應 info，warn() 對應 warnings，error() 對應 errors，而 debug() 對應 verbose，所以建議在合適的場景使用合適的打印習慣，這樣排查問題時也能夠有針對性的篩選。

好比調試信息能夠用 console.debug 僅在調試環境下輸出，調試者即使開啓了調試參數也不會影響正常 info 的查看，由於調試信息都輸出在 verbose 中。

使用佔位符

• %o — 對象
• %s — 字符串
• %d — 數字

以下所示，可經過佔位符在一行中插入不一樣類型的值：

<img width=400 src="https://img.alicdn.com/tfs/TB1GtL3vlr0gK0jSZFnXXbRRXXa-1840-504.png">

添加 CSS 樣式

• %c - 樣式

<img width=400 src="https://img.alicdn.com/tfs/TB1eK23vlr0gK0jSZFnXXbRRXXa-1832-978.png">

能夠總結出，console 支持輸出複雜的內容，其輸出能力堪比 HTML，但輸入能力太弱，僅爲字符串，所以採用了佔位符 + 多入參修飾的設計模式解決這個問題。

console.dir( )

按 JSON 模式輸出。筆者在這裏也補充一句：console.log() 會自動判斷類型，若是內容是 DOM 屬性，則輸出 DOM 樹，但 console.dir 會強制以 JSON 模式輸出，用在 DOM 對象時可強制轉換爲 JSON 輸出。

<img width=400 src="https://img.alicdn.com/tfs/TB1KQY1vbj1gK0jSZFuXXcrHpXa-922-302.png">

輸出 HTML 元素

按照 HTML ELements 結構輸出：

<img width=400 src="https://img.alicdn.com/tfs/TB1mZ61va61gK0jSZFlXXXDKFXa-920-255.png">

這種輸出結構和 Elements 打印形式是一致的，若是要看詳細屬性，可使用 console.dir()。

console.table

在控制檯打印一個表格，屬於功能加強。雖然僅文本也能夠在控制檯打印出漂亮的表格，但瀏覽器調試控制檯的功能更強大，console.table 只是其富文本能力的一個體現。

<img width=400 src="https://img.alicdn.com/tfs/TB1WldouKbviK0jSZFNXXaApXXa-928-742.png">

console.group( ) & console.groupEnd( )

接下來是另外一個富文本能力，按分組輸出：

<img width=400 src="https://img.alicdn.com/tfs/TB1UV6UvXY7gK0jSZKzXXaikpXa-919-377.png">

這種帶有反作用的 API 顯然是爲方便閱讀而設計的，然而在須要輸出大量動態結構化數據的場景下，還須要進行結構轉換，是比較麻煩的地方。

console.count( )

count() 用來打印調用次數，通常用在循環或遞歸函數中。接收一個 label 參數以定製輸出，默認直接輸出 1 2 3 數字。

<img width=400 src="https://img.alicdn.com/tfs/TB1ELLVveL2gK0jSZPhXXahvXXa-917-500.png">

console.assert( )

console 版斷言工具，當且僅當第一個參數值爲 false 時纔打印第二個參數做爲輸出。

<img width=400 src="https://img.alicdn.com/tfs/TB1HEDUvfb2gK0jSZK9XXaEgFXa-1842-548.png">

這種輸出結果爲 error，因此也可被 console.error + 代碼級別斷言所取代。

console.trace( )

打印此時的調用棧，在打印輔助調試信息時很是有用。

<img width=400 src="https://img.alicdn.com/tfs/TB1Jh_YvkL0gK0jSZFAXXcA9pXa-1840-1096.png">

console.time( )

打印代碼執行時間，性能優化和監控場景比較常見。

<img width=400 src="https://img.alicdn.com/tfs/TB1wAT2vbj1gK0jSZFuXXcrHpXa-1612-524.png">

console.memory( )

打印內存使用狀況。

<img width=400 src="https://img.alicdn.com/tfs/TB1tPHYvkL0gK0jSZFAXXcA9pXa-1842-440.png">

console.clear( )

清空控制檯輸出。

3 總結

console 提供瞭如此多的輸出規範，其實也是在變相制定開發規範，畢竟離開發者最近的就是調試控制檯，若是你的項目打印規範與標準規範有差別，那麼調試時信息看起來就會很彆扭。

能夠看到，大部分開源庫都良好的遵循了這套規範，好比三方庫毫不會輸出 log()，並且將錯誤、警告與調試信息正確分開，並儘可能少的用 CSS 樣式、分組、table 等功能，由於這些功能干擾性較強，不能保證全部用戶均可接受。

相對的，項目源碼就比較適合使用一些醒目的自定義規範，只要這套規則能被很好的執行起來。

最後留下一個討論點：console 能夠做爲調試、招聘信息、隱藏菜單的投放點，你還看到過哪些有意思的 console 使用方式呢？歡迎留言。

討論地址是： 精讀《精通 console.log》 · Issue #228 · dt-fe/weekly

若是你想參與討論，請 點擊這裏，每週都有新的主題，週末或週一發佈。前端精讀 - 幫你篩選靠譜的內容。

關注 前端精讀微信公衆號

<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">

版權聲明：自由轉載-非商用-非衍生-保持署名（ 創意共享 3.0 許可證）