你不知道的Chrome DevTools（1）：神奇的console

Web前端開發過程當中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它做爲Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的標籤代碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。

可是Chrome能作的遠不止你日常用的那麼簡單，這一個小小的開發工具集成了不少高級的功能你未必知道。我打算把一些Chrome DevTools上使用的高級技巧寫成《你不知道的Chrome DevTools》這一系列的博文，但願你們一塊兒學習學習。

---

console簡介

這一篇主要介紹咱們經常使用的console這個瀏覽器api。在Javascript代碼中使用console的最簡單的用法就是寫個console.log()在控制檯打印一行消息。然而你知道嗎？console除了用log這個方法來打印消息外，還error、warn、assert、dir、info、trace等高級方法，每一個方法對應不用的用途，在下文將一一敘述。

多彩的console.log

其實console.log()方法裏能夠傳入多個參數，控制檯會根據參數的設置把多個消息打印到同一行的。好比這樣：

console.log("test", 123);

這樣在控制檯就會這樣顯示：

若是log方法裏第一個參數是帶有特別標識符的字符串的話，控制檯會根據不一樣的標識符來把後面的參數填充到前面的字符串中去。常見的標識符有如下：

• %s 表示輸出字符串
• %d 表示輸出數字（也能夠用%i）
• %f 表示輸出浮點數值
• %o 表示輸出Dom元素
• %O 表示輸出JavaScript對象
• %c 表示對輸出的文字應用特殊的樣式

從下面幾個截圖能夠看得出這些標識符的用法了。

最特別的仍是%c的用法，使用了%c你就可讓控制檯輸出的內容包含你本身定製的樣式。例如這樣：

能夠看出%c應用的樣式是CSS的語法，因此基本上CSS支持的樣式語句均可以支持。固然，Chrome是有過濾一些CSS語法的，好比對元素定位的CSS語法就不支持（ps：貌似定位啥的也沒用，除非是想搗亂的程序員，呵呵）

彩色的輸出語句貌似看起來中看不中用，其實否則。大型的web開發項目，特別是多人分模塊開發的時候，控制檯一大堆console.log輸出，你一會兒找不到你本身的模塊的輸出語句。若是給你本身的模塊輸入語句應用了不一樣的顏色，相對來講比較好定位到輸出的地方，這是提升效率的一個小技巧。

console的其餘API

其餘的函數例如info,error,warn基本相似，只是在表明的意義和輸出的樣式有所區別。

除此以外，console還有一些比較少見但實用的api。

console.trace

console.trace跟log的區別在於trace會對輸出的對象進行展開。

console.group

console.group用於顯示一組的控制檯輸出，要搭配console.groupEnd來使用。

console.time

console.time用於顯示代碼執行的時間，要搭配console.timeEnd來使用。

其餘

其餘的console方法我將簡單列舉一下，就不一一詳細說明了，詳細能夠參考Google的開發文檔。

• console.assert() 用於判斷表達式，知足表達式時才輸出語句；
• console.debug() 用於輸出輸出debug的信息；
• console.dir() 用於展開輸出一個dom元素的JavaScript對象；
• console.profile() 用於記錄代碼消耗CPU的信息；
• console.timeStamp() 用於標記運行時的timeline信息；
• console.count() 用於記錄代碼執行的次數；
• console.memory 用於顯示此刻使用的內存信息（這是一個屬性而不是方法）；
• console.table() 用表格的形式來輸出信息；
• console.clear() 清空控制檯的內容（固然你能夠用快捷鍵ctrl+L）；

另外，再來優惠大派送，介紹幾個在Chrome控制檯上比較有趣的命令。

• $0 能夠在控制檯輸出在Elements面板選中的頁面元素；
• $_ 表示上一次在控制檯鍵入的命令，你也能夠用快捷鍵「上方向鍵」來達到一樣的效果；
• $x 能夠用xPath的語法來獲取頁面上的元素；

結語

Chrome的console語法確實很強大很方便，多點使用不一樣的方法能夠提升我們前端的開發效率。寫在最後的話：本文基本上是在參考了Google的DevTools文檔以後，結合本身的經驗來寫的，目的是把文檔中說到的一些特別的方法介紹給你們，若是想多點了解，能夠到Google的DevTools文檔看看。致謝！

參考文獻

https://developers.google.com/chrome-developer-tools/?hl=zh-cn