點選上方“中興開發者社群”，關注我們

每天讀一篇一線開發者原創好文

來自：某熊的全棧之路 - SegmentFault

原文：https://raygun.com/blog/2016/05/debug-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 發生變化的時候它會提醒你，你可以監測屬性變化等等：