為 JavaScript 偵錯

Kayce Basques

Sofia Emelianova

本教學課程將說明在開發人員工具中針對任何 JavaScript 問題進行偵錯的基本工作流程。請繼續閱讀，或觀看這部教學影片。

重現錯誤

找出可一再重現錯誤的一系列動作，一律是偵錯的第一步。

1. 在新分頁中開啟這個示範。
2. 在「數字 1」方塊中輸入 5。
3. 在「Number 2」方塊中輸入 1。
4. 按一下「新增號碼 1 和號碼 2」。按鈕下方的標籤寫著 5 + 1 = 51。結果應為 6。這是您要修正的錯誤。

在本例中，5 + 1 的結果為 51。應為 6。

熟悉「來源」面板 UI

開發人員工具提供許多不同的工具，可用於執行各種工作，例如變更 CSS、分析網頁載入效能，以及監控網路要求。您可以在「Sources」面板中對 JavaScript 進行偵錯。

1. 開啟開發人員工具並前往「Sources」面板。

   

「來源」面板分為三個部分：

1. 含有檔案樹狀結構的「Page」分頁。這裡會列出網頁要求的所有檔案。
2. 「Code Editor」部分。在「Page」分頁中選取檔案後，該檔案的內容就會顯示在這裡。

3. 「Debugger」區段。各種可用來檢查網頁 JavaScript 的工具。

   如果開發人員工具視窗很寬，根據預設，「偵錯工具」會位於「程式碼編輯器」的右側。在這種情況下，Scope 和 Watch 分頁會與Breakpoints、Call stack 和其他分頁一起成為可摺疊的部分。

使用中斷點暫停程式碼

針對這類問題進行偵錯的常見方法，就是在程式碼中插入大量 console.log() 陳述式，以便在指令碼執行時檢查值。例如：

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

console.log() 方法或許可以完成工作，但中斷點可更快完成工作。中斷點可讓您在執行期間暫停程式碼，並檢查該時間點的所有值。中斷點比 console.log() 方法具有以下幾項優點：

• 使用 console.log() 時，您需要手動開啟原始碼、尋找相關程式碼，插入 console.log() 陳述式並重新載入頁面，才能在主控台中查看訊息。透過中斷點，即使不知道程式碼的結構，也可以暫停相關的程式碼。
• 在 console.log() 陳述式中，您需要明確指定要檢查的每個值。透過中斷點，DevTools 會顯示當下所有變數的值。有時候，您甚至不知道有變數會影響程式碼。

簡而言之，中斷點比 console.log() 方法更能協助您快速找出並修正錯誤。

退一步想想應用程式的運作方式，您可以推測，錯誤的總和 (5 + 1 = 51) 是在與「Add Number 1 and Number 2」按鈕相關聯的 click 事件事件監聽器中計算。因此，您可能會在 click 事件監聽器執行時暫停程式碼。事件監聽器中斷點可讓您確切執行以下操作：

1. 在「Debugger」部分，按一下「Event Listener Breakpoints」展開該部分。開發人員工具會顯示可展開的事件類別清單，例如「動畫」和「剪貼簿」。
2. 按一下「滑鼠」事件類別旁的「展開」圖示 arrow_right。開發人員工具會顯示滑鼠事件清單，例如 click 和 mousedown。每個事件旁邊都有核取方塊。

3. 勾選「點擊」核取方塊。開發人員工具現在已設為在任何 click 事件監聽器執行時自動暫停。

   

