更快更高效地調試你的 JavaScript

了解你的工具在完成任務時有很重要的意義。 盡管 JavaScript 是出了名的難以調試，但是如果你掌握了一些小技巧，錯誤和 bug 解決起來就會快多了。

我們收集了 14 個你必須要知道的調試技巧，希望你可以牢記以便下次你需要它們來幫助你調試你的 JavaScript 代碼。

讓我們開始吧

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

1. "debugger;"

除了 console.log， “debugger;” 是我最喜歡的臨時應急調試工具。一旦它在你的代碼中出現，Chrome 會自動地在執行到它所在位置時停下。你甚至可以將它放在條件語句中，只在你需要的時候運行。

if (thisThing) {
? ?debugger;
}

2. 以表格的形式展示對象

有些時候，你想查看一組復雜的對象。你可以用 console.log 打印并滾動查看，或者使用 console.table 來更加輕松地查看你所處理的對象。

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

console.table(animals);

輸出:?

3. 嘗試所有的尺寸

擁有所有的移動設備這個想法是很美妙的，但是現實中是不可能的。不如取而代之，改變視口吧？Chrome 提供了所有你需要的東西。打開你的調試器并點擊 "toggle device mode" 按鈕。你會看到媒體查詢出現啦！

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

在 elements 面板中標記一個 DOM 元素，然后在 console 中使用它。Chrome Inspector 會保存最后 5 個元素在其歷史記錄中，所以最后標記的元素可以用 $0 來顯示，倒數第二個被標記的元素為 $1 ，以此類推。

如果你以 “item-4”, “item-3”, “item-2”, “item-1”, “item-0” 的順序標記下面的這些元素，你可以像下圖所示那樣在 console 中訪問這些 DOM 節點

5. 使用 console.time() 和 console.timeEnd() 對循環做基準測試

知道程序運行的確切時間是非常有用的，尤其當調試非常慢的循環時。通過給函數傳參，你甚至可以啟動多個計時器。讓我們看看如何做：

console.time('Timer1');

var items = [];

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

console.timeEnd('Timer1');

得到如下輸出：

6. 獲取函數的堆棧蹤跡

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

它會構建視圖和觸發事件，因此你最終會想要知道是什么在調用函數。

JavaScript 不是一個非常結構化的語言，所以有時很難搞清楚 發生了什么 和 什么時候發生的 。因此 console.trace （console 面板中只需要 trace）就派上用場了。

假設你想知道第 33 行 car 實例的 funcZ 方法的整個堆棧蹤跡：

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 行將輸出：

現在我們知道 func1 調用了 func2 ， 它又調用了func4。 func4 接著創建了一個 Car 的實例并調用了 car.funcX，等等。

即便你認為對你的代碼很熟悉，這也仍然非常有用。假設你想優化你的代碼。獲取到函數堆棧蹤跡以及所有相關的其他函數，每一個函數都是可點擊的，你可以在他們之間來回跳轉，就像一個菜單一樣。

7. 解壓縮代碼以便更好地調試 JavaScript

有時生產環境會出現問題，而服務器無法提供 source map 。 不要害怕。 Chrome 可以解壓你的 JavaScript 代碼以更加可讀的格式呈現。盡管格式化后的代碼不可能跟源碼一樣有用，但至少你可以知道發生了什么。點擊調試器 source 面板下面的 {} Pretty Print 按鈕。

8. 快速定位要調試的函數

假設你想在某個函數中設置一個斷點。

最常用的兩種方式是：

• 在調試器中找到相應的行并設置一個斷點

• 在你的腳本中添加一個 debugger

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

可能不常見的方式是使用 console。在 console 中使用 debug(funcName)，腳本會在運行到你傳入的函數的時候停止。

這種方式比較快，缺點是對私有和匿名函數無效。但是，如果排除這些情形的話，這可能是定位要調試函數的最快方法。

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)，在調試模式下當調用 car.faunY 時腳本會停下來：

9. 不相關的黑盒腳本

我們經常會在我們的網頁應用中用到一些庫和框架。他們中大部分都經過良好的測試且相對來說錯誤較少。但是，調試器在執行調試任務時還是會進入這些不相關的文件。一個解決辦法是將你不需要調試的腳本設置成黑盒。也包括你自己的腳本。更多關于調試黑盒的信息請參考這篇文章

10. 在復雜的調試中找到重要的信息

在更復雜的調試中我們有時想輸出很多行。為了使你的輸出保持更好的結構，你可以使用更多的 console 方法，如：console.log, console.debug, console.warn, console.info, console.error 等。然后，你還可以在調試器中過濾他們。但是有時當你調試 JavaScript 時，這并不是你真正想要的。現在，你可以給你的信息添加點創意和樣式了。你可以使用 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 表示一個字符串，%i 表示整型，%c 表示自定義樣式。你可能會找到更好的方式來使用它們。如果你使用單頁面框架，你可能想對 view 的輸出信息使用一種樣式，對 models，collections，controllers 等使用其他的樣式，你可能會使用 wlog，clog，mlog 等簡稱來命名。總之，盡情發揮你的創造力吧。

11. 監控一個特定的函數調用及其參數

在 Chrome 的 console 面板中，你可以監視一個特定的函數。每次該函數被調用，它將連同傳入的參數一起打印出來。

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

將輸出：?

這是一個查看函數所傳入參數的好辦法。但是我認為如果 console 能夠告訴我函數需要傳入的參數個數的話會更好。上面的例子中，func1 需要傳入 3 個參數，但是只傳了 2 個參數。如果代碼中沒有對這種情況進行處理，可能會導致 bug。

12. 在 console 中快速查詢元素

在 console 中執行 querySelector 的一個更快的辦法是使用 $ 符號。$('css-selector') 會返回 CSS 選擇器所匹配的第一個元素。$$(‘css-selector’) 會返回所有的元素。如果你要不止一次地使用該元素，最好是把它作為變量緩存起來。

13. Postman 是個好東西（但 Firefox 更快）

很多開發者在使用 Postman 來處理 ajax 請求。Postman 很優秀，使用它需要打開一個新的瀏覽器窗口，然后編寫請求體然后測試，有點煩人。

有時使用你的瀏覽器會更輕松。

使用瀏覽器，當你向一個基于密碼保護的網頁發送請求時你不用再擔心 cookie 的認證。你可以在 Firefox 中編輯并再次發送請求。

打開調試器并跳轉到 network 選項。右鍵點擊你想要修改的請求并選擇 Edit and Resend，你就可以修改任何你想要修改的東西了。你可以修改頭部以及參數然后點擊 resend。

下面我提交了兩個參數不同的請求：

14. 打斷節點的變化

DOM 是個有趣的東西。有時它發生了變化，然而你卻一臉懵逼，不知道為啥。但是，當你使用 Chrome 調試 JavaScript，DOM 發生變化時，你可以暫停，甚至可以監控屬性的變化。在 Chrome Inspector 中，右鍵點擊某個元素，然后選擇 break on 設置來使用：

最后，為你推薦：

【第1099期】Eruda: 手機網頁調試利器

【第571期】基于Postman的API自動化測試

【第556期】一探前端開發中的JS調試技巧

關于本文

轉自：微信公眾號：前端早讀課

譯者：@ParadeTo（掘金翻譯計劃）
校對者：@Yuuoniy, @lampui
作者：@Luis Alonzo
原文：https://raygun.com/javascript-debugging-tips
譯文：https://github.com/xitu/gold-miner/blob/master/TODO/javascript-debugging-tips.md

?

總結

以上是生活随笔為你收集整理的js_调试_01_14 个你可能不知道的 JavaScript 调试技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。