技術文章 » 超實用的JavaScript偵錯技巧

超實用的JavaScript偵錯技巧

2022-02-28 19:01:34
本篇文章給大家帶來了關於中的相關知識，其中主要介紹了JavaScript的偵錯技巧，包括了Sources面板、設定斷點等相關問題，希望對大家有幫助。

相關推薦：

作為前端開發，我們會經常使用 console.log() 來偵錯程式中的問題。雖然這種方式也能解決一部分問題，但是它的效率不如能執行逐步偵錯的工具。本文就來學習一下如何使用 Google Chrome developer tools 輕鬆偵錯 JavaScript 程式碼。

多數瀏覽器都提供了DevTools 供我們偵錯 JavaScript 應用程式，並且它們的使用方式類似，只要我們學會了如何在一個瀏覽器上使用偵錯工具，就很容易在其他瀏覽器上使用它。

以下就以 Greet Me 程式為例，這個程式非常簡單，只需輸入名字和願望，最後會輸出一句話：

6cfb7ef8addfe10a894255dae09d85e1.png

當輸入兩個表單值之後，「願望」部分沒有正確列印，而是列印出了NaN。程式碼線上偵錯：https://greet-me-debugging.vercel.app/。接下來，就看看 Chrome DevTools 有什麼功能可以偵錯定位程式碼的問題。

一、瞭解 Sources 面板

DevTools 提供了許多不同的工具供我們進行偵錯，包括 DOM 檢查、分析和網路呼叫檢查等。這裡要說的是 Sources 面板，它可以幫助我們偵錯 JavaScript。可以使用快捷鍵 F12 開啟控制面板，並單擊 Sources 索引標籤以導航到 Sources 面板，也可以直接使用快捷鍵 Command+Option+I（Mac）或 Control+Shift+I（Windows、Linux）來開啟。

ff02b38b563171c004d94ea3a910ad89.png

Sources 面板主要由三個部分組成：

d9be6c7483ae62407b407f2e6433508b.png

  1. 檔案導航區：頁面請求的所有檔案都會在此列出；

  2. 程式碼編輯區：當我們從檔案導航欄中選取一個檔案時，該檔案的內容就會在此列出，我們可以在這裡編輯程式碼；

  3. Debugger區：這裡會有很多工具可以用來設定斷點，檢查變數值、觀察執行步驟等。

如果 DevTools 視窗較寬或未在單獨的視窗中開啟，則偵錯程式部分將顯示在程式碼編輯器的右側：

0d3aa9d73683a1bb85776e29f907085c.png

二、設定斷點

要開始偵錯程式碼，首先要做的就是設定斷點，斷點就是程式碼執行暫停以便偵錯它的邏輯點。

DevTools 允許我們以不同的方式來設定斷點：

  • 在程式碼行；

  • 在條件語句中；

  • 在 DOM 節點處；

  • 在事件偵聽器上。

1. 在程式碼行設定斷點

設定程式碼行斷點的步驟：

  • 單擊切換到 Sources 索引標籤；

  • 從檔案導航部分選中需要偵錯的原始檔；

  • 在右側程式碼編輯器區域找到需要偵錯的程式碼行；

  • 單擊行號以在行上設定斷點。

0ac505d4e66503aafa2e9ef0a7ddab5d.png

這裡就在程式碼的第 6 行設定了一個斷點，程式碼在執行到這裡時就會暫停。

2. 設定條件斷點

設定條件斷點的步驟：

  • 單擊切換到 Sources 索引標籤；

  • 從檔案導航部分選中需要偵錯的原始檔；

  • 在右側程式碼編輯器區域找到需要偵錯的程式碼行；

  • 右鍵單擊行號並選擇"Add conditional breakpoint"來新增條件斷點：

911381fbfb8fb734172dc4f57d63cf91.png

點選之後程式碼行下方就會出現一個對話方塊，輸入斷點的條件即可：

4da62e18f27e13f941885e5a9741bdad.png

按確認鍵（Enter）即可啟用斷點，這時就會在打斷點行的頂部出現一個橙色的圖示：

2d44aa4ba4f4365005d8e6ff2c79eea7.png

