推薦幾個不錯的console調試技巧

在咱們的平常前端開發中，使用最頻繁的莫過於使用console.log在瀏覽器的控制檯中打印出咱們須要調試的信息，可是大部分人可能跟以前的我同樣，沒有意識到其實console除了log方法之外，還有不少實用的方法，這些方法可使咱們的調試過程更加容易，也表達得更加直觀，更加豐富多彩，下面咱們就來看看有哪些實用的方法吧！

一、console.log()

咱們常常會使用console.log來打印出某個變量的值或者某個實體對象，也能夠傳入多個變量參數，它會按照傳入順序進行打印：

1. 傳入一個變量
const a = 1;
console.log(a); // -> 1

2. 傳入一個對象
const foo = {a: 1};
console.log(foo); // -> {a: 1}

3. 傳入多個變量
console.log(a, foo); // -> 1 {a: 1} 
複製代碼

除此以外，它還支持格式化打印的功能，傳入特定的佔位符來對參數進行格式化處理，常見的佔位符有如下幾種：

1. %s：字符串佔位符
2. %d：整數佔位符
3. %f：浮點數佔位符
4. %o：對象佔位符(注意是字母o，不是數字0)
5. %c: CSS樣式佔位符

const string = 'Glory of Kings';
const number = 100;
const float = 9.5;
const obj = {name: 'daji'};

1、%s 字符串佔位符
console.log('I do like %s', string); // -> I do like Golry of Kings.

2、%d 整數佔位符
console.log('I won %d times', number); // -> I won 100 times.

3、%f 浮點數佔位符
console.log('My highest score is %f', float); // -> My highest score is 9.5

4、%o 對象佔位符
console.log('My favorite hero is %o', obj); // -> My favorite hero is {name: 'daji'}.

5、%c CSS樣式佔位符
console.log('I do like %c%s', 'padding: 2px 4px;background: orange;color: white;border-radius: 2px;', string);
複製代碼

其中CSS樣式佔位符效果以下：

二、console.warn()

你能夠徹底使用console.warn來代替console.log方法，但前提是該條打印信息是屬於警告級別而不是普通訊息級別，所以瀏覽器遇到一條警告級別的信息會區別對待，最明顯的是它的左側會有一個警告圖標，而且背景色和文字顏色也會不同。

相比於普通訊息，警告信息會出如今上圖左側的 warning面板中，而不是 info面板中，這樣也有助於咱們在一堆打印信息中快速篩選出警告信息，方便查看。

三、console.dir()

在大多數狀況下，console.dir方法的做用和console.log做用類似，可是有一點細微的差異。

在上圖中，咱們能夠看到， console.log方法會將打印結果的詳細信息顯示完整，可是 console.dir方法只會打印出對象，不會展開詳細信息，固然點擊以後看到的信息和前者同樣。 惟一差別比較大的地方是當咱們打印HTML文檔中的節點時，會有徹底不同的表現形式。例如咱們使用 console.log來打印 body標籤：

咱們會方便地看到DOM結構，而且鼠標移上去可以幫咱們自動定位到對應的DOM節點。可是在某些狀況下，其實這並非你想要看到的效果，或許你想看到的是該DOM節點下的全部屬性信息，那麼你能夠嘗試使用 console.dir方法來試試：

四、console.table()

在咱們的項目開發中常常會遇到對象數組形式的列表數據，在調試過程當中咱們可能會使用console.log方法打印出這些數據來進行查看，但比起前者，還可使用一種比較可視化的方式來進行打印。例如，這裏準備一些列表數據：

const response = [
  {
      id: 1,
      name: 'Marry',
      age: 18,
      sex: 0
  },
  {
     id: 2,
     name: 'John',
     age: 20,
     sex: 1
  }
];
複製代碼

而後咱們使用console.log來進行打印：

能夠看出，咱們打印出的結果並不夠直接，沒有給人一種一目瞭然的效果，接着換着使用 console.table來打印：

能夠看到，咱們的列表數據被清晰完整地展示在了表格當中，同時 console.table提供第二個可選參數用於篩選表格須要顯示的列，默認爲所有列都顯示。

上圖咱們經過添加第二個參數，數組中爲須要在表格中顯示的字段名，這樣就很方便地在結果數據中過濾掉咱們不須要關心的信息。

五、console.assert()

