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

這些技巧大多數(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，依此類(lèi)推,。

如果按照“ item-4”,，“ item-3”，“ item-2”,，“ item-1”，“ item-0”的順序標(biāo)記以下項(xiàng),，則可以在控制臺(tái)中訪問(wèn)這樣的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í)。您甚至可以通過(guò)為方法分配標(biāo)簽來(lái)設(shè)置多個(gè)計(jì)時(shí)器,。讓我們看看它是如何工作的：

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

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

您將擁有很多視圖并觸發(fā)許多事件，因此最終您將遇到一種情況,，您想知道是什么導(dǎo)致了特定的函數(shù)調(diào)用,。由于JavaScript不是一種結(jié)構(gòu)化的語(yǔ)言，因此有時(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,，依此類(lèi)推,。即使您認(rèn)為自己非常了解腳本，這仍然非常方便,。假設(shè)您要改善代碼,。獲取跟蹤和所有相關(guān)功能的詳細(xì)列表,。每一個(gè)都可以單擊，現(xiàn)在您可以在它們之間來(lái)回切換,。就像一個(gè)菜單只適合您,。

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

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

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

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

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

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

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

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

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

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

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

但是，調(diào)試器仍會(huì)進(jìn)入與此調(diào)試任務(wù)無(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等。

然后,，您可以在檢查器中過(guò)濾它們,。有時(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è)頁(yè)面框架,，則可能需要一種樣式用于查看消息，而另一種樣式用于模型,，集合,，控制器等。

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.快速訪問(wèn)控制臺(tái)中的元素

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

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

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

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

這是您在Firefox中編輯和重新發(fā)送請(qǐng)求的方式。打開(kāi)檢查器,，然后轉(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.使用頁(yè)面速度服務(wù)

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

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

您還可以衡量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)入開(kāi)發(fā)人員工具中的“調(diào)試器”選項(xiàng)卡或“源”選項(xiàng)卡(取決于瀏覽器),，并為任何特定源設(shè)置XHR斷點(diǎn)以在Ajax請(qǐng)求上停止。

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