在我們的日常前端開發中，使用最頻繁的莫過於使用console.log在瀏覽器的控制檯中列印出我們需要除錯的資訊，但是大部分人可能跟之前的我一樣，沒有意識到其實console除了log方法以外，還有很多實用的方法，這些方法可以使我們的除錯過程更加容易，也表達得更加直觀，更加豐富多彩，下面我們就來看看有哪些實用的方法吧！
1、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}
複製程式碼除此之外，它還支援格式化列印的功能，傳入特定的佔位符來對引數進行格式化處理，常見的佔位符有以下幾種：
%s：字串佔位符%d：整數佔位符%f：浮點數佔位符%o：物件佔位符(注意是字母o，不是數字0)%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樣式佔位符效果如下：
2、console.warn()
你可以完全使用console.warn來代替console.log方法，但前提是該條列印資訊是屬於警告級別而不是普通訊息級別，因此瀏覽器遇到一條警告級別的資訊會區別對待，最明顯的是它的左側會有一個警告圖示，並且背景色和文字顏色也會不一樣。
warning皮膚中，而不是info皮膚中，這樣也有助於我們在一堆列印資訊中快速篩選出警告資訊，方便檢視。
3、console.dir()
在大多數情況下，console.dir方法的作用和console.log作用相似，但是有一點細微的差別。
console.log方法會將列印結果的詳細資訊顯示完整，但是console.dir方法只會列印出物件，不會展開詳細資訊，當然點選之後看到的資訊和前者一樣。
唯一差異比較大的地方是當我們列印HTML文件中的節點時，會有完全不一樣的表現形式。例如我們使用console.log來列印body標籤：
console.dir方法來試試：
4、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提供第二個可選引數用於篩選表格需要顯示的列，預設為全部列都顯示。
5、console.assert()
assert即斷言，該方法接收多個引數，其中第一個引數為輸入的表示式，只有在該表示式的值為false時，才會將剩餘的引數輸出到控制檯中。
arr.length > 5值為false，因此列印出後面的資訊。如果在某些場景下你需要評估當前的資料是否滿足某個條件，那麼不妨使用console.assert()方法來在控制檯中檢視斷言資訊。
6、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而導致出錯，方便我們跟蹤發生錯誤的原始位置。
7、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
複製程式碼8、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');
複製程式碼控制檯效果如下：
9、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();
複製程式碼控制檯效果如下：
10、瀏覽器轉為編輯器
在大部分情況下，我們在瀏覽器中除錯DOM結構或者編輯一些文字時，會在Chrome Developer Tools的Elements選項中對DOM節點進行編輯，但是一旦節點過多，會很容易增加除錯過程的困難，這裡我們可以使用一種方式來將瀏覽器直接轉換為編輯器模式：
document.body.contentEditable = true;
複製程式碼在控制檯中輸入以上程式碼後，可以將瀏覽器中的所有內容變為可編輯狀態，效果圖如下：
11、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！
你的一個點贊，值得讓我付出更多的努力！
逆境中成長，只有不斷地學習，才能成為更好的自己，與君共勉！
