調試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初學者手冊


更多js教程: