更快更高效地調(diào)試你的 JavaScript

了解你的工具在完成任務(wù)時(shí)有很重要的意義。 盡管 JavaScript 是出了名的難以調(diào)試，但是如果你掌握了一些小技巧，錯(cuò)誤和 bug 解決起來(lái)就會(huì)快多了。

我們收集了 14 個(gè)你必須要知道的調(diào)試技巧，希望你可以牢記以便下次你需要它們來(lái)幫助你調(diào)試你的 JavaScript 代碼。

讓我們開(kāi)始吧

大多數(shù)技巧都是用于 Chrome Inspector 和 Firefox，盡管有些可能也適用于其他調(diào)試器。

1. "debugger;"

除了 console.log， “debugger;” 是我最喜歡的臨時(shí)應(yīng)急調(diào)試工具。一旦它在你的代碼中出現(xiàn)，Chrome 會(huì)自動(dòng)地在執(zhí)行到它所在位置時(shí)停下。你甚至可以將它放在條件語(yǔ)句中，只在你需要的時(shí)候運(yùn)行。

if (thisThing) {
? ?debugger;
}

2. 以表格的形式展示對(duì)象

有些時(shí)候，你想查看一組復(fù)雜的對(duì)象。你可以用 console.log 打印并滾動(dòng)查看，或者使用 console.table 來(lái)更加輕松地查看你所處理的對(duì)象。

var animals = [
? ?{ animal: 'Horse', name: 'Henry', age: 43 },
? ?{ animal: 'Dog', name: 'Fred', age: 13 },
? ?{ animal: 'Cat', name: 'Frodo', age: 18 }
];

console.table(animals);

輸出:?

3. 嘗試所有的尺寸

擁有所有的移動(dòng)設(shè)備這個(gè)想法是很美妙的，但是現(xiàn)實(shí)中是不可能的。不如取而代之，改變視口吧？Chrome 提供了所有你需要的東西。打開(kāi)你的調(diào)試器并點(diǎn)擊 "toggle device mode" 按鈕。你會(huì)看到媒體查詢出現(xiàn)啦！

4. 如何快速找到你的 DOM 元素

在 elements 面板中標(biāo)記一個(gè) DOM 元素，然后在 console 中使用它。Chrome Inspector 會(huì)保存最后 5 個(gè)元素在其歷史記錄中，所以最后標(biāo)記的元素可以用 $0 來(lái)顯示，倒數(shù)第二個(gè)被標(biāo)記的元素為 $1 ，以此類推。

如果你以 “item-4”, “item-3”, “item-2”, “item-1”, “item-0” 的順序標(biāo)記下面的這些元素，你可以像下圖所示那樣在 console 中訪問(wèn)這些 DOM 節(jié)點(diǎn)

5. 使用 console.time() 和 console.timeEnd() 對(duì)循環(huán)做基準(zhǔn)測(cè)試

知道程序運(yùn)行的確切時(shí)間是非常有用的，尤其當(dāng)調(diào)試非常慢的循環(huán)時(shí)。通過(guò)給函數(shù)傳參，你甚至可以啟動(dòng)多個(gè)計(jì)時(shí)器。讓我們看看如何做：

console.time('Timer1');

var items = [];

for(var i = 0; i < 100000; i++){
? items.push({index: i});
}

console.timeEnd('Timer1');

得到如下輸出：

6. 獲取函數(shù)的堆棧蹤跡

您可能了解 JavaScript 框架，生成大量代碼 -- 快速地。

它會(huì)構(gòu)建視圖和觸發(fā)事件，因此你最終會(huì)想要知道是什么在調(diào)用函數(shù)。

JavaScript 不是一個(gè)非常結(jié)構(gòu)化的語(yǔ)言，所以有時(shí)很難搞清楚 發(fā)生了什么 和 什么時(shí)候發(fā)生的 。因此 console.trace （console 面板中只需要 trace）就派上用場(chǎng)了。

假設(shè)你想知道第 33 行 car 實(shí)例的 funcZ 方法的整個(gè)堆棧蹤跡：

var car;
var func1 = function() {
func2();
}

var func2 = function() {
func4();
}
var func3 = function() {
}

var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = 'volvo';
this.color = 'red';
this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}

this.funcZ = function() {
console.trace('trace car')
}
}
func1();
var car;
var func1 = function() {
func2();
}
var func2 = function() {
func4();
}
var func3 = function() {
}
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = 'volvo';
this.color = 'red';
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
this.funcZ = function() {
console.trace('trace car')
}
}
func1();

第 33 行將輸出：

現(xiàn)在我們知道 func1 調(diào)用了 func2 ， 它又調(diào)用了func4。 func4 接著創(chuàng)建了一個(gè) Car 的實(shí)例并調(diào)用了 car.funcX，等等。

