在我們的日常前端開發(fā)中壶辜，使用最頻繁的莫過(guò)于使用console.log在瀏覽器的控制臺(tái)中打印出我們需要調(diào)試的信息灰瞻，但是大部分人可能跟之前的我一樣，沒(méi)有意識(shí)到其實(shí)console除了log方法以外疏虫，還有很多實(shí)用的方法领铐，這些方法可以使我們的調(diào)試過(guò)程更加容易，也表達(dá)得更加直觀荐糜，更加豐富多彩巷怜，下面我們就來(lái)看看有哪些實(shí)用的方法吧！
1暴氏、console.log()
我們經(jīng)常會(huì)使用console.log來(lái)打印出某個(gè)變量的值或者某個(gè)實(shí)體對(duì)象延塑，也可以傳入多個(gè)變量參數(shù)，它會(huì)按照傳入順序進(jìn)行打哟鹩妗：
1. 傳入一個(gè)變量
const a = 1;
console.log(a); // -> 1
2. 傳入一個(gè)對(duì)象
const foo = {a: 1};
console.log(foo); // -> {a: 1}
3. 傳入多個(gè)變量
console.log(a, foo); // -> 1 {a: 1}
復(fù)制代碼
除此之外关带，它還支持格式化打印的功能，傳入特定的占位符來(lái)對(duì)參數(shù)進(jìn)行格式化處理沼撕，常見的占位符有以下幾種：
-
%s：字符串占位符 -
%d：整數(shù)占位符 -
%f：浮點(diǎn)數(shù)占位符 -
%o：對(duì)象占位符(注意是字母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 對(duì)象占位符
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樣式占位符效果如下：
<figcaption></figcaption>
2舍败、console.warn()
你可以完全使用console.warn來(lái)代替console.log方法，但前提是該條打印信息是屬于警告級(jí)別而不是普通信息級(jí)別敬拓，因此瀏覽器遇到一條警告級(jí)別的信息會(huì)區(qū)別對(duì)待邻薯，最明顯的是它的左側(cè)會(huì)有一個(gè)警告圖標(biāo)，并且背景色和文字顏色也會(huì)不一樣乘凸。
<figcaption></figcaption>
相比于普通信息厕诡，警告信息會(huì)出現(xiàn)在上圖左側(cè)的warning面板中，而不是info面板中营勤，這樣也有助于我們?cè)谝欢汛蛴⌒畔⒅锌焖俸Y選出警告信息灵嫌，方便查看。
3葛作、console.dir()
在大多數(shù)情況下寿羞，console.dir方法的作用和console.log作用相似，但是有一點(diǎn)細(xì)微的差別赂蠢。
[圖片上傳失敗...(image-2dfa10-1575647948164)]
<figcaption></figcaption>
在上圖中绪穆，我們可以看到，console.log方法會(huì)將打印結(jié)果的詳細(xì)信息顯示完整，但是console.dir方法只會(huì)打印出對(duì)象玖院，不會(huì)展開詳細(xì)信息菠红，當(dāng)然點(diǎn)擊之后看到的信息和前者一樣。 唯一差異比較大的地方是當(dāng)我們打印HTML文檔中的節(jié)點(diǎn)時(shí)难菌，會(huì)有完全不一樣的表現(xiàn)形式试溯。例如我們使用console.log來(lái)打印body標(biāo)簽：[圖片上傳失敗...(image-3a57a2-1575647948164)]
<figcaption></figcaption>
我們會(huì)方便地看到DOM結(jié)構(gòu)，并且鼠標(biāo)移上去能夠幫我們自動(dòng)定位到對(duì)應(yīng)的DOM節(jié)點(diǎn)郊酒。但是在某些情況下遇绞，其實(shí)這并不是你想要看到的效果，或許你想看到的是該DOM節(jié)點(diǎn)下的所有屬性信息燎窘，那么你可以嘗試使用console.dir方法來(lái)試試：[圖片上傳失敗...(image-8e89cd-1575647948164)]
<figcaption></figcaption>
4试读、console.table()
在我們的項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到對(duì)象數(shù)組形式的列表數(shù)據(jù)，在調(diào)試過(guò)程中我們可能會(huì)使用console.log方法打印出這些數(shù)據(jù)來(lái)進(jìn)行查看荠耽，但比起前者钩骇，還可以使用一種比較可視化的方式來(lái)進(jìn)行打印。例如铝量，這里準(zhǔn)備一些列表數(shù)據(jù)：
const response = [
{
id: 1,
name: 'Marry',
age: 18,
sex: 0
},
{
id: 2,
name: 'John',
age: 20,
sex: 1
}
];
復(fù)制代碼
然后我們使用console.log來(lái)進(jìn)行打犹纫佟：
<figcaption></figcaption>
可以看出，我們打印出的結(jié)果并不夠直接慢叨，沒(méi)有給人一種一目了然的效果纽匙，接著換著使用console.table來(lái)打印：[圖片上傳失敗...(image-daeaf5-1575647948163)]
<figcaption></figcaption>
可以看到拍谐，我們的列表數(shù)據(jù)被清晰完整地展現(xiàn)在了表格當(dāng)中烛缔，同時(shí)console.table提供第二個(gè)可選參數(shù)用于篩選表格需要顯示的列，默認(rèn)為全部列都顯示轩拨。[圖片上傳失敗...(image-aa9ce8-1575647948163)]
<figcaption></figcaption>
上圖我們通過(guò)添加第二個(gè)參數(shù)践瓷，數(shù)組中為需要在表格中顯示的字段名，這樣就很方便地在結(jié)果數(shù)據(jù)中過(guò)濾掉我們不需要關(guān)心的信息亡蓉。
5晕翠、console.assert()
assert即斷言，該方法接收多個(gè)參數(shù)砍濒，其中第一個(gè)參數(shù)為輸入的表達(dá)式淋肾，只有在該表達(dá)式的值為false時(shí)，才會(huì)將剩余的參數(shù)輸出到控制臺(tái)中爸邢。
[圖片上傳失敗...(image-91f985-1575647948163)]
<figcaption></figcaption>
上圖中的第二行因?yàn)?code>arr.length > 5值為false樊卓，因此打印出后面的信息。如果在某些場(chǎng)景下你需要評(píng)估當(dāng)前的數(shù)據(jù)是否滿足某個(gè)條件杠河，那么不妨使用console.assert()方法來(lái)在控制臺(tái)中查看斷言信息碌尔。
6赶掖、console.trace()
該方法用于在控制臺(tái)中顯示當(dāng)前代碼在堆棧中的調(diào)用路徑，通過(guò)這個(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); // -> []
復(fù)制代碼
在上面代碼中，我們分別在bar1和bar2函數(shù)中調(diào)用foo函數(shù)并傳入不同的參數(shù)陪白，很顯然bar2函數(shù)在執(zhí)行時(shí)會(huì)進(jìn)入if語(yǔ)句并執(zhí)行console.trace()方法颈走，以下是控制臺(tái)中打印結(jié)果：
[圖片上傳失敗...(image-878739-1575647948163)]
<figcaption></figcaption>
可以看到自下而上的一條調(diào)用路徑，并可以快速判定是在bar2函數(shù)中傳入了不合適的參數(shù)null而導(dǎo)致出錯(cuò)咱士，方便我們跟蹤發(fā)生錯(cuò)誤的原始位置立由。
7、console.count()
該方法相當(dāng)于一個(gè)計(jì)數(shù)器序厉，用于記錄調(diào)用次數(shù)锐膜，并將記錄結(jié)果打印到控制臺(tái)中。其接收一個(gè)可選參數(shù)console.count(label)弛房，label表示指定標(biāo)簽道盏，該標(biāo)簽會(huì)在調(diào)用次數(shù)之前顯示，示例如下：
for (let i = 1;i <= 5;i++) {
if (!(i % 2)) {
console.count('even');
} else {
console.count('odd');
}
}
復(fù)制代碼
代碼中如果i是偶數(shù)文捶，則會(huì)對(duì)even計(jì)數(shù)器進(jìn)行計(jì)數(shù)荷逞，否則對(duì)odd計(jì)數(shù)器進(jìn)行計(jì)數(shù)，執(zhí)行后我們會(huì)在控制臺(tái)中看到如下列表：
odd: 1
even: 1
odd: 2
even: 2
odd: 3
復(fù)制代碼
8粹排、console.time() & console.timeEnd()
這兩個(gè)方法一般配合使用种远，是JavaScript中用于跟蹤程序執(zhí)行時(shí)間的專用函數(shù)，console.time方法是作為計(jì)算的起始時(shí)間顽耳，console.timeEnd是作為計(jì)算的結(jié)束時(shí)間坠敷，并將執(zhí)行時(shí)長(zhǎng)顯示在控制臺(tái)。如果一個(gè)頁(yè)面有多個(gè)地方需要使用到計(jì)算器射富，則可以為方法傳入一個(gè)可選參數(shù)label來(lái)指定標(biāo)簽膝迎，該標(biāo)簽會(huì)在執(zhí)行時(shí)間之前顯示。在以往我們計(jì)算程序的執(zhí)行時(shí)間時(shí)胰耗，我們一般會(huì)采用如下方式：
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 }`);
復(fù)制代碼
這是一種比較傳統(tǒng)的做法弄抬，我們還可以使用console.time來(lái)實(shí)現(xiàn)：
console.time('sum');
let sum = 0;
for(let i = 0;i < 100000;i++) {
sum += i;
}
console.timeEnd('sum');
復(fù)制代碼
控制臺(tái)效果如下：
[圖片上傳失敗...(image-9fc502-1575647948163)]
<figcaption></figcaption>
相比于第一種實(shí)現(xiàn)方式，我們沒(méi)有設(shè)置任何臨時(shí)變量并且沒(méi)有做任何計(jì)算宪郊。
9掂恕、console.group() & console.groupEnd()
顧名思義，對(duì)數(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ù)制代碼
控制臺(tái)效果如下：
[圖片上傳失敗...(image-1df2a0-1575647948163)]
<figcaption></figcaption>
該方法的作用主要是讓我們?cè)诳刂婆_(tái)打印的日志更加清晰可讀店枣。
10、瀏覽器轉(zhuǎn)為編輯器
在大部分情況下，我們?cè)跒g覽器中調(diào)試DOM結(jié)構(gòu)或者編輯一些文本時(shí)鸯两，會(huì)在Chrome Developer Tools的Elements選項(xiàng)中對(duì)DOM節(jié)點(diǎn)進(jìn)行編輯闷旧，但是一旦節(jié)點(diǎn)過(guò)多，會(huì)很容易增加調(diào)試過(guò)程的困難钧唐，這里我們可以使用一種方式來(lái)將瀏覽器直接轉(zhuǎn)換為編輯器模式：
document.body.contentEditable = true;
復(fù)制代碼
在控制臺(tái)中輸入以上代碼后忙灼，可以將瀏覽器中的所有內(nèi)容變?yōu)榭删庉嫚顟B(tài)，效果圖如下：
<figcaption></figcaption>
11钝侠、Chrome Command Line API
Google的Chrome Command Line API包含了一個(gè)用于執(zhí)行以下常見任務(wù)的便捷函數(shù)集合：選擇和檢查DOM元素该园，以可讀格式顯示數(shù)據(jù)，停止和啟動(dòng)分析器帅韧，以及監(jiān)控DOM事件里初。
注意：此API只能通過(guò)瀏覽器控制臺(tái)獲取，無(wú)法通過(guò)網(wǎng)頁(yè)腳本來(lái)進(jìn)行訪問(wèn)忽舟。
11.1 選擇DOM元素
當(dāng)我們使用jQuery的時(shí)候双妨，我們可以通過(guò)各種選擇器例如$('#id')和$('.class')來(lái)選擇匹配的DOM元素，但是如果我們沒(méi)有引入jQuery時(shí)叮阅，我們?nèi)匀豢梢栽贑hrome的控制臺(tái)中進(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ù)組及刻。[圖片上傳失敗...(image-279512-1575647948159)]<figcaption></figcaption>
$x('//p[a]')表示返回包含
<a>元素的所有<p>元素镀裤。
11.2 檢索最后一個(gè)結(jié)果的值
在控制臺(tái)中我們經(jīng)常會(huì)進(jìn)行一些計(jì)算，某些情況下你可能需要跟蹤你之前的計(jì)算結(jié)果來(lái)用于后面的計(jì)算缴饭，使用$_標(biāo)記可用于返回最近評(píng)估的表達(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í)，控制臺(tái)提供了getEventListeners方法來(lái)幫助我們找到這些關(guān)聯(lián)的事件颗搂。
getEventListeners($('selector'))返回在指定DOM元素上注冊(cè)的事件監(jiān)聽器担猛。返回值是一個(gè)對(duì)象，對(duì)象的key為對(duì)應(yīng)的事件類型(例如click丢氢，focus)傅联，對(duì)象的value為一個(gè)數(shù)組，其包含了對(duì)應(yīng)事件類型下的所有事件監(jiān)聽器疚察。例如蒸走，下面列出了在document上注冊(cè)的所有事件監(jiān)聽器：
[圖片上傳失敗...(image-2b321c-1575647948162)]
<figcaption></figcaption>
如果我們需要找到某個(gè)特定的事件監(jiān)聽器，可以通過(guò)如下方式進(jìn)行訪問(wèn)：
// eventName表示對(duì)應(yīng)的事件類型
// index表示該事件類型下的事件監(jiān)聽器數(shù)組的索引
getEventListeners($('selector')).eventName[index].listener
// 例如獲取document下click事件監(jiān)聽器數(shù)組的第一項(xiàng)
getEventListeners(document).click[0].listener
復(fù)制代碼
11.4 監(jiān)控事件
如果你希望在執(zhí)行綁定到DOM中特定元素的事件時(shí)監(jiān)視它們貌嫡，控制臺(tái)提供了monitorEvents方法來(lái)幫助你使用不同的命令來(lái)監(jiān)控其中的一些或者所有事件：
-
monitorEvents($('selector'))：將監(jiān)視與選擇器匹配的元素關(guān)聯(lián)的所有事件比驻，當(dāng)這些事件被觸發(fā)時(shí)會(huì)將它們打印到控制臺(tái)该溯。例如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)的所有事件。
效果圖如下：
<figcaption></figcaption>
11.5 檢查DOM元素
控制臺(tái)提供了inspect()方法讓我們可以直接從控制臺(tái)中檢查一個(gè)DOM元素陪竿。
-
inspect($('selector'))：將檢查與選擇器匹配的元素禽翼，并且會(huì)自動(dòng)跳轉(zhuǎn)到Chrome Developer Tools的Elements選項(xiàng)卡中。例如inspect($('#content'))將檢查id為content的元素族跛。
效果圖如下：
<figcaption></figcaption>
交流
作者：小維FE
鏈接：https://juejin.im/post/5ddd373cf265da05d7582ce8
來(lái)源：掘金
著作權(quán)歸作者所有闰挡。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處礁哄。
