JavaScript調試方法
一、console.log和debugger調試方法
這兩種方法使我們一般最喜歡的調試方法
一旦執行到這行代碼，Chrome 會在執行時自動停止。
你甚至可以使用條件語句加上判斷，這樣可以只在你需要的時候運行。
if (thisThing) {
debugger;
}
這兩種方法還有一個弊端，有人形容他們兩的詞語用到了骯臟，哈哈哈哈哈
（之所以形容他骯臟主要是因為調試完後還要刪除這段代碼）
二、console.table方法進行調試
當遇到一個對象時，我們需要看到他的值，一般我們會使用到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);
三、console.time和console.end方法
要確切地知道某段代碼需要執行多長時間，尤其是在調試慢循環時，可能會非常有用。
您甚至可以通過為該方法分配標簽來設置多個定時器。讓我們看看它是如何工作的：
console.time(‘Timer1‘);
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd(‘Timer1‘);
四、console.trace方法——獲取函數的堆棧跟蹤信息
函數執行的順序——方便自己了解自己的代碼，像是一個特定的為自己定制的菜單
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();
五、debug(funcName)——快速查找要調試的函數
在控制臺中使用 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();
六、Blackbox script——在調試過程中屏蔽不相關的代碼
現在，我們經常在應用中引入多個庫或框架
其中大多數都經過良好的測試且相對沒有陷阱。
但是，調試器仍然會進入與調試任務無關的文件。
解決方案是屏蔽不需要調試的腳本。當然也可以包括你自己的腳本。
七、在復雜的調試過程中尋找重點
在更復雜的調試中，我們有時希望輸出很多行。
你可以做的事情就是使用更多控制臺函數來保持良好的輸出結構，
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 一樣發揮想象力！
JavaScript調試方法