assert即斷言，該方法接收多個參數，其中第一個參數爲輸入的表達式，只有在該表達式的值爲false時，纔會將剩餘的參數輸出到控制檯中。

上圖中的第二行由於 arr.length > 5值爲 false，所以打印出後面的信息。若是在某些場景下你須要評估當前的數據是否知足某個條件，那麼不妨使用 console.assert()方法來在控制檯中查看斷言信息。

六、console.trace()

該方法用於在控制檯中顯示當前代碼在堆棧中的調用路徑，經過這個調用路徑咱們能夠很容易地在發生錯誤時找到原始錯誤點，示例以下：

function foo(data) {
  if (data === null) {
    console.trace();
    return [];
  }
  return [data.a, data.b];
}

function bar1(data) {
  return foo(data);
}

function bar2(data) {
  return foo(data);
}

bar1({a: 1, b: 2}); // -> [1, 2]
bar2(null); // -> []
複製代碼

在上面代碼中，咱們分別在bar1和bar2函數中調用foo函數並傳入不一樣的參數，很顯然bar2函數在執行時會進入if語句並執行console.trace()方法，如下是控制檯中打印結果：

能夠看到自下而上的一條調用路徑，並能夠快速斷定是在 bar2函數中傳入了不合適的參數 null而致使出錯，方便咱們跟蹤發生錯誤的原始位置。

七、console.count()

該方法至關於一個計數器，用於記錄調用次數，並將記錄結果打印到控制檯中。其接收一個可選參數console.count(label)，label表示指定標籤，該標籤會在調用次數以前顯示，示例以下：

for (let i = 1;i <= 5;i++) {
    if (!(i % 2)) {
        console.count('even');
    } else {
        console.count('odd');
    }
}
複製代碼

代碼中若是i是偶數，則會對even計數器進行計數，不然對odd計數器進行計數，執行後咱們會在控制檯中看到以下列表：

odd: 1
even: 1
odd: 2
even: 2
odd: 3
複製代碼

八、console.time() & console.timeEnd()

這兩個方法通常配合使用，是JavaScript中用於跟蹤程序執行時間的專用函數，console.time方法是做爲計算的起始時間，console.timeEnd是做爲計算的結束時間，並將執行時長顯示在控制檯。若是一個頁面有多個地方須要使用到計算器，則能夠爲方法傳入一個可選參數label來指定標籤，該標籤會在執行時間以前顯示。在以往咱們計算程序的執行時間時，咱們通常會採用以下方式：

const startTime = performance.now();
let sum = 0;
for(let i = 0;i < 100000;i++) {
    sum += i;
}
const diffTime = performance.now() - startTime;
console.log(`Execution time: ${ diffTime }`);
複製代碼

這是一種比較傳統的作法，咱們還可使用console.time來實現：

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

控制檯效果以下：

相比於第一種實現方式，咱們沒有設置任何臨時變量而且沒有作任何計算。

九、console.group() & console.groupEnd()

顧名思義，對數據信息進行分組，其中console.group()方法用於設置分組信息的起始位置，該位置以後的全部信息將寫入分組，console.groupEnd()方法用於結束當前的分組，示例以下：

class MyClass {
  constructor() {
    console.group('Constructor');
    console.log('Constructor executed');
    this.init();
    console.groupEnd();
  }

  init() {
    console.group('init');
    console.log('init executed');
    console.groupEnd();
  }
}
const myClass = new MyClass();
複製代碼

控制檯效果以下：

該方法的做用主要是讓咱們在控制檯打印的日誌更加清晰可讀。

十、瀏覽器轉爲編輯器

在大部分狀況下，咱們在瀏覽器中調試DOM結構或者編輯一些文本時，會在Chrome Developer Tools的Elements選項中對DOM節點進行編輯，可是一旦節點過多，會很容易增長調試過程的困難，這裏咱們可使用一種方式來將瀏覽器直接轉換爲編輯器模式：

document.body.contentEditable = true;
複製代碼

在控制檯中輸入以上代碼後，能夠將瀏覽器中的全部內容變爲可編輯狀態，效果圖以下：

十一、Chrome Command Line API

Google的Chrome Command Line API包含了一個用於執行如下常見任務的便捷函數集合：選擇和檢查DOM元素，以可讀格式顯示數據，中止和啓動分析器，以及監控DOM事件。