4. 回到示範畫面，再次按一下「Add Number 1 and Number 2」。開發人員工具會暫停示範，並在「Sources」面板中醒目顯示一行程式碼。開發人員工具應暫停在這個程式碼行：

   function onClick() {
   

   如果暫停在不同的程式碼行，請按下「Resume」「Resume Script Execution」，直到暫停在正確的行上為止。

   注意：如果您在其他行暫停，瀏覽器擴充功能會在您造訪的每個網頁上註冊 click 事件監聽器。您已在擴充功能的 click 事件監聽器中暫停。如果您使用無痕模式進行私密瀏覽 (會停用所有擴充功能)，您就會發現每次都會暫停在正確的程式碼行上。

事件監聽器中斷點只是 DevTools 提供的眾多中斷點類型之一。建議您探索所有不同類型，因為每種類型最終都能協助您盡快偵錯各種情境。請參閱「使用中斷點暫停程式碼」，瞭解何時及如何使用各類型中斷點。

逐步執行程式碼

指令碼執行順序錯誤是常見的錯誤原因之一。逐步執行程式碼可讓您逐行逐步瞭解程式碼的執行情形，並找出程式碼執行順序與預期不同的確切位置。立即試用：

1. 在開發人員工具的「Sources」面板中，點選「step_into」step_into「Step to next function call」，逐步執行 onClick() 函式 (一次一行)。開發人員工具會醒目顯示下列程式碼：

   if (inputsAreEmpty()) {
   

2. 依序點選「step_over」「Step over next function call」。

   開發人員工具會執行 inputsAreEmpty()，但不會進入該函式。請注意，開發人員工具會略過幾行程式碼。這是因為 inputsAreEmpty() 評估為 false，因此 if 陳述式的程式碼區塊並未執行。

這就是逐行執行程式碼的基本概念。查看 get-started.js 中的程式碼，您會發現錯誤可能出現在 updateLabel() 函式的某處。您可以使用其他類型的中斷點，暫停可能出現錯誤的程式碼，而非逐步執行每行程式碼。

設定程式碼行中斷點

程式碼中斷點是最常見的中斷點類型。如果有想暫停的特定行程式碼，請使用程式碼中斷點：

1. 請查看 updateLabel() 中的最後一行程式碼：

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. 您可以在程式碼左側看到這行程式碼的行號，即 32。按一下「32」。開發人員工具會在 32 頂端顯示藍色圖示。這表示此行有程式碼行中斷點。開發人員工具現在會在執行這行程式碼前暫停。

3. 按一下「繼續」「繼續執行指令碼」。指令碼會繼續執行，直到到達第 32 行為止。在第 29、30 和 31 行，開發人員工具會顯示 addend1、addend2 和 sum 的值，並在宣告旁邊顯示。

在這個範例中，DevTools 會在第 32 行的程式碼中斷點暫停。

檢查變數值

addend1、addend2 和 sum 的值似乎可疑。這些字串會以引號包圍，這項假設可用來說明錯誤的原因。現在該收集更多資訊。開發人員工具提供了許多檢查變數值的工具。

方法 1：檢查範圍

當您在某一行程式碼暫停時，範圍分頁會顯示執行期間定義的本機和全域變數，以及每個變數的值。並在適用情況下顯示關閉變數。如未在某一行程式碼上暫停，「範圍」分頁會是空白的。

按兩下變數值即可編輯。

注意：視版面配置偏好設定和 DevTools 視窗的寬度而定，範圍分頁可能會與中斷點和呼叫堆疊一併顯示為可摺疊的部分。

方法 2：監控運算式

您可以透過「Watch」分頁監控變數的值隨時間變化。Watch 不只限於變數，您可以在「Watch」分頁中儲存任何有效的 JavaScript 運算式。

注意：視版面配置偏好設定和 DevTools 視窗的寬度而定，Watch 分頁可能會以可摺疊的部分顯示，並與Breakpoints 和Call stack 分頁一併顯示。

立即試用：

1. 按一下「觀看」分頁標籤。
2. 按一下「新增」「新增監看運算式」。
3. 請輸入 typeof sum。
4. 按下 Enter 鍵。開發人員工具會顯示 typeof sum: "string"。冒號右側的值是運算式的結果。

這張螢幕截圖顯示建立 typeof sum 監控運算式後的「Watch」分頁 (右下方)。

如同預期，sum 會以字串形式進行評估，但應為數字。您現在已確認這是造成錯誤的原因。

方法 3：控制台

除了查看 console.log() 訊息之外，您也可以使用主控台評估任意的 JavaScript 陳述式。就偵錯而言，您可以使用主控台測試各種錯誤修正方法。立即試用：

1. 如果您未開啟主控台導覽匣，請按下 Esc 鍵開啟。會在開發人員工具視窗的底部開啟。
2. 在控制台中輸入 parseInt(addend1) + parseInt(addend2)。這個陳述式有效，是因為您在 addend1 和 addend2 位於範圍內的一行程式碼上暫停。
3. 按下 Enter 鍵。開發人員工具會評估陳述式並輸出 6，也就是您預期示範所產生的結果。

這張螢幕截圖顯示評估 parseInt(addend1) + parseInt(addend2) 後的「主控台」導覽匣。

套用修正程式

您已找到錯誤的修正方式。接下來，您只需編輯程式碼並重新執行範例，即可嘗試修正問題。您不必離開開發人員工具即可套用修正程式。您可以直接在 DevTools UI 中編輯 JavaScript 程式碼。立即試用：

1. 依序按一下「繼續」「繼續執行指令碼」。
2. 在程式碼編輯器中，將第 31 行 var sum = addend1 + addend2 替換為 var sum = parseInt(addend1) + parseInt(addend2)。
3. 按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux) 即可儲存變更。
4. 依序按一下「label_off」「停用中斷點」。顏色會變成藍色，表示已啟用。設定這項設定時，開發人員工具會忽略您設定的任何中斷點。
5. 請嘗試使用不同的值來試用這個示範。示範現在可正確計算。

注意：這個工作流程只會將修正程式碼套用至在瀏覽器中執行的程式碼。不會修正造訪您網頁的所有使用者程式碼。為此，您必須修正伺服器上的程式碼。不過，您可以在開發人員工具中編輯檔案，並透過 Workspaces 將檔案儲存至來源。

提示： 從 Chrome 105 版開始，您可以即時編輯已暫停的函式。

後續步驟

成功：恭喜！您現在已瞭解如何在偵錯 JavaScript 時充分運用 Chrome 開發人員工具。您在這個教學課程中學到的工具和方法，可以省下無數小時的時間。

本教學課程僅說明設定中斷點的兩種方式。開發人員工具還提供許多其他方式，包括：

• 只有在您提供的條件為 true 時，才會觸發條件中斷點。
• 遭擷取或未擷取的例外狀況中斷點。
• 要求的網址與您提供的子字串相符時觸發的 XHR 中斷點。

請參閱「使用中斷點暫停程式碼」，瞭解何時及如何使用各類型中斷點。

本教學課程中並未說明幾個程式碼步行控制項。詳情請參閱「略過程式碼行」。