Chrome自帶的開發者工具提供了強大的調試系統，除了可以用來查看DOM tree結構、CSS樣式調試、動畫調試和JS代碼斷點調試等。今天不聊別的，就聊聊使用console調試那些事兒。

在使用React、Vue等需要編譯語法的前端框架開發時，前端調試已經變得不那么容易，除了使用React Dev Tools，Vue Dev Tools和Redux Dev Tools等Chrome插件，就是一堆的 console.log() 來打印我們需要看到的變量，雖然也有用，但是比較單一，要調試復雜數據需要多次輸出比較才行。

如果你平時只是用console.log()來輸出一些變量的值，那你肯定還沒有用過console的強大的功能。下面帶你用console玩玩花式調試。

console主要函數

我們先在Chrome上看看console對象都有哪些屬性和函數（博主用的Chrome版本是： 版本 60.0.3112.90（正式版本） （64 位））。

看了才知道，除了log方法，console還有很多其他的方法。

下面，我們從一些來看下主要的調試函數及用法。

console.log(), console.error(), console.warn(), console.info()

最基本也是最常用的用法了，分別表示輸出普通信息、錯誤信息、警示信息和提示性信息，且error和warn方法有特定的圖標和顏色標識。

console.assert(expression, message)

參數：

expression: 條件語句，語句會被解析成 Boolean，且為 false 的時候會觸發message語句輸出

message: 輸出語句，可以是任意類型

該函數會在 expression 為 false 的時候，在控制臺輸出一段語句，輸出的內容就是傳入的第二個參數 message 的內容。當我們在只需要在特定的情況下才輸出語句的時候，可以使用 console.assert。

示例如下：

function greaterThan(a,b) { console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});}greaterThan(5,6);

console.count(label)

參數：

label: 計算數量的標識符

該函數用于計算并輸出特定標識符為參數的console.count函數被調用的次數。下面的例子更能直觀的了解：

function login(name) { console.count(name + ' logged in');}

console.dir(object)

參數：

object：被輸出扎實的對象

該函數用于打印出對象的詳細的屬性、函數及表達式等信息。如果該對象已經被記錄為一個HTML元素，則該HTML元素的DOM表達式的屬性會被像下面這樣打印出來：

console.dir(document.body);

console.dirxml(object)

該函數將打印輸出XML元素及其子孫后代元素，且對HTML和XML元素調用 console.dirxml() 和 調用 console.log() 是等價的。

console.group([label]), console.groupEnd([label])

參數：

label: group分組的標識符

在控制臺創建一個新的分組，隨后輸出到控制臺上的內容都會自動添加一個縮進，表示該內容屬于當前分組，知道調用 console.groupEnd() 之后，當前分組結束。

舉個例子：

console.log("This is the outer level");console.group();console.log("Level 2");console.group();console.log("Level 3");console.warn("More of level 3");console.groupEnd();console.log("Back to level 2");console.groupEnd();console.log("Back to the outer level");

console.groupCollapsed(label)

該函數同console.group()，唯一的區別是該函數的輸出默認不展開分組，而console.group()是默認展開分組。

console.time([label]), console.timeEnd([label])

label: 用于標記計時器的名稱，不填的話，默認為 default

console.time() 會開始一個計時器，并當執行到 console.timeEnd() 函數時（需要兩個函數的lable參數相同），結束計時器，并將計時器的總時間輸出到控制臺上。

再舉幾個例子：

console.time();var arr = new Array(10000);for (var i = 0; i < arr.length; i++) { arr[i] = new Object();}console.timeEnd();// default: 3.696044921875ms

對 console.time(label) 設置一個自定義的 label 字段，并使用console.timeEnd(label) 設置相同的 label 字段來結束計時器。

console.time('total');var arr = new Array(10000);for (var i = 0; i < arr.length; i++) { arr[i] = new Object();}console.timeEnd('total');// total: 3.696044921875ms

設置多個 label 屬性，開啟多個計時器同步計時。

console.time('total');console.time('init arr');var arr = new Array(10000);console.timeEnd('init arr');for (var i = 0; i < arr.length; i++) { arr[i] = new Object();}console.timeEnd('total');// init arr: 0.0546875ms// total: 2.5419921875ms

console.trace(object)

該函數將在控制臺打印出從 console.trace() 被調用的位置開始的堆棧信息。

本文只是單獨講解了Chrome自帶的開發者工具（Chrome Dev Tools）的控制臺功能與用法，下面這篇文章講解了Chrome自帶的開發者工具（Chrome Dev Tools）的其它功能與用戶有興趣的可以看看

Chrome開發者工具9個調試技巧詳解：//www.companysz.com/article/147438.htm