本文作者：技術(shù)學(xué)派，轉(zhuǎn)自：https://www.toutiao.com/a6586879260789572109/

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

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

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

1. ‘debugger;’

‘debugger’ 是 console.log 之外最好的調(diào)試工具，簡(jiǎn)單暴力。只要把它寫(xiě)到代碼里，Chrome 運(yùn)行的時(shí)候就會(huì)自動(dòng)自動(dòng)停在那。甚至可以用條件語(yǔ)句把它包裹起來(lái)，這樣就可以在需要的時(shí)候才執(zhí)行它。也是一款非常好用的調(diào)試工具了。

if (thisThing) {
	debugger;
}

2. 把 objects 輸出成表格

很多的時(shí)候，你可能會(huì)有一堆對(duì)象需要查看。可以用console.log把每一個(gè)對(duì)象都輸出出來(lái)，也可以用console.table語(yǔ)句直接把所有的對(duì)象都直接輸出成為一個(gè)表格。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é)果：

3. 試遍所有的尺寸

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

4. 如何快速定位 DOM 元素

在元素面板上標(biāo)記一個(gè) DOM 元素并在 concole 中使用它。Chrome Inspector 的歷史記錄保存最近的五個(gè)元素，最后被標(biāo)記的元素記為 $0，倒數(shù)第二個(gè)被標(biāo)記的記為 $1，以此類(lèi)推。

如果你像下面那樣把元素按順序標(biāo)記為 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ，你就可以在 concole 中獲取到 DOM 節(jié)點(diǎn)：

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

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

console.time('Timer1');

var items = [];

for(var i = 0; i < 100000; i++){

items.push({index: i});

}

console.timeEnd('Timer1');

運(yùn)行結(jié)果：

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

在使用JavaScript框架的時(shí)候會(huì)產(chǎn)生很多的代碼。

它創(chuàng)建視圖觸發(fā)事件而且最終會(huì)想知道函數(shù)調(diào)用是怎么發(fā)生的。

因?yàn)?JavaScript 不是一個(gè)很結(jié)構(gòu)化的語(yǔ)言，有時(shí)候很難完整的了解到底發(fā)生了什么以及什么時(shí)候發(fā)生的。 這個(gè)時(shí)候就輪到 console.trace（在終端的話就只有 trace ）出場(chǎng)來(lái)調(diào)試 JavaScript了 。

假設(shè)現(xiàn)在想看 car 實(shí)例在第33行調(diào)用 funcZ 函數(shù)的完整堆棧軌跡信息:

<script type="text/javascript">
	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();
	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();
</script>

第33行會(huì)輸出：

在這里我們可以看見(jiàn)到func1調(diào)用了func2， func2又調(diào)用了func4。Func4 創(chuàng)建了Car的實(shí)例，然后調(diào)用了方法car.funcX，等等。

盡管我們感覺(jué)我們已經(jīng)對(duì)自己的腳本代碼非常了解，但是這種分析依然有用。比如優(yōu)化代碼。獲取到堆棧軌跡信息和一個(gè)所有相關(guān)函數(shù)的列表。每一行都是可點(diǎn)擊的，并且可以在他們中間前后穿梭。這種感覺(jué)非常的棒。

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

有時(shí)候你發(fā)現(xiàn)產(chǎn)品有一個(gè)問(wèn)題，而 source map 并沒(méi)有部署到服務(wù)器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易讀。格式化出來(lái)的代碼在可讀性上可能不如源代碼 —— 但至少你可以觀察到發(fā)生的錯(cuò)誤。點(diǎn)擊源代碼查看器下面的美化代碼按鈕 {} 即可。

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

我們來(lái)看看怎么在函數(shù)中設(shè)置斷點(diǎn)。

通常情況下有兩種方法：

1. 在查看器中找到某行代碼并在此添加斷點(diǎn)
2. 在腳本中添加 debugger

這兩種方法都必須在文件中找到需要調(diào)試的那一行。

使用控制臺(tái)是不太常見(jiàn)的方法。在控制臺(tái)中使用 debug(funcName)，代碼會(huì)在停止在進(jìn)入這里指定的函數(shù)時(shí)。

