推薦幾個(gè)不錯(cuò)的console調(diào)試技巧［轉(zhuǎn)載］

作者：小維FE
鏈接：https://juejin.im/post/5ddd373cf265da05d7582ce8
來源：掘金
著作權(quán)歸作者所有蚤假。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)棘劣，非商業(yè)轉(zhuǎn)載請注明出處挤茄。

在我們的日常前端開發(fā)中，使用最頻繁的莫過于使用console.log在瀏覽器的控制臺中打印出我們需要調(diào)試的信息，但是大部分人可能跟之前的我一樣，沒有意識到其實(shí)console除了log方法以外枪萄，還有很多實(shí)用的方法，這些方法可以使我們的調(diào)試過程更加容易猫妙，也表達(dá)得更加直觀瓷翻，更加豐富多彩，下面我們就來看看有哪些實(shí)用的方法吧割坠！

1齐帚、console.log()

我們經(jīng)常會使用console.log來打印出某個(gè)變量的值或者某個(gè)實(shí)體對象，也可以傳入多個(gè)變量參數(shù)彼哼，它會按照傳入順序進(jìn)行打佣酝：

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

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

3. 傳入多個(gè)變量
console.log(a, foo); // -> 1 {a: 1} 
復(fù)制代碼

除此之外，它還支持格式化打印的功能沪羔，傳入特定的占位符來對參數(shù)進(jìn)行格式化處理饥伊，常見的占位符有以下幾種：

%s：字符串占位符
%d：整數(shù)占位符
%f：浮點(diǎn)數(shù)占位符
%o：對象占位符(注意是字母o，不是數(shù)字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 整數(shù)占位符
console.log('I won %d times', number); // -> I won 100 times.

3、%f 浮點(diǎn)數(shù)占位符
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);
復(fù)制代碼

其中CSS樣式占位符效果如下：

image.png

2、console.warn()

你可以完全使用console.warn來代替console.log方法杖剪，但前提是該條打印信息是屬于警告級別而不是普通信息級別冻押，因此瀏覽器遇到一條警告級別的信息會區(qū)別對待，最明顯的是它的左側(cè)會有一個(gè)警告圖標(biāo)盛嘿，并且背景色和文字顏色也會不一樣洛巢。

相比于普通信息，警告信息會出現(xiàn)在上圖左側(cè)的warning面板中次兆，而不是info面板中稿茉，這樣也有助于我們在一堆打印信息中快速篩選出警告信息，方便查看芥炭。

3漓库、console.dir()

在大多數(shù)情況下，console.dir方法的作用和console.log作用相似园蝠，但是有一點(diǎn)細(xì)微的差別渺蒿。

在上圖中，我們可以看到彪薛，console.log方法會將打印結(jié)果的詳細(xì)信息顯示完整茂装，但是console.dir方法只會打印出對象，不會展開詳細(xì)信息陪汽，當(dāng)然點(diǎn)擊之后看到的信息和前者一樣训唱。唯一差異比較大的地方是當(dāng)我們打印HTML文檔中的節(jié)點(diǎn)時(shí)，會有完全不一樣的表現(xiàn)形式挚冤。例如我們使用console.log來打印body標(biāo)簽：

我們會方便地看到DOM結(jié)構(gòu)况增，并且鼠標(biāo)移上去能夠幫我們自動(dòng)定位到對應(yīng)的DOM節(jié)點(diǎn)。但是在某些情況下训挡，其實(shí)這并不是你想要看到的效果澳骤，或許你想看到的是該DOM節(jié)點(diǎn)下的所有屬性信息，那么你可以嘗試使用console.dir方法來試試：

4澜薄、console.table()

在我們的項(xiàng)目開發(fā)中經(jīng)常會遇到對象數(shù)組形式的列表數(shù)據(jù)为肮，在調(diào)試過程中我們可能會使用console.log方法打印出這些數(shù)據(jù)來進(jìn)行查看，但比起前者肤京，還可以使用一種比較可視化的方式來進(jìn)行打印颊艳。例如茅特，這里準(zhǔn)備一些列表數(shù)據(jù)：

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

然后我們使用console.log來進(jìn)行打印：

可以看出棋枕，我們打印出的結(jié)果并不夠直接白修，沒有給人一種一目了然的效果，接著換著使用console.table來打又匕摺：

可以看到兵睛，我們的列表數(shù)據(jù)被清晰完整地展現(xiàn)在了表格當(dāng)中，同時(shí)console.table提供第二個(gè)可選參數(shù)用于篩選表格需要顯示的列窥浪，默認(rèn)為全部列都顯示祖很。

上圖我們通過添加第二個(gè)參數(shù)，數(shù)組中為需要在表格中顯示的字段名漾脂，這樣就很方便地在結(jié)果數(shù)據(jù)中過濾掉我們不需要關(guān)心的信息假颇。

5、console.assert()