即便你認(rèn)為對(duì)你的代碼很熟悉，這也仍然非常有用。假設(shè)你想優(yōu)化你的代碼。獲取到函數(shù)堆棧蹤跡以及所有相關(guān)的其他函數(shù)，每一個(gè)函數(shù)都是可點(diǎn)擊的，你可以在他們之間來(lái)回跳轉(zhuǎn)，就像一個(gè)菜單一樣。

7. 解壓縮代碼以便更好地調(diào)試 JavaScript

有時(shí)生產(chǎn)環(huán)境會(huì)出現(xiàn)問(wèn)題，而服務(wù)器無(wú)法提供 source map 。 不要害怕。 Chrome 可以解壓你的 JavaScript 代碼以更加可讀的格式呈現(xiàn)。盡管格式化后的代碼不可能跟源碼一樣有用，但至少你可以知道發(fā)生了什么。點(diǎn)擊調(diào)試器 source 面板下面的 {} Pretty Print 按鈕。

8. 快速定位要調(diào)試的函數(shù)

假設(shè)你想在某個(gè)函數(shù)中設(shè)置一個(gè)斷點(diǎn)。

最常用的兩種方式是：

• 在調(diào)試器中找到相應(yīng)的行并設(shè)置一個(gè)斷點(diǎn)

• 在你的腳本中添加一個(gè) debugger

以上兩種方法，你都必須到你的文件中找到你想調(diào)試的那一行。

可能不常見(jiàn)的方式是使用 console。在 console 中使用 debug(funcName)，腳本會(huì)在運(yùn)行到你傳入的函數(shù)的時(shí)候停止。

這種方式比較快，缺點(diǎn)是對(duì)私有和匿名函數(shù)無(wú)效。但是，如果排除這些情形的話，這可能是定位要調(diào)試函數(shù)的最快方法。

var func1 = function() {
func2();
};

var Car = function() {
this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}
}

var car = new Car();

在 console 中輸入 debug(car.funcY)，在調(diào)試模式下當(dāng)調(diào)用 car.faunY 時(shí)腳本會(huì)停下來(lái)：

9. 不相關(guān)的黑盒腳本

我們經(jīng)常會(huì)在我們的網(wǎng)頁(yè)應(yīng)用中用到一些庫(kù)和框架。他們中大部分都經(jīng)過(guò)良好的測(cè)試且相對(duì)來(lái)說(shuō)錯(cuò)誤較少。但是，調(diào)試器在執(zhí)行調(diào)試任務(wù)時(shí)還是會(huì)進(jìn)入這些不相關(guān)的文件。一個(gè)解決辦法是將你不需要調(diào)試的腳本設(shè)置成黑盒。也包括你自己的腳本。更多關(guān)于調(diào)試黑盒的信息請(qǐng)參考這篇文章

10. 在復(fù)雜的調(diào)試中找到重要的信息

在更復(fù)雜的調(diào)試中我們有時(shí)想輸出很多行。為了使你的輸出保持更好的結(jié)構(gòu)，你可以使用更多的 console 方法，如：console.log, console.debug, console.warn, console.info, console.error 等。然后，你還可以在調(diào)試器中過(guò)濾他們。但是有時(shí)當(dāng)你調(diào)試 JavaScript 時(shí)，這并不是你真正想要的。現(xiàn)在，你可以給你的信息添加點(diǎn)創(chuàng)意和樣式了。你可以使用 CSS 并制定你自己的 console 輸出格式：

console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}

console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}

console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

將輸出:?

例如：

在 console.log() 中，%s 表示一個(gè)字符串，%i 表示整型，%c 表示自定義樣式。你可能會(huì)找到更好的方式來(lái)使用它們。如果你使用單頁(yè)面框架，你可能想對(duì) view 的輸出信息使用一種樣式，對(duì) models，collections，controllers 等使用其他的樣式，你可能會(huì)使用 wlog，clog，mlog 等簡(jiǎn)稱來(lái)命名。總之，盡情發(fā)揮你的創(chuàng)造力吧。

11. 監(jiān)控一個(gè)特定的函數(shù)調(diào)用及其參數(shù)

在 Chrome 的 console 面板中，你可以監(jiān)視一個(gè)特定的函數(shù)。每次該函數(shù)被調(diào)用，它將連同傳入的參數(shù)一起打印出來(lái)。

var func1 = function(x, y, z) {
//....
};

將輸出：?

這是一個(gè)查看函數(shù)所傳入?yún)?shù)的好辦法。但是我認(rèn)為如果 console 能夠告訴我函數(shù)需要傳入的參數(shù)個(gè)數(shù)的話會(huì)更好。上面的例子中，func1 需要傳入 3 個(gè)參數(shù)，但是只傳了 2 個(gè)參數(shù)。如果代碼中沒(méi)有對(duì)這種情況進(jìn)行處理，可能會(huì)導(dǎo)致 bug。

12. 在 console 中快速查詢?cè)?/strong>