Chrome DevTools — Console

前端開發人員離不開Chrome開發者工具，它又這麼好用，很差好學習掌握一下它的使用，實在有點明珠暗投啊，本篇先來說述Console有關的使用。

Overview

打開Console

開發者工具裏面，咱們日常使用的大都是這種面板形式，暫且稱之爲「主面板」：

還有一種顯示形式，就像一個抽屜（官方文檔稱之爲「drawer」）同樣存在於主面板之上，能夠上下拖動，靠在主面板的底部，本文稱之爲「副面板」：

console面板有這兩種顯示形式，平時測試一些js代碼時可能都會選用主面板，由於主面板空間大，視野清晰，查看代碼方便。可是也有用到副面板的時候，好比在Sources面板調試代碼時，可能會在console面板用js去改變一些值或者獲取某些值等，這個時候若是來回切換Sources和Console面板就有點太不方便了。在Sources主面板下，能夠調出console副面板，不用來回切換，顯然方便不少。

打開主面板的方法

• Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)

• 若是DevTools已經打開，直接切換到Console面板

當console主面板打開的時候，console副面板會自動收起

打開副面板的方法

• 當DevTools處於焦點狀態，按Esc鍵

• 點擊「Customize and control DevTools」按鈕，而後點擊「Show console drawer」

Console記錄

清空console面板記錄

• 快捷鍵 Ctrl + L

• 在console面板中右鍵，選擇「Clear console」

• 在console面板輸入clear()或者console.clear()，console.clear()也能夠寫在咱們的js代碼裏面，當運行到這一句代碼時，會自動清空console面板

• 點擊「清空console」按鈕
  

保持console記錄顯示

在頁面刷新的時候，console記錄也會被刷新，若是想保持着先前的console記錄，能夠把「Preserve log」的複選框選上

保存console記錄

若是有保存某一段console記錄的必要性，也能夠在console面板中右鍵另存爲一份.log文件。

選擇console面板的執行上下文

當咱們在console裏面執行js代碼時，默認的執行上下文是top窗口：

當頁面內有嵌入的iframe時，要想調試iframe裏面的相關代碼，須要把執行上下文切換到此iframe（下拉框選擇）：

當執行上下文不是top窗口時，下拉框這個位置會用一個背景色高亮以示區分（如上圖）。
當審查元素的範圍是某個iframe時，此處的執行上下文會自動切換到該iframe。

過濾console輸出

默認狀況下，console面板是展現全部類型的輸出，可是咱們能夠對展現的內容作進一步的關鍵字篩選、類型篩選等。

console設置

此外還有一些針對console面板的設置，好比某些開發人員習慣在console面板裏面查看網絡請求，就選中了「Log XMLHttpRequests」選項：

Console API

Console API有不少，可是有些多是這一生也不會用到的，因此也不必面面俱到。本文介紹如下經常使用到的Console API：

console.log(object [, object, ...])
console.info(object [, object, ...])
console.warn(object [, object, ...])
console.error(object [, object, ...])

直接在控制檯輸出信息，console.log表示通常的輸出，console.info表示提示性信息，console.warn表示警告信息，console.error表示錯誤信息。當有多個參數時，輸出結果以一個空格分隔開：

傳遞給上述API的第一個參數能夠包含一個或多個格式符。格式符由一個%加一個字母表示，字母表示這個格式符所對應的值的類型：

參考兩個demo：

console.table()

當輸出一些json數據時，可使用console.table格式化輸出，第一個參數是要輸出的對象，第二個可選的參數是篩選出你想要的值的key，結果一目瞭然：

console.group(object[, object, ...]) / console.groupCollapsed(object[, object, ...])
console.groupEnd()
當輸出日誌較多時，不便於查找，此時用console.group相關API，則能夠進行很好的分類：

日誌分組時，默認是展開狀態，若想默認是收起狀態，則把console.group改爲console.groupCollapsed便可。

console.time(label)
console.timeEnd(label)
有時候咱們想測試某段代碼執行了多長時間，曾經我很傻叉地在代碼開頭寫了個new Date()，在代碼結尾寫了個new Date()，而後相減取得時間差……其實，console.time已經很友好地爲咱們作了這件事：

console.count(label)

某些場景下可能想要統計一下某行或某段代碼被執行的次數，咱們能夠在相應的位置加上console.count語句。當代碼執行到console.count(label)時，label的值不變，則相應的統計次數就會加1：

Console API就介紹這麼多，若想多瞭解一些其餘的API，能夠去查看官網 Console API Reference。

Command Line API

在控制檯中，除了能夠輸入一些Console API，還能夠輸入一些命令行來查看、調試代碼等。

$_

$_返回最近一次計算表達式的值：

$0 - $4

經常使用來表示最近5次審查元素所選中的節點的引用，\$0表示最近一次節點的引用，$1其次，以此類推。

$(selector) / $$(selector)

$(selector)就是document.querySelector(selector)，$$(selector)就是document.querySelectorAll(selector)

若是當前頁面引用的有第三方庫，這個庫使用的也是$符號，如jQuery，則此時的$(selector)會被第三方庫的相應函數覆蓋。

inspect(object/function)

這個也比較經常使用一點：假如當前頁面內容不少，審查元素不方便，可是我知道我要查看的那個元素的class或id，則咱們能夠先用$(selector)或$$(selector)選中這個節點，而後inspect($_)即自動打開Elements面板，定位到此DOM節點。這個函數也能夠定位js中的函數，此時會自動打開Sources面板，而後定位到相應的函數。

還有不少與js相關的命令行，可是調試js通常都在Sources面板中調試，調試方法也會在後面的文章中進行詳細介紹，因此，命令行就介紹到這裏，想多瞭解一些其餘命令行，能夠去查看官網 Command Line API Reference。

---

關於Console就介紹這麼多，下一篇介紹Elements。