當print()方法中的name變數值為Joe時，程式碼的執行就會暫停。需要注意，只有我們確定偵錯的程式碼的大致範圍時，才會使用條件斷點。

3. 在事件監聽器上設定斷點

在事件監聽器上設定斷點的步驟：

  • 單擊切換到 Sources 索引標籤；

  • 在debugger區域展開Event Listener Breakpoints選項；

  • 從事件列表中選擇事件監聽器來設定斷點。我們的程式中有一個按鈕單擊事件，這裡就選擇 Mouse 事件選項中的click。

cd71191d28301dad1804cca9e1382f3f.png

提示：當我們想暫停在事件觸發後執行的事件偵聽器程式碼時可以使用此選項。

4. 在 DOM 節點中設定斷點

DevTools 在 DOM 檢查和偵錯方面同樣很強大。當在 DOM 中新增、刪除或者修改某些內容時，可以設定斷點來暫停程式碼的執行。

在 DOM 上設定斷點的步驟：

  • 單擊切換到 Elements 索引標籤；

  • 找到要設定斷點的元素；

  • 右鍵單擊元素以獲得上下文選單，選擇Break on選項，然後選擇Subtree modifications、Attribute modifications、Node removal中的一個即可：

33b6e8da06e4e5054a2039c6c21938d0.png

這三個選項的含義如下：

  • Subtree modifications：當節點內部子節點變化時斷點；

  • Attribute modifications：當節點屬性發生變化時斷點；

  • Node removal：當節點被移除時斷點。

如上圖，我們在輸出訊息的 p 的 DOM 發生變化時設定了一個斷點。當點選按鈕後，問候訊息輸出到 p 中，子節點的內容發生了變化，就會發生中斷。

注意： 當我們懷疑是DOM更改導致了錯誤時，就可以使用該選項，當 DOM 更改中斷時，相關的 JavaScript 程式碼執行將自動暫停。

三、逐步偵錯

現在我們知道了設定斷點的方式。在複雜的偵錯情況下，我們可能需要使用這些偵錯的組合。偵錯程式提供了五個控制元件來逐步執行程式碼：

8296f9e426d142096d53816a058e3667.png

下面就分別來看看這些控制都是如何使用的。

1. 下一步（快捷鍵：F9）

此選項使我們能夠在JavaScript程式碼執行時逐行執行，如果中途有函數呼叫，單步執行也會進入函數內部，逐行執行，然後退出。

77fb778247ae6f2fc5ccd2ebbae230be.gif

2. 跳過（快捷鍵：F10）

此選項允許我們在執行程式碼時跳過一些程式碼。有時我們可能已經確定某些功能是正常的，不想花時間去檢查它們，就可以使用跳過選項。

下面就是單步執行logger()函數時，會跳過函數的執行：

01dbe3fd4831890c1d446d9ee7f071f1.gif

3. 進入（快捷鍵：F11）

使用該選項可以更深入地瞭解函數。單步執行函數時，當感覺某個函數的行為異常並想檢查它時，就可以使用這個選項來進入函數內部並進行偵錯。

下面就是單步執行 logger() 函數:

5e72d0662208d5c08bcc294f4205f778.gif

4. 跳出（快捷鍵：Shift+F11）

在單步執行一個函數時，我們可能不想再繼續執行並退出它，就可以使用這些選項退出函數。

下面就是進入了 logger() 函數內部，然後立即退出：

1b69740e19ffe26996591017ea988563.gif

5. 跳轉（快捷鍵：F8）

有時，我們希望從一個斷點跳轉到另一個斷點，而無需在它們之間進行任何偵錯，就可以使用這個選項來跳轉到下一個斷點：

e89610269e34c256a7447835afe4021f.gif

四、檢查範圍、呼叫堆疊和值

當進行逐行偵錯時，檢查變數的範圍和值以及函數呼叫的呼叫堆疊。在Debugger區可以這三個選項：

1ddb331787fcf3e71595ea6cde97008d.png

1. 範圍（Scope）

可以在 Scope 選項中檢視區域性範圍和全域性範圍內的內容以及變數，還可以看到 this 的實時指向：

