10個JavaScript調試技巧，幫你更好、更快地調試代碼！

調試技巧，在任何一項技術研發中都可謂是必不可少的技能。掌握各種調試技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位問題、降低故障概率、幫助分析邏輯錯誤等等。

而在互聯網前端開發越來越重要的今天，如何在前端開發中降低開發成本，提升工作效率，掌握前端開發調試技巧尤為重要。

下面小編就分享一些實用且聰明的JavaScript調試技巧，希望能讓大家調試自己代碼的時候更加從容自信。

1、不要使用 alert

首先， alert只能打印出字符串，如果打印的對象不是 String，則會調用 toString()方法將該對象轉成字符串（比如轉成 [object Object]這種），所以除非你打印 String類型的對象，其他什么信息都獲取不到。其次， alert會阻塞UI和javascript的執行，必須點擊’OK’按鈕才能繼續，非常低效。所以，喜歡使用 alert的同學可以改改這個習慣了。

2、學會使用 console.time

有時候我們想知道一段代碼的性能或者一個異步方法需要運行多久，這時候需要用到定時器，JavaScript提供了現成的 console.time方法，例如：

3、使用 debugger打斷點

有時候我們需要打斷點進行單步調試，一般會選擇在瀏覽器控制臺直接打斷點，但這樣還需要先去Sources里面找到源碼，然后再找到需要打斷點的那行代碼，比較費時間。使用 debugger關鍵詞，我們可以直接在源碼中定義斷點，方便很多，比如：

4、把 objects 輸出成表格

有時候你可能有一堆對象需要查看。你可以用 console.log 把每一個對象都輸出出來，你也可以用 console.table 語句把它們直接輸出為一個表格！

輸出結果:

5、如何快速定位 DOM 元素

在元素面板上標記一個 DOM 元素并在 concole 中使用它。Chrome Inspector 的歷史記錄保存最近的五個元素，最后被標記的元素記為 $0，倒數第二個被標記的記為 $1，以此類推。

如果你像下面那樣把元素按順序標記為 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ，你就可以在 concole 中獲取到 DOM 節點:

6、節點變化時中斷

DOM 是個有趣的東西。有時候它發生了變化，但你卻并不知道為什么會這樣。不過，如果你需要調試 JavaScript，Chrome 可以在 DOM 元素發生變化的時候暫停處理。你甚至可以監控它的屬性。在 Chrome 探查器上，右鍵點擊某個元素，并選擇中斷（Break on）選項來使用：

7、在控制臺中快速訪問元素

在控制臺中執行 querySelector 一種更快的方法是使用美元符。$(‘css-selector’)? 將會返回第一個匹配的 CSS 選擇器。$$(‘css-selector’) 將會返回所有。如果你使用一個元素超過一次，它就值得被作為一個變量。

8、查看具體的函數調用和它的參數

在 Chrome 瀏覽器的控制臺（Console）中，你會把你的注意力集中在具體的函數上。每次這個函數被調用，它的值就會被記錄下來。

然后輸出：

9、格式化代碼使調試 JavaScript 變得容易

有時候你發現產品有一個問題，而 source map 并沒有部署到服務器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易讀。格式化出來的代碼在可讀性上可能不如源代碼 —— 但至少你可以觀察到發生的錯誤。點擊源代碼查看器下面的美化代碼按鈕 {} 即可。

10、用 console.time() 和 console.timeEnd() 測試循環耗時

當你想知道某些代碼的執行時間的時候這個工具將會非常有用，特別是當你定位很耗時的循環的時候。你甚至可以通過標簽來設置多個 timer 。demo 如下:

運行結果:

調試，是在項目開發中非常重要的環節，熟練掌握各種調試手段，定當為你的職業發展帶來諸多利益。但是，在如此多的調試手段中，如何選擇一個適合自己當前應用場景的，這需要經驗，需要不斷嘗試積累。

云和數據Web前端開發課程正在火熱招生，真實企業項目實戰教學，國際名師、一線專家親自授課，“X+12”一站式職業教育體系，助你更快一步成為技術大牛！