調試JavaScript的權威指南

了解如何使用瀏覽器DevTools調試器調試JavaScript

調試是程序員活動的核心技能之一。

有時我們會盡力而為，但是程序無法正常運行，例如，它崩潰了，速度很慢或正在打印錯誤的信息。

當您編寫的程序表現不理想時，您會怎麼做？

您開始調試它。

找出錯誤可能在哪裡

第一步始終是查看正在發生的事情，並嘗試確定問題的根源。在環境中有問題嗎？您提供給程序的輸入是否有問題？是否由於內存使用過多而導致一次崩潰？還是每次您運行它時都會發生？

這些都是解決問題時開始朝正確方向發展的關鍵信息。

一旦知道了錯誤的來源，就可以開始檢查代碼的特定部分。

閱讀代碼

至少在工具方面，最簡單的調試方法是閱讀您編寫的代碼。大聲從我們自己的聲音中聽到的聲音有些不可思議的事情，而您在靜默地閱讀時卻不會發生。

我經常以這種方式發現問題。

使用控制台

如果閱讀該代碼對您沒有任何幫助，那麼下一個邏輯步驟是開始向您的代碼中添加幾行代碼，以使您有所了解。

在JavaScript前端代碼中，您經常要做的是使用alert()和console.log（及其酷友）。

考慮這一行：

const a = calculateA()
const b = calculateB()
const result = a + b

不知何故無法正確計算結果，因此您可以先添加alert(a)和alert(b)在計算結果之前，瀏覽器在執行代碼時將打開兩個警報面板。

const a = calculateA()
const b = calculateB()
alert(a)
alert(b)
const result = a + b

如果您要傳遞給它，這會很好alert()是字符串或數字。一旦有了數組或對象，事情就變得太複雜了alert()，您可以使用控制台API。從...開始console.log()：

const a = calculateA()
const b = calculateB()
console.log(a)
console.log(b)
const result = a + b

該值顯示在瀏覽器開發人員工具的JavaScript控制台中。為了方便起見，我在此處解釋如何在Chrome DevTools中進行調試，但是一般概念適用於所有瀏覽器，但在支持的功能方面有所不同。

見Chrome DevTools的詳細概述

Chrome開發工具

結果console.log()調用將打印到JavaScript控制台。這是每個瀏覽器或多或少通用的工具：

Browser console

該工具非常強大，可讓您打印複雜的對像或數組，並可以檢查它們的每個屬性。

在裡面控制台API發布後，您將看到使用它的所有選項和詳細信息，因此在此我不解釋所有詳細信息。

調試器

調試器是瀏覽器開發人員工具中功能最強大的工具，可以在資料來源控制板：

The debugger

屏幕的頂部顯示文件導航器。

您可以選擇任何文件並在右側檢查它。這對於設置斷點非常重要，我們將在後面看到。

底部是實際的調試器。

斷點

當瀏覽器加載頁面時，將執行JavaScript代碼，直到遇到斷點為止。

此時，執行被暫停，您可以檢查所有有關正在運行的程序。

您可以檢查變量值，然後一次只恢復一行程序的執行。

但是首先，什麼是斷點？簡單來說，斷點就是breakpoint指令放在您的代碼中。當瀏覽器遇到它時，它停止。

在開發時，這是一個不錯的選擇。另一個選項是在“源”面板中打開文件，然後單擊要添加斷點的行上的數字：

Added breakpoint

再次單擊斷點將其刪除。

添加斷點後，您可以重新加載頁面，並且代碼在找到斷點時將在該執行點停止。

添加斷點時，您可以在斷點面板form.js在線的7有斷點。您可以在那裡查看所有斷點，並暫時禁用它們。

還有其他類型的斷點：

XHR /獲取斷點：在發送任何網絡請求時觸發
DOM斷點：在DOM元素更改時觸發
事件偵聽器斷點：在發生某些事件（如鼠標單擊）時觸發

Breakpoints

範圍

在此示例中，我在事件監聽器中設置了一個斷點，因此我必須提交一個表單來觸發它：

Triggered breakpoint

現在，將打印範圍內的所有變量及其各自的值。您可以通過雙擊來編輯這些變量。

觀察變量和表達式

權利範圍面板上有手錶控制板。

它有一個+您可以用來添加任何表達式的按鈕。例如添加name將打印name在示例中為可變值Flavio。你可以加name.toUpperCase()它會打印FLAVIO：

Watch expressions

恢復執行

現在，自斷點停止執行以來，所有腳本均已暫停。

在“在斷點處暫停”標語上方有一組按鈕，可讓您更改此狀態。

第一個是藍色。單擊它可恢復正常腳本執行。

第二個按鈕是跨過，它將繼續執行直到下一行，然後再次停止。

下一個按鈕執行步入操作：進入正在執行的功能，讓您了解其詳細信息。

走出去相反：返回到調用此函數的外部函數。

這些是調試期間控制流的主要方法。

編輯腳本

在此devtools屏幕上，您可以編輯任何腳本，也可以在腳本停止執行時進行編輯。只需編輯文件，然後在Mac上按cmd-S或在Windows / Linux上按ctrl-S。

當然，除非您在本地工作並在devtools（一個更高級的主題）中設置工作區，否則所做的更改不會持久保存到磁盤上。

檢查調用堆棧

這調用堆棧很高興看到您深入到JavaScript代碼中有多少個功能級別。通過單擊每個函數名稱，它也可以使您在堆棧中向上移動：

Call stack

黑盒腳本

例如，通常您在不想“涉足”的庫中工作時，您會信任它們，並且不想在調用堆棧中看到它們的代碼。就像上面的情況一樣validator.min.js，用於電子郵件驗證。

我相信它做得很好，所以我可以在調用堆棧中右鍵單擊它，然後按黑盒腳本。從那時起，就不可能進入此腳本代碼，而您可以快樂地處理自己的應用程序代碼。

使用瀏覽器devtools調試Node.js

由於Node.js基於Chrome的同一引擎構建，v8，您可以鏈接2並使用Chrome DevTools來檢查Node.js應用程序的執行情況。

打開你的終端並運行

node --inspect

node-inspect

然後在Chrome中輸入以下網址：about://inspect。

node-link-browser

單擊“節點”目標旁邊的“打開用於節點的專用DevTools”鏈接，您將可以在瀏覽器DevTools中訪問Node.js：

node-console

確保單擊該按鈕，而不單擊下面的檢查鏈接，因為它在我們重新啟動時會自動重新連接到Node.js實例-非常方便！

免費下載我的JavaScript初學者手冊