實用 JavaScript 調試技巧

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

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

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

當輸入兩個表單值之後，“願望” 部分沒有正確打印，而是打印出了 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）來打開。

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

文件導航區：頁面請求的所有文件都會在此列出；
代碼編輯區：當我們從文件導航欄中選取一個文件時，該文件的內容就會在此列出，我們可以在這裏編輯代碼；
Debugger 區：這裏會有很多工具可以用來設置斷點，檢查變量值、觀察執行步驟等。

如果 DevTools 窗口較寬或未在單獨的窗口中打開，則調試器部分將顯示在代碼編輯器的右側：

二、設置斷點

要開始調試代碼，首先要做的就是設置斷點，斷點就是代碼執行暫停以便調試它的邏輯點。

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

在代碼行；
在條件語句中；
在 DOM 節點處；
在事件偵聽器上。

1. 在代碼行設置斷點

設置代碼行斷點的步驟：

單擊切換到 Sources 選項卡；
從文件導航部分選中需要調試的源文件；
在右側代碼編輯器區域找到需要調試的代碼行；
單擊行號以在行上設置斷點。

這裏就在代碼的第 6 行設置了一個斷點，代碼在執行到這裏時就會暫停。

2. 設置條件斷點

設置條件斷點的步驟：

單擊切換到 Sources 選項卡；
從文件導航部分選中需要調試的源文件；
在右側代碼編輯器區域找到需要調試的代碼行；
右鍵單擊行號並選擇 "Add conditional breakpoint" 來添加條件斷點：

點擊之後代碼行下方就會出現一個對話框，輸入斷點的條件即可：

按回車鍵（Enter）即可激活斷點，這時就會在打斷點行的頂部出現一個橙色的圖標：

當 print() 方法中的 name 變量值爲 Joe 時，代碼的執行就會暫停。需要注意，只有我們確定調試的代碼的大致範圍時，纔會使用條件斷點。

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

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

單擊切換到 Sources 選項卡；
在 debugger 區域展開 Event Listener Breakpoints 選項；
從事件列表中選擇事件監聽器來設置斷點。我們的程序中有一個按鈕單擊事件，這裏就選擇 Mouse 事件選項中的 click。

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

4. 在 DOM 節點中設置斷點

DevTools 在 DOM 檢查和調試方面同樣很強大。當在 DOM 中添加、刪除或者修改某些內容時，可以設置斷點來暫停代碼的執行。

在 DOM 上設置斷點的步驟：

單擊切換到 Elements 選項卡；
找到要設置斷點的元素；
右鍵單擊元素以獲得上下文菜單，選擇 Break on 選項，然後選擇 Subtree modifications、Attribute modifications、Node removal 中的一個即可：

這三個選項的含義如下：

Subtree modifications：當節點內部子節點變化時斷點；
Attribute modifications：當節點屬性發生變化時斷點；
Node removal：當節點被移除時斷點。

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

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

三、逐步調試

現在我們知道了設置斷點的方式。在複雜的調試情況下，我們可能需要使用這些調試的組合。調試器提供了五個控件來逐步執行代碼：

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

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

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

2. 跳過（快捷鍵：F10）

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

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

3. 進入（快捷鍵：F11）

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

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

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

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

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

5. 跳轉（快捷鍵：F8）

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

四、檢查範圍、調用堆棧和值

當進行逐行調試時，檢查變量的範圍和值以及函數調用的調用堆棧。在 Debugger 區可以這三個選項：

1. 範圍（Scope）

可以在 Scope 選項中查看局部範圍和全局範圍內的內容以及變量，還可以看到 this 的實時指向：

2. 調用堆棧

調用堆棧面板有助於識別函數執行堆棧：

3. 值

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

下面可以看到變量 name 在代碼執行時的檢查值：

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

4. Watch

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

以下是添加 Watch 的步驟：

單擊 Watch 上的 + 按鈕：

添加要監控的表達式。在這個例子中，添加了一個希望觀察其值的變量：

另一種觀察表達式值的方法是從控制檯的 console 中添加：

五、禁用和刪除斷點

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

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

通過取消選中的複選框，可以從 “Breakpoints” 面板中刪除一個或多個斷點。通過右鍵單擊並選擇 “刪除所有斷點” 選項，可以刪除所有斷點：

六、使用 VS Code 調試 JavaScript

Visual Studio code 中一些實用的插件可以用於 JavaScript 代碼的調試。可以安裝一個名爲 “Debugger for Chrome” 的插件來調試代碼：

安裝之後，單擊左側的 run 選項並創建配置以運行 / 調試 JavaScript 應用程序。

這樣就會創建一個名爲 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}，即當前文件夾。可能將其更改爲項目入口文件即可。

最後一步是通過單擊左上角的播放圖標開始調試：

這個調試器類似於 DevTools，主要有以下部分：

啓用調試。按播放按鈕啓用調試選項。
用於單步執行斷點以及暫停或停止調試的控件。
在源代碼上設置斷點。
範圍面板查看變量範圍和值。
用於創建和監視表達式的監視面板。
執行函數的調用棧。
要啓用、禁用和刪除的斷點列表。
調試控制檯讀取控制檯日誌消息。

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

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

本文翻譯自 Tapas Adhikary 的原創文章，已獲得作者翻譯、轉載授權！

作者：Tapas Adhikary

譯者：CUGGZ

原文鏈接：https://blog.greenroots.info/the-definitive-guide-to-javascript-debugging-2021-edition

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/sgEp87WY1M8n8o04tXeSYw