在js調試中，大部分的前端人員都是採用console.log()方法來列印出調試的數據，但是很多人都不知道console這個對象有很多很實在的方法，本文就來介紹一下這些方法的使用。 一、console.log() console.log()這個方法是前端人員最熟悉的了，幾乎我們每天都會使用，除了簡單 ...
在js調試中，大部分的前端人員都是採用console.log()方法來列印出調試的數據，但是很多人都不知道console這個對象有很多很實在的方法，本文就來介紹一下這些方法的使用。
一、console.log()
console.log()這個方法是前端人員最熟悉的了，幾乎我們每天都會使用，除了簡單的列印對象功能，那麼以下兩種使用方法你知道嗎？
1、多參數記錄
當我們要去比對兩個對象時，想讓這兩個對象整齊的在兩邊，這時console.log()就能幫上我們的忙。
2、格式化輸出
console.log(msg, values)；這種跟C#的string.Format()有點像，console.log()能支持字元串、整數、浮點數、object對象以及css樣式的格式化輸出。占位符及其描述如下表。
| 占位符 | 描述 |
|---|---|
| %s | 字元串 |
| %d/%i | 整數 |
| %f | 浮點數 |
| %o/%O | object對象 |
| %c | css樣式 |
接下來我們來做一下舉例：
①、字元串格式化為在占位符的地方原樣輸出我們的值：
②、整數與浮點數一致我們這裡就不過多舉例了：
③、對於object對象的格式化輸出就有比較大區別了，當為%o時輸出和不使用格式化輸出列印出來的結果一樣，當為%O時，可以看到對象的各個屬性，比如我們列印一個DOM節點，%o列印的是此節點及其子節點，%O列印的是是該dom節點各個對象屬性。
④、css樣式輸出，樣式會在%c後面都加上這個樣式
二、console.dir()
這個方法在大部分時候都跟console.log()一致，但是還是略有不同。
在查詢DOM結構時，更能體現出兩者的不同。console.log(element)列印的dom結構，而console.dir(element)列印的則是整個dom對象。
三、console.table()
令人意外的是，很多人都不知道有這個方法，其作用是當我們想對一個複雜的對象進行輸出時，使用console.log()往往是輸出一些不能一目瞭然的數據，此時console.table()就能幫我們把這個對象整理成一個列表，以便於我們很清晰的看到數據。
四、console.warn()
這個方法跟console.log()幾乎一致，唯一的區別就是瀏覽器會對其有不一樣的對待，會輸出一個警告。
五、console.assert()
assert函數是對輸入的值進行斷言，相信有寫過單元測試的讀者們都很熟悉了。當
六、console.count()
此方法是用來統計count被調用的次數。
七、console.trace()
調試JavaScript程式時，有時需要列印函數調用的棧信息，這可以通過使用console.trace()來實現，此方法一般用來顯示當前執行的代碼在堆棧中的調用路徑，可清洗的看到被調用的過程。
八、console.time()與console.timeEnd()
console.time() 方法是作為計算器的起始方法。該方法一般用於測試程式執行的時長。
console.timeEnd() 方法為計算器的結束方法，並將執行時長顯示在控制台。如果一個頁面有多個地方需要使用到計算器，可以添加標簽參數來設置。
九、console.group()與console.groupEnd()
console.group() 方法用於設置分組信息的起始位置，該位置之後的所有信息將寫入分組。
console.groupEnd() 方法用於結束分組標簽。
使用 console. groupCollapsed() 方法來設置摺疊的分組信息。
十、console.clear()
console.clear() 方法用於清除控制台所有信息。
console.clear() 方法在執行成功後，會在控制台輸出: "Console was cleared"。
總結
在js調試中，雖然console對象的有些方法我們也很少用到，但是我們不能單純只會一個console.log(),瞭解並學會使用其他方法，對我們在調試過程中起到了很關鍵的作用，使我們的效率能更高。關於此對象的所有用法，本文參考了菜鳥教程的部分文章,想深入學習的讀者可以繼續移步學習。
筆者水平有限，本文若有不對之處，請留言指正，不勝感激！