這個(gè)操作很快，但它不能用于局部函數(shù)或匿名函數(shù)。不過(guò)如果不是這兩種情況下，這可能是調(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();

在控制臺(tái)中輸入 debug(car.funcY)，腳本會(huì)在調(diào)試模式下，進(jìn)入 car.funcY 的時(shí)候停止運(yùn)行：

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

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

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

在更復(fù)雜的調(diào)試中，我們有時(shí)需要輸出很多行。你可以做的事情就是保持良好的輸出結(jié)構(gòu)，使用更多控制臺(tái)函數(shù)，例如 console.log，console.debug，console.warn，console.info，console.error 等等。然后，你可以在控制臺(tái)中快速瀏覽。但有時(shí)候，某些JavaScrip調(diào)試信息并不是你需要的。

現(xiàn)在，可以自己美化調(diào)試信息了。在調(diào)試JavaScript時(shí)，可以使用CSS并自定義控制臺(tái)信息：

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設(shè)置字符串，%i設(shè)置數(shù)字，%c設(shè)置自定義樣式等等，還有很多更好的console.log()使用方法。 如果使用的是單頁(yè)應(yīng)用框架，可以為視圖（view）消息創(chuàng)建一個(gè)樣式，為模型（models），集合（collections），控制器（controllers）等創(chuàng)建另一個(gè)樣式。也許還可以像 wlog，clog 和 mlog 一樣發(fā)揮小伙伴們的想象力！

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

在 Chrome 瀏覽器的控制臺(tái)（Console）中，大家的注意力都集中在具體的函數(shù)上。每次這個(gè)函數(shù)被調(diào)用，它的值就會(huì)被記錄下來(lái)。

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

//....

};

然后輸出：

這是查看將哪些參數(shù)傳遞到函數(shù)的一種很好的方法。但在這里小編要說(shuō)明，如果控制臺(tái)能夠告訴我們需要多少參數(shù)，那就好了。在上面的例子中，函數(shù)1期望3個(gè)參數(shù)，但是只有2個(gè)參數(shù)被傳入。如果代碼沒(méi)有在代碼中處理，它可能會(huì)導(dǎo)致一個(gè) bug 。

12. 在控制臺(tái)中快速訪問(wèn)元素

在控制臺(tái)中執(zhí)行 querySelector 一種更快的方法是使用美元符。$(‘css-selector’) 將會(huì)返回第一個(gè)匹配的 CSS 選擇器。$$(‘css-selector’) 將會(huì)返回所有。如果你使用一個(gè)元素超過(guò)一次，它就值得被作為一個(gè)變量。

13. Postman 很棒（但 Firefox 更快）

很多開(kāi)發(fā)人員都使用 Postman 來(lái)處理 Ajax 請(qǐng)求。Postman 真不錯(cuò)，但每次都需要打開(kāi)新的瀏覽器窗口，新寫(xiě)一個(gè)請(qǐng)求對(duì)象來(lái)測(cè)試。這確實(shí)有點(diǎn)兒煩人。

有時(shí)候直接使用在用的瀏覽器會(huì)更容易。

這樣的話，如果你想請(qǐng)求一個(gè)通過(guò)密碼保證安全的頁(yè)面時(shí)，就不再需要擔(dān)心驗(yàn)證 Cookie 的問(wèn)題。這就是 Firefox 中編輯并重新發(fā)送請(qǐng)求的方式。

打開(kāi)探查器并進(jìn)入網(wǎng)絡(luò)頁(yè)面，右鍵單擊要處理的請(qǐng)求，選擇編輯并重新發(fā)送。現(xiàn)在你想怎么改就怎么改。可以修改頭信息，也可以編輯參數(shù)，然后點(diǎn)擊重新發(fā)送即可。

現(xiàn)在我發(fā)送了兩次同一個(gè)請(qǐng)求，但使用了不同的參數(shù)：

14. 節(jié)點(diǎn)變化時(shí)中斷

DOM 是個(gè)有趣的東西。有時(shí)候它發(fā)生了變化，但你卻并不知道為什么會(huì)這樣。不過(guò)，如果你需要調(diào)試 JavaScript，Chrome 可以在 DOM 元素發(fā)生變化的時(shí)候暫停處理。你甚至可以監(jiān)控它的屬性。在 Chrome 探查器上，右鍵點(diǎn)擊某個(gè)元素，并選擇中斷（Break on）選項(xiàng)來(lái)使用：

總結(jié)

以上是生活随笔為你收集整理的前端程序员不知道的14个JavaScript调试技巧，你知道几个？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。