為 JavaScript 偵錯

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

重現錯誤

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

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

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

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

熟悉「來源」面板 UI

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

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

    「來源」面板。

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

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

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

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

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

    function onClick() {

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

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

逐步執行程式碼

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

  1. 在開發人員工具的「Sources」面板中，點選「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 的值，並在宣告旁邊顯示。

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

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

檢查變數值

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

方法 1：檢查範圍

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

按兩下變數值即可編輯。

範圍窗格。

方法 2：監控運算式

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

立即試用：

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

「Watch Expression」窗格

這張螢幕截圖顯示建立 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. 請嘗試使用不同的值來試用這個示範。示範現在可正確計算。

後續步驟

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

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

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

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