456c622b3aa632f2d2ed065e2cf6473e.png

2. 呼叫堆疊

呼叫堆疊面板有助於識別函數執行堆疊：

b34a47de528082a9ea45bbb696eabab1.png

3. 值

檢查程式碼中的值是識別程式碼中錯誤的主要方法。在單步執行時，我們只需要將滑鼠懸停在變數上即可檢查值。

下面可以看到變數 name 在程式碼執行時的檢查值：

566c934a6828ccc695067a45d39e0395.png

此外，我們可以選擇打碼的一部分作為表示式來檢查值。在下面的例子中，選擇了表示式document.getElementById('m_wish') 來檢查值：

f10534a14e7d3e00450bfa0af66b36b7.png

4. Watch

Watch 部分允許新增一個或多個表示式，並在執行時監視它們的值。當我們想在程式碼邏輯之外進行一些計算時，這個功能非常有用。我們可以組合來自程式碼區域的任何變數，以形成有效的JavaScript表示式。在逐步執行時，就能看到表示式的值。

以下是新增 Watch 的步驟：

  1. 單擊 Watch 上的 + 按鈕：

886708aa871c34e22370073568763bf4.png

  1. 新增要監控的表示式。在這個例子中，新增了一個希望觀察其值的變數：

e1313253ea52d7fb31a28e40340dd41f.png

另一種觀察表示式值的方法是從控制檯的console中新增：

02d4dcf677135d397caf571a928c901b.png

五、禁用和刪除斷點

可以點選以下按鈕來禁用所有的斷點：

06f4f827463ca589974c80e127cfa006.png注意，上述方法不會刪除斷點，只會在暫時停用它們。要再次啟用這些斷點，只需再點一次這個斷點即可。

通過取消選中的核取方塊，可以從「Breakpoints」面板中刪除一個或多個斷點。通過右鍵單擊並選擇「刪除所有斷點」選項，可以刪除所有斷點：

22ba5f44bee8352ebcec0be4d5d616ef.png

六、使用 VS Code 偵錯 JavaScript

Visual Studio code 中一些實用的外掛可以用於 JavaScript 程式碼的偵錯。可以安裝一個名為「Debugger for Chrome」的外掛來偵錯程式碼：

69ca3a39b22fee51420d09422e9d0c11.png

安裝之後，單擊左側的 run 選項並建立設定以執行/偵錯 JavaScript 應用程式。

113c6798de24bb29a0231242408cf0ef.png

這樣就會建立一個名為 launch.json 的檔案，其中包含一些設定資訊：

{
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "Debug the Greet Me app",
          "url": "<http://localhost:5500>",
          "webRoot": "${workspaceFolder}"
      }
  ]
}

可以修改以下引數：

  • name : 任意名稱；

  • url：本地執行的 URL；

  • webRoot：預設值為 ${workspaceFolder}，即當前資料夾。可能將其更改為 專案入口檔案即可。

最後一步是通過單擊左上角的播放圖示開始偵錯：

d9c1f71e20364cc2954a4c8050afeed1.png

這個偵錯程式類似於DevTools，主要有以下部分：

  1. 啟用偵錯。按播放按鈕啟用偵錯選項。

  2. 用於單步執行斷點以及暫停或停止偵錯的控制元件。

  3. 在原始碼上設定斷點。

  4. 範圍面板檢視變數範圍和值。

  5. 用於建立和監視表示式的監視面板。

  6. 執行函數的呼叫棧。

  7. 要啟用、禁用和刪除的斷點列表。

  8. 偵錯控制檯讀取控制檯紀錄檔訊息。

e14f08a6a9f98d84fdbd7c38fff101ee.png

最後，回到最開始的問題，這裡不再一步步偵錯，通過上述的偵錯方法判定，只需要在 wish 變數前面加一個 + 即可：

const message = 'Hello ' 
                        + name 
                        + ', Your wish `' 
                        + + wish 
                        + '` may come true!';

相關推薦：

以上就是超實用的JavaScript偵錯技巧的詳細內容，更多請關注TW511.COM其它相關文章！