14 個你可能不知道的 JavaScript 調試技巧
了解你的工具可以極大的幫助你完成任務。盡管 JavaScript 的調試非常麻煩，但在掌握了技巧 (tricks) 的情況下，你依然可以用盡量少的的時間解決這些錯誤 (errors) 和問題 (bugs) 。
我們會列出14個你可能不知道的調試技巧, 但是一旦知道了，你就會迫不及待的想在下次需要調試 JavaScript 代碼的時候使用它們！
現在開始。
雖然許多技巧也可以用在別的檢查工具上，但大部分的技巧是用在 Chrome Inspector 和 Firefox 上的。
1. ‘debugger;’
‘debugger’ 是 console.log 之外我最喜歡的調試工具，簡單暴力。只要把它寫到代碼裏，Chrome 運行的時候就會自動自動停在那。你甚至可以用條件語句把它包裹起來，這樣就可以在需要的時候才執行它。
2. 把 objects 輸出成表格
有時候你可能有一堆對象需要查看。你可以用 console.log 把每一個對象都輸出出來，你也可以用 console.table 語句把它們直接輸出為一個表格！
輸出結果:
3. 試遍所有的尺寸
雖然把各種各樣的手機都擺在桌子上看起來很酷，但這卻很不現實。為什麽不選擇直接調整界面大小呢? Chrome 瀏覽器提供了你所需要的一切。 進入檢查面板點擊 ‘切換設備模式’ 按鈕，這樣你就可以調整視窗的大小了！
4. 如何快速定位 DOM 元素
在元素面板上標記一個 DOM 元素並在 concole 中使用它。Chrome Inspector 的歷史記錄保存最近的五個元素，最後被標記的元素記為 $0，倒數第二個被標記的記為 $1，以此類推。
如果你像下面那樣把元素按順序標記為 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ，你就可以在 concole 中獲取到 DOM 節點:
5. 用 console.time() 和 console.timeEnd() 測試循環耗時
當你想知道某些代碼的執行時間的時候這個工具將會非常有用，特別是當你定位很耗時的循環的時候。你甚至可以通過標簽來設置多個 timer 。demo 如下:
運行結果:
6.獲取函數的堆棧軌跡信息
你可能知道 JavaScript 框架會產生很多的代碼--迅速的。
它創建視圖觸發事件而且你最終會想知道函數調用是怎麽發生的。
因為 JavaScript 不是一個很結構化的語言，有時候很難完整的了解到底發生了什麽以及什麽時候發生的。 這個時候就輪到 console.trace（在終端的話就只有 trace ）出場來調試 JavaScript了 。
假設你現在想看 car 實例在第33行調用 funcZ 函數的完整堆棧軌跡信息:
第33行會輸出:
你可以看到func1調用了func2, func2又調用了func4。Func4 創建了Car的實例，然後調用了方法car.funcX，等等。
盡管你感覺你對自己的腳本代碼非常了解，這種分析依然是有用的。 比如你想優化你的代碼。 獲取到堆棧軌跡信息和一個所有相關函數的列表。每一行都是可點擊的，你可以在他們中間前後穿梭。 這感覺就像特地為你準備的菜單。
7. 格式化代碼使調試 JavaScript 變得容易
有時候你發現產品有一個問題，而 source map 並沒有部署到服務器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易讀。格式化出來的代碼在可讀性上可能不如源代碼 —— 但至少你可以觀察到發生的錯誤。點擊源代碼查看器下面的美化代碼按鈕 {} 即可。
8. 快速找到調試函數
來看看怎麽在函數中設置斷點。
通常情況下有兩種方法：
1. 在查看器中找到某行代碼並在此添加斷點
2. 在腳本中添加 debugger
這兩種方法都必須在文件中找到需要調試的那一行。
使用控制臺是不太常見的方法。在控制臺中使用 debug(funcName)，代碼會在停止在進入這裏指定的函數時。
這個操作很快，但它不能用於局部函數或匿名函數。不過如果不是這兩種情況下，這可能是調試函數最快的方法。（註意：這裏並不是在調用 console.debug 函數）。
在控制臺中輸入 debug(car.funcY)，腳本會在調試模式下，進入 car.funcY 的時候停止運行：
9. 屏蔽不相關代碼
如今，經常在應用中引入多個庫或框架。其中大多數都經過良好的測試且相對沒有缺陷。但是，調試器仍然會進入與此調試任務無關的文件。解決方案是將不需要調試的腳本屏蔽掉。當然這也可以包括你自己的腳本。 點此閱讀更多關於調試不相關代碼（http://raygun.com/blog/javascript-debugging-with-black-box/）。
10. 在復雜的調試過程中尋找重點
在更復雜的調試中，我們有時需要輸出很多行。你可以做的事情就是保持良好的輸出結構，使用更多控制臺函數，例如 Console.log，console.debug，console.warn，console.info，console.error 等等。然後，你可以在控制臺中快速瀏覽。但有時候，某些JavaScrip調試信息並不是你需要的。
現在，可以自己美化調試信息了。在調試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設置字符串，%i設置數字，%c設置自定義樣式等等，還有很多更好的console.log()使用方法。 如果使用的是單頁應用框架，可以為視圖（view）消息創建一個樣式，為模型（models），集合（collections），控制器（controllers）等創建另一個樣式。也許還可以像 wlog，clog 和 mlog 一樣發揮你的想象力！
11. 查看具體的函數調用和它的參數
在 Chrome 瀏覽器的控制臺（Console）中，你會把你的註意力集中在具體的函數上。每次這個函數被調用，它的值就會被記錄下來。
然後輸出：
這是查看將哪些參數傳遞到函數的一種很好的方法。但我必須說，如果控制臺能夠告訴我們需要多少參數，那就好了。在上面的例子中，函數1期望3個參數，但是只有2個參數被傳入。如果代碼沒有在代碼中處理，它可能會導致一個 bug 。
12. 在控制臺中快速訪問元素
在控制臺中執行 querySelector 一種更快的方法是使用美元符。$(‘css-selector’) 將會返回第一個匹配的 CSS 選擇器。$$(‘css-selector’) 將會返回所有。如果你使用一個元素超過一次，它就值得被作為一個變量。
13. Postman 很棒（但 Firefox 更快）
很多開發人員都使用 Postman 來處理 Ajax 請求。Postman 真不錯，但每次都需要打開新的瀏覽器窗口，新寫一個請求對象來測試。這確實有點兒煩人。
有時候直接使用在用的瀏覽器會更容易。
這樣的話，如果你想請求一個通過密碼保證安全的頁面時，就不再需要擔心驗證 Cookie 的問題。這就是 Firefox 中編輯並重新發送請求的方式。
打開探查器並進入網絡頁面，右鍵單擊要處理的請求，選擇編輯並重新發送。現在你想怎麽改就怎麽改。可以修改頭信息，也可以編輯參數，然後點擊重新發送即可。現在我發送了兩次同一個請求，但使用了不同的參數：
14. 節點變化時中斷
DOM 是個有趣的東西。有時候它發生了變化，但你卻並不知道為什麽會這樣。不過，如果你需要調試 JavaScript，Chrome 可以在 DOM 元素發生變化的時候暫停處理。你甚至可以監控它的屬性。在 Chrome 探查器上，右鍵點擊某個元素，並選擇中斷（Break on）選項來使用：
原文：該文是從微信公眾號：前端開發轉載的。
14 個你可能不知道的 JavaScript 調試技巧