13個實用的JavaScript調試小技巧

debugger

除了console.log，debugger就是另外一個我很喜歡的快速調試的工具，將debugger加入代碼以後，Chrome會自動在插入它的地方中止，很像C或者Java裏面打斷點。你也能夠在一些條件控制中插入該調試語句，譬如：

if (thisThing) {
    debugger;
}

將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);

多屏幕尺寸測試

Chrome有一個很是誘人的功能就是可以模擬不一樣設備的尺寸，在Chrome的Inspector中點擊toggle device mode按鈕，而後就能夠在不一樣的設備屏幕尺寸下進行調試咯：

在Console快速選定DOM元素

在Elements選擇面板中選擇某個DOM元素而後在Console中使用該元素也是很是常見的一個操做，Chrome Inspector會緩存最後5個DOM元素在它的歷史記錄中，你能夠用相似於Shell中的$0等方式來快速關聯到元素。譬以下圖的列表中有‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’這幾個元素，你能夠這麼使用：

獲取某個函數的調用追蹤記錄

JavaScript框架極大方便了咱們的開發，可是也會帶來大量的預約義的函數，譬如建立View的、綁定事件的等等，這樣咱們就不容易追蹤咱們自定義函數的調用過程了。雖然JavaScript不是一個很是嚴謹的語言，有時候很難搞清楚到底發生了啥，特別是當你須要審閱其餘人的代碼的時候。這時候console.trace就要起做用咯，它能夠幫你進行函數調用的追蹤。譬以下面的代碼中咱們要追蹤出car對象中對於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();

這邊就能夠清晰地看出func1調用了func2，而後調用了func4，func4建立了Car的實例而後調用了car.funcX。

格式化被壓縮的代碼

有時候在生產環境下咱們發現了一些莫名奇妙的問題，而後忘了把sourcemaps放到這臺服務器上，或者在看別人家的網站的源代碼的時候，結果就看到了一坨不知道講什麼的代碼，就像下圖。Chrome爲咱們提供了一個很人性化的反壓縮工具來加強代碼的可讀性，大概這麼用：

快速定位調試函數

當咱們想在函數里加個斷點的時候，通常會選擇這麼作：

在Inspector中找到指定行，而後添加一個斷點

在腳本中添加一個debugger調用

不過這兩種方法都存在一個小問題就是都要到對應的腳本文件中而後再找到對應的行，這樣會比較麻煩。這邊介紹一個相對快捷點的方法，就是在console中使用debug(funcName)而後腳本會在指定到對應函數的地方自動中止。這種方法有個缺陷就是沒法在私有函數或者匿名函數處中止，因此仍是要因時而異：

var func1 = function() {
    func2();
};

var Car = function() {
    this.funcX = function() {
        this.funcY();
    }

this.funcY = function() {
    this.funcZ();
    }
}

var car = new Car();

禁止不相關的腳本運行

當咱們開發現代網頁的時候都會用一些第三方的框架或者庫，它們幾乎都是通過測試而且相對而言Bug較少的。不過當咱們調試咱們本身的腳本的時候也會一不當心跳到這些文件中，引起額外的調試任務。解決方案呢就是禁止這部分不須要調試的腳本運行，詳情可見這篇文章：: javascript-debugging-with-black-box。

在較複雜的調試狀況下發現關鍵元素

在一些複雜的調試環境下咱們可能要輸出不少行的內容，這時候咱們習慣性的會用console.log, console.debug, console.warn, console.info, console.error這些來進行區分，而後就能夠在Inspector中進行過濾。不過有時候咱們仍是但願可以自定義顯示樣式，你能夠用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 來表明自定義的樣式。

監測指定函數的調用與參數

在Chrome中能夠監測指定函數的調用狀況以及參數：

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

這種方式可以讓你實時監控到底啥參數被傳入到了指定函數中。

Console中使用$進行元素查詢

在Console中也可使用來進行相似於querySelector那樣基於CSS選擇器的查詢，(‘css-selector’) 會返回知足匹配的第一個元素，而$$(‘css-selector’) 會返回所有匹配元素。注意，若是你會屢次使用到元素，那麼別忘了將它們存入變量中。

Postman

不少人習慣用Postman進行API調試或者發起Ajax請求，不過別忘了你瀏覽器自帶的也能作這個，而且你也不須要擔憂啥認證啊這些，由於Cookie都是自帶幫你傳送的，這些只要在network這個tab裏就能進行，大概這樣子：

DOM變化檢測

DOM有時候仍是很操蛋的，有時候壓根不知道啥時候就變了，不過Chrome提供了一個小的功能就是當DOM發生變化的時候它會提醒你，你能夠監測屬性變化等等：