關于JavaScript調試的十來個小Tips
‘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);</code></pre>
多屏幕尺寸測試
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();</code></pre>
這邊就可以清晰地看出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();</code></pre>
禁止不相關的腳本運行
當我們開發現代網頁的時候都會用一些第三方的框架或者庫，它們幾乎都是經過測試并且相對而言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’);</code></pre>
在 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發生變化的時候它會提醒你，你可以監測屬性變化等等：
Further Reading
-
-
-
-
-
來自： https://segmentfault.com/a/1190000005624728