【轉載】14個你可能不知道的 JavaScript 調試技巧

瞭解你的工具能夠極大的幫助你完成任務。儘管 JavaScript 的調試很是麻煩，但在掌握了技巧 (tricks) 的狀況下，你依然能夠用盡可能少的的時間解決這些錯誤 (errors) 和問題 (bugs) 。

咱們會列出14個你可能不知道的調試技巧, 可是一旦知道了，你就會火燒眉毛的想在下次須要調試 JavaScript 代碼的時候使用它們！

雖然許多技巧也能夠用在別的檢查工具上，但大部分的技巧是用在 Chrome Inspector 和 Firefox 上的。

1. ‘debugger;’

‘debugger’ 是 console.log 以外我最喜歡的調試工具，簡單暴力。只要把它寫到代碼裏，Chrome 運行的時候就會自動自動停在那。你甚至能夠用條件語句把它包裹起來，這樣就能夠在須要的時候才執行它。

    if (thisThing) {

        debugger;

    }

 

2. 把 objects 輸出成表格

有時候你可能有一堆對象須要查看。你能夠用 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 瀏覽器提供了你所須要的一切。 進入檢查面板點擊 ‘切換設備模式’ 按鈕，這樣你就能夠調整視窗的大小了！

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 以下:

    console.time('Timer1');

    var items = [];

    for(var i = 0; i < 100000; i++){

       items.push({index: i});

    }

    console.timeEnd('Timer1');

 

運行結果:

6.獲取函數的堆棧軌跡信息

你可能知道 JavaScript 框架會產生不少的代碼--迅速的。

它建立視圖觸發事件並且你最終會想知道函數調用是怎麼發生的。

由於 JavaScript 不是一個很結構化的語言，有時候很難完整的瞭解到底發生了什麼以及何時發生的。 這個時候就輪到 console.trace（在終端的話就只有 trace ）出場來調試 JavaScript了 。

假設你如今想看 car 實例在第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調用了func2, func2又調用了func4。Func4 建立了Car的實例，而後調用了方法car.funcX，等等。

儘管你感受你對本身的腳本代碼很是瞭解，這種分析依然是有用的。 好比你想優化你的代碼。 獲取到堆棧軌跡信息和一個全部相關函數的列表。每一行都是可點擊的，你能夠在他們中間先後穿梭。 這感受就像特意爲你準備的菜單。

7. 格式化代碼使調試 JavaScript 變得容易

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

8. 快速找到調試函數

來看看怎麼在函數中設置斷點。

一般狀況下有兩種方法：

1. 在查看器中找到某行代碼並在此添加斷點

2. 在腳本中添加 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();

 

在控制檯中輸入 debug(car.funcY)，腳本會在調試模式下，進入 car.funcY 的時候中止運行：

9.  屏蔽不相關代碼

現在，常常在應用中引入多個庫或框架。其中大多數都通過良好的測試且相對沒有缺陷。可是，調試器仍然會進入與此調試任務無關的文件。解決方案是將不須要調試的腳本屏蔽掉。固然這也能夠包括你本身的腳本。 點此（https://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）中，你會把你的注意力集中在具體的函數上。每次這個函數被調用，它的值就會被記錄下來。

    var func1 = function(x, y, z) {

    //....

    };

 

而後輸出： 

這是查看將哪些參數傳遞到函數的一種很好的方法。但我必須說，若是控制檯可以告訴咱們須要多少參數，那就行了。在上面的例子中，函數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）選項來使用：