你可能不知道的14個JavaScript除錯技巧
瞭解你的工具可以在完成任務的過程中發揮重大作用。儘管傳言 JavaScript 難以除錯，但是如果你掌握了一些除錯技巧，那麼你將會花費更少的時間來解決這些錯誤。
我們已經列出了14個你可能不知道的除錯技巧，但可能要記住，這樣下次你需要除錯 JavaScript 程式碼時就可以馬上使用了！
現在就馬上開始。
1. ‘debugger;’
除了 console.log , debugger; 是我們最喜歡、快速且骯髒的除錯工具。一旦執行到這行程式碼，Chrome 會在執行時自動停止。 你甚至可以使用條件語句加上判斷，這樣可以只在你需要的時候執行。愚人碼頭注：本人實在覺得這種除錯方面很不好，因為後續的除錯步驟和斷點除錯沒什麼區別。而且除錯完成後，還要記住刪掉這行程式碼。確實有點骯髒。
JavaScript 程式碼:
if (thisThing) {
debugger;
}
2. 將 objects 顯示為表格
有時，你有一個複雜的物件要檢視。你可以用 console.log 檢視並滾動瀏覽該物件，或者使用console.table展開，更容易看到正在處理的內容！
JavaScript 程式碼:
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為你提供所需的一切。 進入Chrome 開發者除錯工具，然後點選 ‘toggle device mode(切換裝置模式)’ 按鈕。 實時觀察視窗變化即可!
4. 如何快速找到DOM元素
在 Elements(元素) 面板中標記 DOM 元素，並可以在 console(控制檯) 中使用它。Chrome 檢測器會保留其歷史記錄中的最後 5 個元素，以便最終標記的元素顯示 1 ，依此類推。
如果你按照“item-4”，“item-3”，“item-2”，“item-1”，“item-0”的順序標記下列項，則可以在控制檯中像這樣訪問DOM節點：
5. 使用 console.time() 和 console.timeEnd() 來標記迴圈耗時
要確切地知道某段程式碼需要執行多長時間，尤其是在除錯慢迴圈時，可能會非常有用。您甚至可以通過為該方法分配標籤來設定多個定時器。讓我們看看它是如何工作的：
JavaScript 程式碼:
console.time('Timer1');
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd('Timer1');
執行產生了如下結果：
6. 獲取函式的堆疊跟蹤資訊
你可能知道JavaScript框架，會引入大量程式碼。
它建立檢視觸發事件，而且你最終會想知道函式呼叫是怎麼發生的。
因為 JavaScript 不是一個很結構化的語言，有時候很難完整的瞭解到底 發生了什麼 以及 什麼時候發生 的。 使用 console.trace（(僅僅只是在控制檯中跟蹤) 可以方便地除錯JavaScript 。
假設你現在想看 car 例項在第24行呼叫 funcZ 函式的完整堆疊軌跡資訊:
JavaScript 程式碼:
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() {
24行將輸出：
現在我們可以看到 func1 呼叫 func2， func2 呼叫 func4。 Func4 建立了一個 Car 的例項，然後呼叫函式 car.funcX，依此類推。
即使你認為非常瞭解自己的程式碼，這種分析仍然可以讓你感到很方便。假如你想改進你的程式碼。獲取跟蹤資訊和所有涉及的函式名單，每一項都可以點選，你可以在他們之間來回切換。這就像一個特地為你準備的選單。
7. 美化程式碼使除錯 JavaScript 變得簡單
有時你可能在生產環境中遇到問題，但是你的source maps沒有部署在伺服器上。 不要害怕 。Chrome 可以將你的 Javascript 檔案美化為更易閱讀的格式。雖然程式碼不會像你的真實程式碼那樣有用 – 但至少你可以看到發生了什麼。點選檢查器中原始碼檢視器下方的 {} 美化按鈕即可。
8. 快速查詢要除錯的函式
假設你想在一個函式中設定一個斷點。
最常見的兩種方法是：
1.在原始碼檢視器查詢到相應的行，並新增一個斷點
2.在程式碼中新增debugger
在這兩個解決方案中，您必須在檔案中單擊以除錯特定行。
使用控制檯打斷點可能不太常見。在控制檯中使用 debug(funcName)，當到達傳入的函式時，程式碼將停止。
這個除錯方法很快, 但缺點是不適用於私有函式或匿名函式。但除了私有和匿名函式, 這可能是找到除錯函式的最快方法。（注意：這個函式和console.debug 函式是不同的東西。）
JavaScript 程式碼:
var func1 = function() {
func2();
};
var Car = function() {
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
}
var car = new Car();
在控制檯中輸入 debug(car.funcY) ，當呼叫 car.funcY 時，指令碼將以除錯模式停止：
9. 遮蔽不相關的程式碼
現在，我們經常在應用中引入多個庫或框架。其中大多數都經過良好的測試且相對沒有陷阱。 但是，偵錯程式仍然會進入與除錯任務無關的檔案。解決方案是遮蔽不需要除錯的指令碼。當然也可以包括你自己的指令碼。
10. 在複雜的除錯過程中尋找重點
在更復雜的除錯中，我們有時希望輸出很多行。你可以做的事情就是使用更多控制檯函式來保持良好的輸出結構，例如, console.log, console.debug, console.warn, console.info, console.error等等。然後，可以在控制檯中快速瀏覽。但有時候，某些 JavaScrip 除錯資訊並不是你需要的。現在，可以自己美化除錯資訊了。在除錯 JavaScript 時，可以使用 CSS 並自定義控制檯資訊：
JavaScript 程式碼:
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 設定自定義樣式等等，還有很多更好的 console.log() 使用方法。 如果使用的是單頁應用框架，可以為檢視（view）訊息建立一個樣式，為模型（models），集合（collections），控制器（controllers）等建立另一個樣式。也許還可以像 wlog，clog 和 mlog 一樣發揮想象力！
11. 觀察特定函式的呼叫及其引數
在 Chrome 控制檯中，您可以關注特定的函式。 每次呼叫該函式時，都會對傳入的引數值進行記錄。
JavaScript 程式碼:
var func1 = function(x, y, z) {
//....
};
輸出：
這是檢視哪些引數傳遞給函式的好方法。 但是我必須說，如果控制檯可以告訴我們需要多少引數，那將是一件好事。 在上面的例子中，func1 期望 3個引數，但是隻有 2 個引數被傳入。如果在程式碼中沒有處理這個引數，它可能導致一個可能的 bug 。
12. 在控制檯中快速訪問元素
在控制檯中執行 querySelector 一種更快的方法是使用美元符。$('css-selector') 將會返回CSS選擇器的第一個匹配項。$$('css-selector') 將會返回所有匹配項。如果多次使用一個元素，可以把它儲存為一個變數。
13. Postman 很棒（但Firefox更快）
許多開發人員使用 Postman 檢視ajax請求。Postman真的很優秀。但開啟一個新的瀏覽器視窗，新寫一個請求物件來測試，這確實顯得很麻煩。
有時使用瀏覽器更容易。
當你使用瀏覽器檢視時，如果請求一個密碼驗證頁面，你不需要擔心身份驗證的cookie。下面看，在Firefox中如何編輯並重新發送請求。
開啟檢查員並轉到網路選項卡。 右鍵單擊所需的請求，然後選擇編輯並重新發送。 現在你可以改變任何你想要的。 更改標題並編輯您的引數並點選重新發送。
下面我用不同的屬性提出兩次請求：
14. 節點變化時中斷
DOM 是一個有趣的東西。 有時候它會被修改，但是你並不知道為什麼。 但是，當您需要除錯 JavaScript 時，Chrome會讓您在DOM元素髮生更改時暫停。 你甚至可以監視它的屬性。 在Chrome 檢查器中，右鍵單擊該元素，然後在設定中選擇一箇中斷就可以了：
這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。