為 JavaScript 偵錯

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

本教學課程將說明在 DevTools 中偵錯任何 JavaScript 問題的基本工作流程。請繼續閱讀，或觀看這部教學影片。

重現錯誤

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

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

5 + 1 的結果是 51。應為 6。

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

熟悉「來源」面板的使用者介面

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

  1. 開啟開發人員工具，然後前往「來源」面板。

    「來源」面板。

「來源」面板包含三個部分：

「Sources」面板的 3 個部分。

  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」展開該部分。開發人員工具會顯示可展開的事件類別清單，例如「Animation」和「Clipboard」。
  2. 按一下「滑鼠」事件類別旁的「展開」圖示 。開發人員工具會顯示滑鼠事件清單，例如「click」和「mousedown」。每個事件旁邊都有核取方塊。

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

    「點擊」核取方塊已啟用。

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

    function onClick() {

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

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

逐步執行程式碼

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

  1. 在 DevTools 的「Sources」面板中，按一下「step_into」「Step into 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 的值，並在宣告旁邊顯示。

開發人員工具會在第 32 行程式碼中斷點暫停。

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

檢查變數值

addend1、addend2 和 sum 的值似乎有可疑之處。這些字串會以引號包圍，這項假設可用來說明錯誤的原因。接下來，我們需要收集更多資訊。DevTools 提供許多工具，可用於檢查變數值。

方法 1：檢查範圍

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

按兩下變數值即可編輯。

「Scope」窗格。

方法 2：監控運算式

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

馬上試試：

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

「監控運算式」窗格

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

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

方法 3：控制台

除了查看 console.log() 訊息，您也可以使用控制台評估任意 JavaScript 陳述式。在偵錯方面，您可以使用控制台測試錯誤的潛在修正方式。馬上試試：

  1. 如果您尚未開啟控制台抽屜，請按下 Escape 鍵開啟。會在開發人員工具視窗的底部開啟。
  2. 在控制台中輸入 parseInt(addend1) + parseInt(addend2)。這個陳述式有效，是因為您在 addend1 和 addend2 位於範圍內的一行程式碼上暫停。
  3. 按下 Enter 鍵。DevTools 會評估陳述式並輸出 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. 請嘗試使用不同的值來試用這個示範。示範現在可正確計算。

後續步驟

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

  • 條件式中斷點，只有在您提供的條件為 true 時才會觸發。
  • 已偵測或未偵測到的例外狀況中斷點。
  • 當要求的網址與您提供的子字串相符時，系統會觸發的 XHR 中斷點。

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

本教學課程未說明的程式碼逐步檢查控制項有幾個。詳情請參閱「略過程式碼行」。