console 調試技巧

前言

若是統計一番前端最經常使用的方法，那麼 console.log 必定位列其中。不管你寫的是原生 JS 亦或者是 JQuery、Vue等等，調試之時，都離不開 console.log 方法。可是，console 對象中的方法不只僅只有 log 方法。強大的 console 對象提供了大量控制檯調試的相關方法，掌握這些方法能夠大大方便你的調試，甚至作出一些炫酷的控制檯字符畫。

基本輸出

console 對象最基礎的方法毫無疑問是 log，該方法會直接在控制檯上輸出參數，若是輸入多個參數，那麼輸出在控制檯上的參數用空格分隔，以下所示：

console.log('Hello World');
console.log('Hello', 'World');

打開控制檯，運行結果以下圖所示：

console.log 還含有相似於 Python 的佔位符功能，可是，我的認爲該功能能夠徹底被 ES6 中的字符串模板徹底替代，有興趣的能夠去了解，在此再也不贅述。

分類輸出

厭倦了 console.log 單調的輸出？歡迎嘗試 console 對象的分類輸出功能。console 對象提供了 info、warn、error 方法分別輸出提示、警告以及錯誤信息。

咱們輸入下面這段代碼：

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

結果以下圖所示：

能夠發現，warn 和 error 方法分別輸出了一條警告和一條錯誤信息。可是，爲何 log 方法和 info 方法輸出是同樣的呢？

緣由在於，我使用的是 Chrome 瀏覽器，在 Chrome 瀏覽器上，log 方法和 info 方法的表現是同樣的。可是，在其餘瀏覽器上，好比 FireFox，info 方法前面會有一個信息圖標。

因爲 info 方法的效果不明顯，而且各個瀏覽器中效果有差別，因此通常狀況下，咱們使用 log 方法代替 info 方法。

斷言輸出

console 對象提供了相似於單元測試中的斷言的方法：assert。該方法接收兩個參數，第一個參數爲斷言條件，第二個參數表明斷言信息。

同單元測試斷言同樣，當斷言條件爲 true 時，assert 無輸出；只有當斷言條件爲 false 時，assert 方法纔會在控制檯中輸出一條斷言錯誤信息。

咱們輸入如下代碼：

console.assert(true, 'true')
console.assert(false, 'false')

控制檯以下所示：

能夠發現，控制檯只輸出了那一條斷言條件爲 false 的語句。

分組輸出

當你的控制檯上輸出了大量信息時，控制檯會顯得極其雜亂，你甚至不知道某一條信息是哪條代碼輸出的。此時，console 對象的 group 以及 groupEnd 方法能夠拯救你。

將部分 console 語句放入 group 與 groupEnd 之間，能夠造成將這部分 console 語句劃定爲一組信息進行輸出。其中，group 方法接收一個字符，做爲分組名稱，groupEnd 方法不接收參數用於結束分組。

輸入如下代碼：

console.group('1')
console.log('1-1')
console.warn('1-2')
console.error('1-3')
console.groupEnd()

console.group('2')
console.log('2-1')
console.warn('2-2')
console.error('2-3')
console.groupEnd()

結果如圖所示：

經過點擊分組的箭頭，能夠摺疊分組，方便概括整理控制檯信息，避免控制檯被海量信息淹沒。

表格輸出

咱們不只能夠將控制檯信息分組輸出，咱們還能夠將其以表格的形式輸出。

console 的 table 方法能夠將一個對象以表格的形式輸出，當輸入的參數不是對象時，此時，table 方法至關於 log 方法。

輸入如下代碼：

const obj = {
    a: {
        id: 1,
        value: 1
    },
    b: {
        id: 2,
        value: 2
    }
};

console.log(obj)

console.table(obj)

控制檯如圖所示：

控制檯不只以表格形式輸出了對象，還以基礎輸出的方式輸出了對象以方便查看信息。

計次輸出

在平常開發中，有一個常見的調試需求——計算一段代碼的執行次數。通常來講，咱們會在這段代碼中定義一個變量，每執行一次它就進行一次自增，並經過 console.log 方法輸出該變量。

能夠看出，上述的方法略顯麻煩，可不能夠一行代碼就解決這個問題呢？固然能夠！count 方法，你值得擁有。

for(let i = 0; i < 5; i++){
    console.count("num");
}
console.count("num");
console.count("anotherNum")

結果以下圖所示：

能夠發現，count 方法經過輸入的字符串區分不一樣的計數語句。

計時輸出

當測試算法性能時，咱們一般使用時間複雜度來評價算法的性能，可是，時間複雜度哪裏有代碼執行時間來的直觀呢？

在以前不瞭解 console 對象的時候，咱們在算法的頭尾分別獲取時間戳，取時間戳的差值做爲代碼執行時間。很明顯，這種方法太過繁瑣。

使用 console 對象的 time 以及 timeEnd 方法能夠計算出代碼執行時間。

console.time('time');
let sum = 0;
for (let i = 0; i < 100000;i++) {
    sum += i;
}
console.timeEnd('time');

結果以下圖所示：

最後

除了上述的方法，cnosole 方法還有不少強大的方法，好比：dir、debug、trace等，可是它們有的在 Chrome 效果不佳，有的能被 Chrome debugger 完美替代，因此，在此再也不贅述。若是有興趣，能夠進一步瞭解。