大家都知道熟悉掌握工具的使用能讓我們事倍功倍，對完成任務的產生的影響非常大。對於JavaScript的調試，都一直說是難以調試，但事實上如果你掌握一些調試技巧，那麼解決一些問題或調試Bug的時間會少很多。
這篇文章整理了14個你可能不知道的調試技巧，但是下次你發現自己需要調試的JavaScript代碼時，可能會用得上，也會因此記住這些調試技巧。
這些調試技巧大部分都是針對Chrome和Firefox的瀏覽器，儘管也有許多和其他瀏覽器調試工具一樣。接下來，我們開始瞭解這些調試技巧。
debugger
可以使用console.log和debugger來調試你的JavaScript，這也是我最喜歡的調試工具。一旦在你的代碼中使用了debugger調試代碼，Chrome會自動停止執行的JavaScript代碼。你甚至可以將它封裝到條件語句中，只在需要時才運行。
if (thisThing) {
debugger;
}
對象表格顯示
有時，你需要查看一個複雜的對象集，你可以在控制檯上以一個表格的形式展示，這樣讓你更容易看到你片在處理的事情。
var animals = [
{ animal: ‘Horse’, name: ‘Henry’, age: 43 },
{ animal: ‘Dog’, name: ‘Fred’, age: 13 },
{ animal: ‘Cat’, name: ‘Frodo’, age: 18 }
];
console.table(animals);
輸出的結果：
嘗試所有尺寸
雖然你桌上的每一個移動設備都很棒，但在現實世界裏是不可行的。那麼Chrome提供了你所需要的一切，可以調整你的viewport。進入“檢查器”（Inspector），點擊“切換設備模式”。可以查看媒體查詢的效果。
如何快速找到DOM元素
在元素面板中標記一個DOM元素，並在控制檯中使用它。Chrome檢查器保留了它歷史上的最後五個元素，
如果你的模板中有item-4、item-3、item-2、item-1和item-0幾個標籤，然後你可以在控制檯上這樣訪問DOM節點：
使用console.time()和console.timeEnd()
在調試循環時，知道要執行多長時間是非常有用的。你甚至可以通過爲方法分配一個標籤來設置多個定時器。讓我們來看看它是如何工作的：
console.time(‘Timer1’);
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd(‘Timer1’);
結果如下：
獲取函數的堆棧跟蹤
你可能知道JavaScript框架，快速生成大量代碼。
它創建視圖並觸發事件，所以最終你將想知道是什麼導致了函數調用。
由於JavaScript不是一種結構化的語言，所以有時候很難對所發生的事情和何時進行做出描述。使用console.trace可以方便地調試JavaScript。
假設你希望在第33行實例中看到函數調用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，它叫func4。然後，func4創建了Car的實例，然後調用函數car.funcX等。
即使你認爲你很瞭解你的腳本，但這仍然很方便。比方說你想改進你的代碼，獲取所有相關函數的跟蹤和列表，每一個都是可點擊的，你現在可以在它們之間來回切換。它就像你的菜單。
調試壓縮的JavaScript代碼
有時你可以在生產中遇到問題，而你的源映射並沒有完全發佈到服務器。不要害怕。Chrome可以使你的JavaScript文件變得更容易閱讀。代碼不會像你的真實代碼那樣有用 —— 但至少你能看到發生了什麼。單擊檢查器中的source中的{}按鈕。
快速調試函數
假設你想在函數中設置斷點。
最常見的兩種方法是：
在檢查器中找到一行並添加一個斷點
在腳本中添加一個debugger
在這兩種解決方案中，都必須在文件中單擊，才能找到想要調試的特定行。
更不常見的是使用控制檯。在控制檯中使用debug（funcName），當它到達你傳入的函數時，腳本將停止。
它很快，但缺點是它不適用於私有或匿名函數。但如果不是這樣的話，這可能是找到調試函數的最快方法。注意，這和console.debug函數不是同一回事。
var func1 = function() {
func2();
};
var Car = function() {
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
}
var car = new Car();
在控制檯的類型調試中（car.funcY），腳本在調用car.funcY時將停止調試模式。
不相關的黑盒腳本
今天，我們經常在Web應用程序上使用一些庫和框架。它們中的大多數都經過了很好的測試，相對來說不會有什麼Bug。但是，調試器仍然會進入與此調試任務無關的所有文件。解決方案是將不需要調試的黑盒腳本。這也可以包括你自己的腳本。在本文中閱讀更多關於調試黑盒的內容。
在複雜的調試中找到重要的事情
在更復雜的調試中，我們有時希望輸出行多行。爲了保持更好的輸出結構，你可以做的一件事情是使用更多的控制檯功能。例如console.log、console.debug、console.warn、console.info和console.error等。然後你可以在你的檢查器中過濾它們。但有時候，當需要調試JavaScript時，這並不是你想要的。現在，你可以對你的信息進行個性化的設計。當你想調試JavaScript時，使用CSS並創建你自己的結構化控制檯消息：
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設置String，%i設置Integer個性化樣式。你可能會找到更好的方法來使用它。如果你使用一個單一的頁面框架，你可能希望有一種樣式來查看消息，另一種樣式用於模型、集合、控制器等。也許還可以命名爲wlog、clog和mlog等你能想得出來的名字。
觀察特定函數調用及其參數
在Chrome控制檯中，你可以關注指定的函數。每次調用該函數時，它將記錄傳入的值。
var func1 = function(x, y, z) {
//….
};
輸出的結果如下：
這是一種很好的方法，可以看到哪些參數傳遞到函數中。但我必須說，如果控制檯能打印出函數的參數有多少，那就太好了。在上面的示例中，func1有三個參數，但只有2個被傳入。如果在代碼中沒有做相應的處理，那麼就會導致Bug的出現。
快速訪問控制檯中的元素
在控制檯上執行比querySelector的更快的方法是使用
Postman非常棒（但Firefox更快）
許多開發人員使用Postman來處理Ajax請求。Postman是非常優秀的，但是打開一個新的瀏覽器窗口，編寫新的Ajax請求對象，然後測試它們會有點麻煩。
有時使用瀏覽器更容易些。
當你這樣做的時候，你不需要擔心身份驗證，如果你發送到一個密碼安全頁面，也就不需要驗證cookie。這就是如何在Firefox中編輯和重新發送請求的方法。
打開檢查器，轉到network標籤。右鍵單擊所需的請求並選擇Edit和Resend。現在你可以改變任何你想要的東西。更改標題並編輯參數，然後點擊Resend。
以下是我提出的兩次不同性質的請求：
打斷節點變化
DOM可能是一件有趣的事情。有時候事情會改變，你也不知道爲什麼。但是，當需要調試JavaScript時，當DOM元素髮生了變化時，Chrome允許你暫停。你甚至可以監視它的屬笥。在Chrome瀏覽器的檢查器中，右鍵單擊該元素，並選擇設置爲打斷：
本文根據@Luis Alonzo 的《The 14 JavaScript debugging tips you probably didn’t know》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處:https://raygun.com/javascript-debugging-tips。
著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/tools/javascript-debugging-tips.html © w3cplus.com