技術(shù)領(lǐng)域總是充滿著神秘的未知和挑戰(zhàn)餐弱，有趣又令人不能自拔。就像 JavaScript妓柜，即使是每天使用它進(jìn)行開發(fā)交互的開發(fā)人員拌倍，而語言的某些部分仍然未被開發(fā)赂鲤。

了解工具可以使工具最大限度的幫助你完成任務(wù)。盡管JavaScript的調(diào)試非常麻煩柱恤，但在掌握了技巧 (tricks) 的情況下数初，依然可以用盡量少的的時間解決這些錯誤 (errors) 和問題 (bugs) 。

下面小編列出了14個關(guān)于JavaScript的調(diào)試技巧梗顺。雖然調(diào)試技巧也可以用在別的檢查工具上泡孩，但大部分的技巧還是用在 Chrome Inspector 和 Firefox 上的。

1.'debugger'

'debugger'是 console.log 之外最好的調(diào)試工具寺谤，簡單暴力仑鸥。只要把它寫到代碼里吮播，Chrome 運行的時候就會自動自動停在那。甚至可以用條件語句把它包裹起來锈候，這樣就可以在需要的時候才執(zhí)行它。也是一款非常好用的調(diào)試工具了敞贡。

if (thisThing) {
debugger;
}

2.把 objects 輸出成表格

很多時候泵琳，你可能會有一堆對象需要查看√芤郏可以用 console.log 把每一個對象都輸出出來获列，也可以用console.table語句直接把所有對象都直接輸出成一個表格。demo如下：

var animals = [
{ animal: 'Horse', name: 'Henry', age: 43 },
{ animal: 'Dog', name: 'Fred', age: 13 },
{ animal: 'Cat', name: 'Frodo', age: 18 }
];
console.table(animals);

輸出結(jié)果：

image.png

3.試遍所有的尺寸

雖然把各種各樣的手機(jī)都擺在桌子上看起來很酷蛔垢，但卻也不現(xiàn)實击孩。但是，瀏覽器內(nèi)卻提供了你所需要的一切鹏漆。進(jìn)入檢查面板點擊‘切換設(shè)備模式’按鈕巩梢。這樣，就可以在窗口內(nèi)調(diào)整視窗的大小艺玲。

4.如何快速定位 DOM 元素

在元素面板上標(biāo)記一個 DOM 元素并在 console中使用它括蝠。Chrome Inspector的歷史記錄保存最近的五個元素，最后被標(biāo)記的元素為0饭聚，倒數(shù)第二個被標(biāo)記的為1,以此類推忌警。

image.png

5.用 console.time()和console.timeEnd()測試循環(huán)耗時

當(dāng)你想知道某些代碼的執(zhí)行時間的時候這個工具將會非常有用，特別是當(dāng)你定位很耗時的循環(huán)的時候秒梳。你是指可以通過標(biāo)簽開設(shè)置多個 timer法绵。demo 如下：

console.time('Timer1');
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd('Timer1');

運行結(jié)果：

image.png

6.獲取函數(shù)的堆棧軌跡信息

在使用JavaScript框架的時候會產(chǎn)生很多的代碼。
它創(chuàng)建視圖觸發(fā)事件而且最終會想知道函數(shù)調(diào)用是怎么發(fā)生的酪碘。
因為 JavaScript 不是一個很結(jié)構(gòu)化的語言朋譬，有時候很難完整的了解到底發(fā)生了什么以及什么時候發(fā)生的。 這個時候就輪到 console.trace（在終端的話就只有 trace ）出場來調(diào)試 JavaScript了 兴垦。

7.格式化代碼使調(diào)試 JavaScript 變得容易

有時候你發(fā)現(xiàn)產(chǎn)品有一個問題此熬，而 source map 并沒有部署到服務(wù)器。不要害怕滑进。Chrome 可以格式化 JavaScript 文件犀忱，使之易讀。格式化出來的代碼在可讀性上可能不如源代碼 —— 但至少你可以觀察到發(fā)生的錯誤扶关。點擊源代碼查看器下面的美化代碼按鈕 {} 即可阴汇。

image.png

8.快速找到調(diào)試函數(shù)

我們來看看怎么在函數(shù)中設(shè)置斷點。

通常情況下有兩種方法：

1. 在查看器中找到某行代碼并在此添加斷點
2. 在腳本中添加 debugger
   這兩種方法都必須在文件中找到需要調(diào)試的那一行节槐。

使用控制臺是不太常見的方法搀庶。在控制臺中使用 debug(funcName)拐纱，代碼會在停止在進(jìn)入這里指定的函數(shù)時。