注意：此API只能經過瀏覽器控制檯獲取，沒法經過網頁腳原本進行訪問。

11.1 選擇DOM元素

當咱們使用jQuery的時候，咱們能夠經過各類選擇器例如$('#id')和$('.class')來選擇匹配的DOM元素，可是若是咱們沒有引入jQuery時，咱們仍然能夠在Chrome的控制檯中進行一樣的操做。Chrome Command Line API提供瞭如下幾種選擇DOM元素的方式：

• $(selector)：返回匹配指定CSS選擇器的DOM元素的第一個引用，至關於document.querySelector()函數。
• $$(selector)：返回匹配指定CSS選擇器的DOM元素數組，至關於document.querySelectorAll()函數。
• $x(path)：返回一個與給定XPath表達式匹配的DOM元素數組。

  

$x('//p[a]')表示返回包含<a>元素的全部<p>元素。

11.2 檢索最後一個結果的值

在控制檯中咱們常常會進行一些計算，某些狀況下你可能須要跟蹤你以前的計算結果來用於後面的計算，使用$_標記可用於返回最近評估的表達式的值，示例以下：

1 + 2 + 3 + 4 // -> 10

$_ // -> 10

$_ * $_ // -> 100

Math.sqrt($_) // -> 10

$_ // -> 10
複製代碼

11.3 查找與指定DOM元素關聯的事件

當咱們須要查找DOM中與某個元素關聯的全部事件時，控制檯提供了getEventListeners方法來幫助咱們找到這些關聯的事件。
getEventListeners($('selector'))返回在指定DOM元素上註冊的事件監聽器。返回值是一個對象，對象的key爲對應的事件類型(例如click，focus)，對象的value爲一個數組，其包含了對應事件類型下的全部事件監聽器。例如，下面列出了在document上註冊的全部事件監聽器：

若是咱們須要找到某個特定的事件監聽器，能夠經過以下方式進行訪問：

// eventName表示對應的事件類型
// index表示該事件類型下的事件監聽器數組的索引
getEventListeners($('selector')).eventName[index].listener

// 例如獲取document下click事件監聽器數組的第一項
getEventListeners(document).click[0].listener
複製代碼

11.4 監控事件

若是你但願在執行綁定到DOM中特定元素的事件時監視它們，控制檯提供了monitorEvents方法來幫助你使用不一樣的命令來監控其中的一些或者全部事件：

• monitorEvents($('selector'))：將監視與選擇器匹配的元素關聯的全部事件，當這些事件被觸發時會將它們打印到控制檯。例如monitorEvents($('#content'))將監視id爲content的元素關聯的全部事件。
• monitorEvents($('selector'), 'eventName')：將監視選擇器匹配的元素的某個特定的事件。 例如，monitorEvents($('#content'), 'click')將監視id爲content的元素關聯的click事件。
• monitorEvents($('selector'), [eventName1, eventName2, ...])：將監視選擇器匹配的元素的某些特定的事件。與上述不一樣的是，第二項能夠傳入一個字符串數組，包含全部須要監聽的事件類型名稱，以此達到自定義監聽的目的。例如monitorEvents($('#content'), ['click', 'focus'])將監視id爲content的元素關聯的click和focus事件。
• unmonitorEvents($('selector'))：將中止監視選擇器匹配的元素關聯的全部事件。例如unmonitorEvents($('#content'))將中止監視id爲content的元素關聯的全部事件。

效果圖以下：

11.5 檢查DOM元素

控制檯提供了inspect()方法讓咱們能夠直接從控制檯中檢查一個DOM元素。

• inspect($('selector'))：將檢查與選擇器匹配的元素，而且會自動跳轉到Chrome Developer Tools的Elements選項卡中。例如inspect($('#content'))將檢查id爲content的元素。

效果圖以下：

交流

這篇主要是分享了幾個筆者以爲不錯的console調試技巧，但願在你的前端代碼調試過程當中能對你有所幫助，以爲文章不錯的話，歡迎關注筆者的公衆號，每週都會原創和整理一些前端技術乾貨，但願和你們一塊兒互相交流學習，共同進步。

文章已同步更新至Github博客，若覺文章尚可，歡迎前往star！

你的一個點贊，值得讓我付出更多的努力！

逆境中成長，只有不斷地學習，才能成爲更好的本身，與君共勉！