JavaScript調(diào)試是業(yè)內(nèi)公認(rèn)的難題。但一旦你掌握技巧，了解了工具本身，便能節(jié)省一大把時(shí)間。以下16條調(diào)試技巧，可供您在下次調(diào)試JavaScript代碼時(shí)使用!

[[378944]]

這些技巧大多數(shù)都適用于Chrome和Firefox，許多技巧也可以與其他檢查員一起使用。另外，如果您想更快地找到JavaScript錯(cuò)誤，請(qǐng)嘗試Raygun Crash Reporting，它會(huì)提醒您注意錯(cuò)誤并提供堆棧跟蹤。

1.調(diào)試器

在console.log之后，調(diào)試器是我最喜歡的快速調(diào)試工具。如果放置調(diào)試器，在您的代碼行中，Chrome將在執(zhí)行時(shí)自動(dòng)在那里停止，您甚至可以將其包裝在條件句中，因此它僅在需要時(shí)運(yùn)行。

2.將對(duì)象顯示為表格

有時(shí)，您要查看一組復(fù)雜的對(duì)象。您可以console.log它們并在列表中滾動(dòng)，也可以使用console.table幫助器。它使您更輕松地查看正在處理的內(nèi)容!

將輸出：

3.嘗試所有尺寸

雖然桌上有每個(gè)移動(dòng)設(shè)備都很棒，但在現(xiàn)實(shí)世界中這是不可行的。如何調(diào)整視口的大小呢?Chrome為您提供所需的一切。跳到檢查器中，然后單擊切換設(shè)備模式 按鈕。觀看您的媒體查詢成真!

4.如何快速找到您的DOM元素

在元素面板中標(biāo)記一個(gè)DOM元素，然后在控制臺(tái)中使用它。Chrome瀏覽器檢查器會(huì)保留其歷史記錄中的最后五個(gè)元素，以便最后標(biāo)記的元素顯示為$ 0，倒數(shù)第二個(gè)標(biāo)記的元素為$ 1，依此類推。

如果按照“ item-4”，“ item-3”，“ item-2”，“ item-1”，“ item-0”的順序標(biāo)記以下項(xiàng)，則可以在控制臺(tái)中訪問這樣的DOM節(jié)點(diǎn)：

5.使用console.time()和console.timeEnd()進(jìn)行基準(zhǔn)循環(huán)

確切地知道執(zhí)行某項(xiàng)操作要花多長(zhǎng)時(shí)間可能特別有用，尤其是在調(diào)試慢循環(huán)時(shí)。您甚至可以通過為方法分配標(biāo)簽來設(shè)置多個(gè)計(jì)時(shí)器。讓我們看看它是如何工作的：

將輸出：

6.獲取函數(shù)的堆棧跟蹤

您可能知道JavaScript框架可以快速生成大量代碼。

您將擁有很多視圖并觸發(fā)許多事件，因此最終您將遇到一種情況，您想知道是什么導(dǎo)致了特定的函數(shù)調(diào)用。由于JavaScript不是一種結(jié)構(gòu)化的語言，因此有時(shí)可能難以掌握發(fā)生的情況和時(shí)間。

這是當(dāng)console.trace(或只是在控制臺(tái)中的跟蹤)派上用場(chǎng)時(shí)才能調(diào)試JavaScript的時(shí)候。想象一下，您想在car實(shí)例中看到函數(shù)調(diào)用funcZ的整個(gè)堆棧跟蹤：

將輸出：

現(xiàn)在我們可以看到func1叫做func2，它叫做func4。然后Func4 創(chuàng)建Car的實(shí)例，然后調(diào)用函數(shù)car.funcX，依此類推。即使您認(rèn)為自己非常了解腳本，這仍然非常方便。假設(shè)您要改善代碼。獲取跟蹤和所有相關(guān)功能的詳細(xì)列表。每一個(gè)都可以單擊，現(xiàn)在您可以在它們之間來回切換。就像一個(gè)菜單只適合您。

7.最小化代碼是調(diào)試JavaScript的簡(jiǎn)便方法

有時(shí)您可能在生產(chǎn)中遇到問題，而源映射并沒有完全到達(dá)服務(wù)器。不要害怕。Chrome可以將您的Javascript文件縮小為更易于閱讀的格式。該代碼不會(huì)像您的實(shí)際代碼那樣有用-但至少您可以看到正在發(fā)生的事情。單擊檢查器中源查看器下方的{}漂亮打印按鈕。

8.快速找到要調(diào)試的功能

比方說，你要設(shè)置一個(gè)斷點(diǎn)在function.The兩種最常見的方式做到這一點(diǎn)是：

1.找到你檢查線路，并添加一個(gè)斷點(diǎn)

2.在腳本中添加調(diào)試器

在這兩種解決方案，您必須手動(dòng)瀏覽文件以隔離要調(diào)試的特定行。可能不太常見的是使用控制臺(tái)。在控制臺(tái)中使用debug(funcName)，當(dāng)腳本達(dá)到您傳遞的功能時(shí)，腳本將停止。

它很快，但是缺點(diǎn)是它不適用于私有或匿名函數(shù)。否則，這可能是找到要調(diào)試的函數(shù)的最快方法。(注意：盡管命名類似，但有一個(gè)名為console.debug的函數(shù)不是同一回事。)

在控制臺(tái)中鍵入debug(car.funcY)，當(dāng)腳本獲得對(duì)car.funcY的函數(shù)調(diào)用時(shí)，該腳本將在調(diào)試模式下停止：

9.不相關(guān)的黑匣子腳本

