從入門到發現新大陸
自學js的問題就是隻會用alert()除錯。
在那個前後端混合，前端還在JQuery時代的時候，用alert並不會感覺有什麼不妥。
但是到了SPA型應用，尤其是有大量object型別需要檢視時問題就來了。
後來發現了console.log(),一直用了兩年也沒有再去探索過。
後來無意間又研究了一下console，除了console.log外，還發現了許多其它好用的命令。
console是一個瀏覽器實現的API，不是js提供的功能，所以不同的瀏覽器所帶的功能可能有細微差異。
幾個最常用的方法：
- console.table()可以將資料以表格的形式直觀的列印出來
- console.profile()可以分析效能
- console.time(name)、console.timeEnd()可記錄中間這段程式碼的執行時間
- console.trace()可以追蹤函式的呼叫和執行過程
- console.warn(object[, object...])可輸出警告資訊(黃顏色）
- console.error()輸出一條錯誤資訊，就像控制檯報錯那種效果（紅顏色）
Chrome71下console的所有方法
| 編號 | 名稱 | 說明 |
|---|---|---|
| 1 | log | 以原物件的形式列印出資料 |
| 2 | error | 以紅色文字輸出資料 |
| 3 | warn | 以黃色文字輸出資料 |
| 4 | info | 與log類似，以黑白色輸出資料 |
| 5 | table | 以表格形式輸出陣列物件 |
| 6 | assert | 接收兩個引數，若第一個引數返回為false時則輸出第二個引數 |
| 7 | clear | 清空控制檯的輸出 |
| 8 | context | - |
| 9 | count | 通常放在某個函式中，用於記錄該函式被呼叫了多少次 |
| 10 | countReset | 重置某個計數器或全部計數器為0，若傳入引數則重置這個計數器 |
| 11 | debug | 與log類似 |
| 12 | dir | 可以顯示一個物件的所有屬性和方法，在列印dom物件的時候替代log效果較好。 |
| 13 | dirxml | 顯示xml或html的所有後代樹結構 |
| 14 | group | 與groupCollapsed/groupEnd一起將大量輸出資訊進行分組 |
| 15 | groupCollapsed | 分組顯示資訊 |
| 16 | groupEnd | 結束分組顯示資訊 |
| 17 | memory | 是一個屬性，不是方法。可以檢視js引擎的記憶體使用情況 |
| 18 | profile | 與profileEnd結合進行效能分析，具體怎麼用我也還沒試過 |
| 19 | profileEnd | 結束效能分析 |
| 20 | time | 與timeEnd組合用於記錄time到timeEnd之間所花費的時間 |
| 21 | timeEnd | 結束計時 |
| 22 | timeLog | 用於在time與timeEnd之間輸出值 |
| 23 | timeStamp | - |
| 24 | trace | 顯示當前執行的程式碼在堆疊中的呼叫路徑 |
參考：
你真的瞭解 console 嗎segmentfault.com/a/119000000…