assert即斷言骨稿，該方法接收多個(gè)參數(shù)拆融，其中第一個(gè)參數(shù)為輸入的表達(dá)式，只有在該表達(dá)式的值為false時(shí)啊终，才會將剩余的參數(shù)輸出到控制臺中镜豹。

上圖中的第二行因?yàn)?code>arr.length > 5值為false，因此打印出后面的信息蓝牲。如果在某些場景下你需要評估當(dāng)前的數(shù)據(jù)是否滿足某個(gè)條件趟脂，那么不妨使用console.assert()方法來在控制臺中查看斷言信息。

6例衍、console.trace()

該方法用于在控制臺中顯示當(dāng)前代碼在堆棧中的調(diào)用路徑昔期，通過這個(gè)調(diào)用路徑我們可以很容易地在發(fā)生錯(cuò)誤時(shí)找到原始錯(cuò)誤點(diǎn)，示例如下：

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函數(shù)中調(diào)用foo函數(shù)并傳入不同的參數(shù)硼一，很顯然bar2函數(shù)在執(zhí)行時(shí)會進(jìn)入if語句并執(zhí)行console.trace()方法，以下是控制臺中打印結(jié)果：

可以看到自下而上的一條調(diào)用路徑梦抢，并可以快速判定是在bar2函數(shù)中傳入了不合適的參數(shù)null而導(dǎo)致出錯(cuò)般贼，方便我們跟蹤發(fā)生錯(cuò)誤的原始位置。

7奥吩、console.count()

該方法相當(dāng)于一個(gè)計(jì)數(shù)器哼蛆，用于記錄調(diào)用次數(shù)，并將記錄結(jié)果打印到控制臺中霞赫。其接收一個(gè)可選參數(shù)console.count(label)腮介，label表示指定標(biāo)簽，該標(biāo)簽會在調(diào)用次數(shù)之前顯示端衰，示例如下：

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

代碼中如果i是偶數(shù)叠洗，則會對even計(jì)數(shù)器進(jìn)行計(jì)數(shù)甘改，否則對odd計(jì)數(shù)器進(jìn)行計(jì)數(shù)，執(zhí)行后我們會在控制臺中看到如下列表：

odd: 1
even: 1
odd: 2
even: 2
odd: 3

8灭抑、console.time() & console.timeEnd()

這兩個(gè)方法一般配合使用楼誓，是JavaScript中用于跟蹤程序執(zhí)行時(shí)間的專用函數(shù)，console.time方法是作為計(jì)算的起始時(shí)間名挥，console.timeEnd是作為計(jì)算的結(jié)束時(shí)間，并將執(zhí)行時(shí)長顯示在控制臺主守。如果一個(gè)頁面有多個(gè)地方需要使用到計(jì)算器禀倔，則可以為方法傳入一個(gè)可選參數(shù)label來指定標(biāo)簽，該標(biāo)簽會在執(zhí)行時(shí)間之前顯示参淫。在以往我們計(jì)算程序的執(zhí)行時(shí)間時(shí)救湖，我們一般會采用如下方式：

const startTime = new Date());
let sum = 0;
for(let i = 0;i < 100000;i++) {
    sum += i;
}
const diffTime = new Date() - startTime;
console.log(`Execution time: ${ diffTime }`);

這是一種比較傳統(tǒng)的做法，我們還可以使用console.time來實(shí)現(xiàn)：

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

控制臺效果如下：

相比于第一種實(shí)現(xiàn)方式涎才，我們沒有設(shè)置任何臨時(shí)變量并且沒有做任何計(jì)算鞋既。

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

顧名思義耍铜，對數(shù)據(jù)信息進(jìn)行分組邑闺，其中console.group()方法用于設(shè)置分組信息的起始位置，該位置之后的所有信息將寫入分組棕兼，console.groupEnd()方法用于結(jié)束當(dāng)前的分組陡舅，示例如下：

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();
復(fù)制代碼

控制臺效果如下：

該方法的作用主要是讓我們在控制臺打印的日志更加清晰可讀。

10伴挚、瀏覽器轉(zhuǎn)為編輯器

在大部分情況下靶衍，我們在瀏覽器中調(diào)試DOM結(jié)構(gòu)或者編輯一些文本時(shí)，會在Chrome Developer Tools的Elements選項(xiàng)中對DOM節(jié)點(diǎn)進(jìn)行編輯茎芋，但是一旦節(jié)點(diǎn)過多颅眶，會很容易增加調(diào)試過程的困難，這里我們可以使用一種方式來將瀏覽器直接轉(zhuǎn)換為編輯器模式：

document.body.contentEditable = true;

在控制臺中輸入以上代碼后田弥，可以將瀏覽器中的所有內(nèi)容變?yōu)榭删庉嫚顟B(tài)涛酗，效果圖如下：

11、Chrome Command Line API

Google的Chrome Command Line API包含了一個(gè)用于執(zhí)行以下常見任務(wù)的便捷函數(shù)集合：選擇和檢查DOM元素偷厦，以可讀格式顯示數(shù)據(jù)煤杀，停止和啟動(dòng)分析器，以及監(jiān)控DOM事件沪哺。