這個操作很快哥倔，但它不能用于局部函數(shù)或匿名函數(shù)秸架。不過如果不是這兩種情況下，這可能是調(diào)試函數(shù)最快的方法咆蒿。（注意：這里并不是在調(diào)用 console.debug 函數(shù)）东抹。

var func1 = function() {
func2();
};
var Car = function() {
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
}
var car = new Car();

在控制臺中輸入 debug(car.funcY)，腳本會在調(diào)試模式下沃测，進(jìn)入 car.funcY 的時候停止運行：

image.png

9.屏蔽不相關(guān)代碼

如今缭黔，經(jīng)常在應(yīng)用中引入多個庫或框架。其中大多數(shù)都經(jīng)過良好的測試且相對沒有缺陷蒂破。但是馏谨，調(diào)試器仍然會進(jìn)入與此調(diào)試任務(wù)無關(guān)的文件。解決方案是將不需要調(diào)試的腳本屏蔽掉附迷。當(dāng)然這也可以包括你自己的腳本惧互。 點此閱讀更多關(guān)于調(diào)試不相關(guān)代碼（http://raygun.com/blog/javascript-debugging-with-black-box/）。

10. 在復(fù)雜的調(diào)試過程中尋找重點

在更復(fù)雜的調(diào)試中喇伯，我們有時需要輸出很多行壹哺。你可以做的事情就是保持良好的輸出結(jié)構(gòu)，使用更多控制臺函數(shù)艘刚，例如 console.log管宵，console.debug，console.warn攀甚，console.info箩朴，console.error 等等。然后秋度，你可以在控制臺中快速瀏覽炸庞。但有時候，某些JavaScrip調(diào)試信息并不是你需要的荚斯。

現(xiàn)在埠居，可以自己美化調(diào)試信息了。在調(diào)試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’);

輸出：

image.png

例如：
在console.log()中滥壕， 可以用%s設(shè)置字符串，%i設(shè)置數(shù)字兽泣，%c設(shè)置自定義樣式等等绎橘，還有很多更好的console.log()使用方法。 如果使用的是單頁應(yīng)用框架唠倦，可以為視圖（view）消息創(chuàng)建一個樣式称鳞，為模型（models）涮较，集合（collections），控制器（controllers）等創(chuàng)建另一個樣式冈止。也許還可以像 wlog狂票，clog 和 mlog 一樣發(fā)揮小伙伴們的想象力！

11. 查看具體的函數(shù)調(diào)用和它的參數(shù)

在 Chrome 瀏覽器的控制臺（Console）中熙暴，大家的注意力都集中在具體的函數(shù)上闺属。每次這個函數(shù)被調(diào)用，它的值就會被記錄下來怨咪。

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

然后輸出：

image.png

12.在控制臺中快速訪問元素

在控制臺中執(zhí)行 querySelector 一種更快的方法是使用美元符屋剑。$(‘css-selector’) 將會返回第一個匹配的 CSS 選擇器润匙。$$(‘css-selector’) 將會返回所有诗眨。如果你使用一個元素超過一次，它就值得被作為一個變量孕讳。

image.png

13. Postman 很棒（但 Firefox 更快）

很多開發(fā)人員都使用 Postman 來處理 Ajax 請求匠楚。Postman 真不錯，但每次都需要打開新的瀏覽器窗口厂财，新寫一個請求對象來測試芋簿。這確實有點兒煩人。
有時候直接使用在用的瀏覽器會更容易璃饱。
這樣的話与斤，如果你想請求一個通過密碼保證安全的頁面時，就不再需要擔(dān)心驗證 Cookie 的問題荚恶。這就是 Firefox 中編輯并重新發(fā)送請求的方式撩穿。
打開探查器并進(jìn)入網(wǎng)絡(luò)頁面，右鍵單擊要處理的請求谒撼，選擇編輯并重新發(fā)送∈彻眩現(xiàn)在你想怎么改就怎么改±保可以修改頭信息抵皱，也可以編輯參數(shù)，然后點擊重新發(fā)送即可辩蛋。
現(xiàn)在我發(fā)送了兩次同一個請求呻畸，但使用了不同的參數(shù)：

image.png

14.節(jié)點變化時中斷

DOM 是個有趣的東西。有時候它發(fā)生了變化悼院，但你卻并不知道為什么會這樣擂错。不過，如果你需要調(diào)試 JavaScript樱蛤，Chrome 可以在 DOM 元素發(fā)生變化的時候暫停處理钮呀。你甚至可以監(jiān)控它的屬性剑鞍。在 Chrome 探查器上，右鍵點擊某個元素爽醋，并選擇中斷（Break on）選項來使用：

image.png