今天，我們的Web應(yīng)用程序上經(jīng)常有一些庫和框架。它們中的大多數(shù)都經(jīng)過了良好的測(cè)試，并且相對(duì)沒有錯(cuò)誤。

但是，調(diào)試器仍會(huì)進(jìn)入與此調(diào)試任務(wù)無關(guān)的所有文件。解決方案是將不需要調(diào)試的腳本黑框。這可能還包括您自己的腳本。在本文中閱讀有關(guān)調(diào)試黑匣子的更多信息。

10.查找復(fù)雜調(diào)試中的重要內(nèi)容

在更復(fù)雜的調(diào)試中，有時(shí)我們希望輸出許多行。要使輸出保持更好的結(jié)構(gòu)，您可以做的一件事是使用更多控制臺(tái)功能，例如console.log，console.debug，console.warn，console.info，console.error等。

然后，您可以在檢查器中過濾它們。有時(shí)，當(dāng)您需要調(diào)試JavaScript時(shí)，這并不是您真正想要的。如果愿意，您可以發(fā)揮創(chuàng)意并設(shè)置信息樣式。要調(diào)試JavaScript時(shí)，請(qǐng)使用CSS并制作自己的結(jié)構(gòu)化控制臺(tái)消息：

將輸出：

在console.log()中，您可以將%s設(shè)置為字符串，將%i設(shè)置為整數(shù)，并將%c設(shè)置為自定義樣式。您可能會(huì)找到使用這些樣式的更好方法。如果使用單個(gè)頁面框架，則可能需要一種樣式用于查看消息，而另一種樣式用于模型，集合，控制器等。

11.觀察特定的函數(shù)調(diào)用和參數(shù)

在Chrome控制臺(tái)中，您可以關(guān)注特定功能。每次調(diào)用該函數(shù)時(shí)，都會(huì)使用傳入的值進(jìn)行記錄。

將輸出：

這是查看將哪些參數(shù)傳遞給函數(shù)的好方法。理想情況下，控制臺(tái)可以告訴您期望多少個(gè)參數(shù)，但是不能。在上面的示例中，func1需要三個(gè)參數(shù)，但僅傳入兩個(gè)參數(shù)。如果代碼中未對(duì)此進(jìn)行處理，則可能導(dǎo)致錯(cuò)誤。

12.快速訪問控制臺(tái)中的元素

在控制臺(tái)中執(zhí)行querySelector的更快方法是使用美元符號(hào)。$('css-selector')將返回CSS選擇器的第一個(gè)匹配項(xiàng)。$$('css-selector')將全部返回。如果您多次使用某個(gè)元素，則值得將其另存為變量。

13.Postman很棒(但是Firefox更快)

許多開發(fā)人員正在使用Postman來處理Ajax請(qǐng)求。Postman非常出色，但是打開一個(gè)新的瀏覽器窗口，編寫新的請(qǐng)求對(duì)象然后進(jìn)行測(cè)試可能會(huì)有些煩人。

有時(shí)使用瀏覽器會(huì)更容易。當(dāng)您這樣做時(shí)，如果您要發(fā)送到密碼安全頁面，則不再需要擔(dān)心身份驗(yàn)證cookie。

這是您在Firefox中編輯和重新發(fā)送請(qǐng)求的方式。打開檢查器，然后轉(zhuǎn)到“網(wǎng)絡(luò)”選項(xiàng)卡。右鍵單擊所需的請(qǐng)求，然后選擇“編輯并重新發(fā)送”。

現(xiàn)在，您可以更改任何所需的內(nèi)容。更改標(biāo)題并編輯參數(shù)，然后單擊重新發(fā)送。

下面，我兩次提出一個(gè)具有不同屬性的請(qǐng)求：

14.中斷節(jié)點(diǎn)更改

DOM可能很有趣。有時(shí)情況會(huì)發(fā)生變化，而您不知道為什么。但是，當(dāng)您需要調(diào)試JavaScript時(shí)，Chrome可讓您在DOM元素更改時(shí)暫停。

您甚至可以監(jiān)視其屬性。在Chrome Inspector中，右鍵單擊該元素，然后選擇要使用的設(shè)置中斷：

15.使用頁面速度服務(wù)

有很多服務(wù)和工具可用于審核頁面的JavaScript，并幫助您發(fā)現(xiàn)速度下降或問題。這些工具之一是Raygun Real User Monitoring。

除了查找JavaScript問題外，這還可能因其他原因而有用-加載外部腳本緩慢，不必要的CSS，圖像過大。它可以幫助您了解導(dǎo)致意外加載時(shí)間過長(zhǎng)或無法正確執(zhí)行的JavaScript問題。

您還可以衡量JavaScript性能的改進(jìn)并隨時(shí)間進(jìn)行跟蹤。

16.到處都有斷點(diǎn)

最后，久經(jīng)考驗(yàn)的真正斷點(diǎn)可以成功。嘗試針對(duì)不同情況以不同方式使用斷點(diǎn)。

您可以單擊一個(gè)元素并設(shè)置一個(gè)斷點(diǎn)，以在修改某個(gè)元素時(shí)停止執(zhí)行。您還可以進(jìn)入開發(fā)人員工具中的“調(diào)試器”選項(xiàng)卡或“源”選項(xiàng)卡(取決于瀏覽器)，并為任何特定源設(shè)置XHR斷點(diǎn)以在Ajax請(qǐng)求上停止。

在同一位置，還可以讓它在發(fā)生異常時(shí)暫停代碼執(zhí)行。您可以在瀏覽器工具中使用這些各種類型的斷點(diǎn)，以最大程度地發(fā)現(xiàn)錯(cuò)誤，而不必花費(fèi)時(shí)間在外部工具集上。