注意：此API只能通過瀏覽器控制臺獲取沈自，無法通過網(wǎng)頁腳本來進(jìn)行訪問。

11.1 選擇DOM元素

當(dāng)我們使用jQuery的時(shí)候辜妓，我們可以通過各種選擇器例如$('#id')和$('.class')來選擇匹配的DOM元素枯途，但是如果我們沒有引入jQuery時(shí)忌怎，我們?nèi)匀豢梢栽贑hrome的控制臺中進(jìn)行同樣的操作。Chrome Command Line API提供了以下幾種選擇DOM元素的方式：

$(selector)：返回匹配指定CSS選擇器的DOM元素的第一個(gè)引用酪夷，相當(dāng)于document.querySelector()函數(shù)榴啸。
$$(selector)：返回匹配指定CSS選擇器的DOM元素?cái)?shù)組，相當(dāng)于document.querySelectorAll()函數(shù)晚岭。
$x(path)：返回一個(gè)與給定XPath表達(dá)式匹配的DOM元素?cái)?shù)組鸥印。

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

11.2 檢索最后一個(gè)結(jié)果的值

在控制臺中我們經(jīng)常會進(jìn)行一些計(jì)算坦报，某些情況下你可能需要跟蹤你之前的計(jì)算結(jié)果來用于后面的計(jì)算库说，使用$_標(biāo)記可用于返回最近評估的表達(dá)式的值，示例如下：

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

$_ // -> 10

$_ * $_ // -> 100

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

$_ // -> 10
復(fù)制代碼

11.3 查找與指定DOM元素關(guān)聯(lián)的事件

當(dāng)我們需要查找DOM中與某個(gè)元素關(guān)聯(lián)的所有事件時(shí)片择，控制臺提供了getEventListeners方法來幫助我們找到這些關(guān)聯(lián)的事件潜的。
getEventListeners($('selector'))返回在指定DOM元素上注冊的事件監(jiān)聽器。返回值是一個(gè)對象字管，對象的key為對應(yīng)的事件類型(例如click啰挪，focus)，對象的value為一個(gè)數(shù)組嘲叔，其包含了對應(yīng)事件類型下的所有事件監(jiān)聽器亡呵。例如，下面列出了在document上注冊的所有事件監(jiān)聽器：

如果我們需要找到某個(gè)特定的事件監(jiān)聽器硫戈，可以通過如下方式進(jìn)行訪問：

// eventName表示對應(yīng)的事件類型
// index表示該事件類型下的事件監(jiān)聽器數(shù)組的索引
getEventListeners($('selector')).eventName[index].listener

// 例如獲取document下click事件監(jiān)聽器數(shù)組的第一項(xiàng)
getEventListeners(document).click[0].listener

11.4 監(jiān)控事件

如果你希望在執(zhí)行綁定到DOM中特定元素的事件時(shí)監(jiān)視它們政己，控制臺提供了monitorEvents方法來幫助你使用不同的命令來監(jiān)控其中的一些或者所有事件：

monitorEvents($('selector'))：將監(jiān)視與選擇器匹配的元素關(guān)聯(lián)的所有事件，當(dāng)這些事件被觸發(fā)時(shí)會將它們打印到控制臺掏愁。例如monitorEvents($('#content'))將監(jiān)視id為content的元素關(guān)聯(lián)的所有事件歇由。
monitorEvents($('selector'), 'eventName')：將監(jiān)視選擇器匹配的元素的某個(gè)特定的事件。例如果港，monitorEvents($('#content'), 'click')將監(jiān)視id為content的元素關(guān)聯(lián)的click事件沦泌。
monitorEvents($('selector'), [eventName1, eventName2, ...])：將監(jiān)視選擇器匹配的元素的某些特定的事件。與上述不同的是辛掠，第二項(xiàng)可以傳入一個(gè)字符串?dāng)?shù)組谢谦，包含所有需要監(jiān)聽的事件類型名稱，以此達(dá)到自定義監(jiān)聽的目的萝衩。例如monitorEvents($('#content'), ['click', 'focus'])將監(jiān)視id為content的元素關(guān)聯(lián)的click和focus事件回挽。
unmonitorEvents($('selector'))：將停止監(jiān)視選擇器匹配的元素關(guān)聯(lián)的所有事件。例如unmonitorEvents($('#content'))將停止監(jiān)視id為content的元素關(guān)聯(lián)的所有事件猩谊。

效果圖如下：

11.5 檢查DOM元素

控制臺提供了inspect()方法讓我們可以直接從控制臺中檢查一個(gè)DOM元素千劈。

inspect($('selector'))：將檢查與選擇器匹配的元素，并且會自動(dòng)跳轉(zhuǎn)到Chrome Developer Tools的Elements選項(xiàng)卡中牌捷。例如inspect($('#content'))將檢查id為content的元素墙牌。