為 JavaScript 偵錯

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

本教學課程會說明在開發人員工具中偵錯 JavaScript 問題的基本工作流程。請繼續閱讀，或觀看本教學課程的影片版本。

重現錯誤

尋找一系列持續重現錯誤的動作，都是偵錯的第一步。

  1. 在新分頁中開啟示範，
  2. 在「數字 1」方塊中輸入 5。
  3. 在「數字 2」方塊中輸入 1。
  4. 按一下「新增數字 1 和數字 2」。按鈕下方的標籤顯示「5 + 1 = 51」。結果應為 6。也就是要修正的錯誤。

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

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

熟悉「來源」面板 UI

開發人員工具為不同工作提供許多不同的工具，例如變更 CSS、剖析頁面載入效能，以及監控網路要求。「Sources」面板是您為 JavaScript 偵錯的地方。

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

    「來源」面板。

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

「來源」面板的 3 個部分。

  1. 帶有檔案樹狀結構的「Page」分頁。這裡會列出該網頁要求的每一個檔案。
  2. 程式碼編輯器區段。在「Page」分頁中選取檔案後，該檔案的內容會顯示在這裡。

  3. 「Debugger」部分。使用各種工具檢查網頁 JavaScript。

    如果開發人員工具視窗是寬幅，根據預設，「Debugger」位於「程式碼編輯器」的右側。在這個情況下，「Scope」和「Watch」分頁會彙整「Breakpoints」、「Call stack」等可收合的部分。

「Debugger」。

透過中斷點暫停程式碼

這類問題的常見偵錯方法，就是在程式碼中插入許多 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() 陳述式中，您必須明確指定每個要檢查的值。透過中斷點，開發人員工具會顯示當下所有變數的值。有時候，有些變數甚至影響了程式碼，但您甚至沒注意到這些變數。

簡單來說，中斷點會比 console.log() 方法更快找出並修正錯誤。

先退一步並思考應用程式的運作方式，就可以合理推測出錯誤總和 (5 + 1 = 51) 是透過與「Add Number 1 and Number 2」按鈕相關聯的 click 事件監聽器計算。因此，建議您在 click 事件監聽器執行前後暫停程式碼。事件監聽器中斷點可讓您進行以下操作：

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

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

    「按一下」核取方塊已啟用。

  4. 返回示範模式，再次點選「Add Number 1 and Number 2」，開發人員工具會暫停示範，並醒目顯示「Sources」面板中的一行程式碼。該行程式碼應暫停開發人員工具：

    function onClick() {

    如果您暫停了另一行程式碼，請按下繼續「繼續執行指令碼執行」，直到您暫停在正確的行上。

事件監聽器中斷點只是開發人員工具提供的許多中斷點類型之一。建議您探索所有不同的類型，因為每種類型最終都能協助您盡快針對不同的情境進行偵錯。如要瞭解各種類型的使用時機和方式，請參閱「使用中斷點暫停程式碼」。

逐步檢查程式碼

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

  1. 在開發人員工具的「來源」面板中，按一下 step_into「進入下一個函式呼叫」，逐步執行 onClick() 函式 (一次一行)。開發人員工具會醒目顯示下列這行程式碼：

    if (inputsAreEmpty()) {

  2. 按一下「Step_over」step_over「Step over next 函式呼叫」。

    開發人員工具會在不登入的情況下執行 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 行程式碼的中斷點暫停。

在這個範例中，開發人員工具在第 32 行的程式碼行中斷點暫停。

檢查變數值

addend1、addend2 和 sum 的值看起來很可疑。前後加上引號 代表這些是字串這麼做可以解釋錯誤原因。接著來收集更多資訊。開發人員工具提供許多可用來檢查變數值的工具，

方法 1：檢查範圍

當您暫停某一行的程式碼時，「Scope」(範圍) 分頁會顯示目前執行時所定義的本機和全域變數，以及每個變數的值。視情況顯示關閉變數當您未暫停某行程式碼時，「範圍」分頁會呈現空白。

按兩下變數值即可進行編輯。

「Scope」(範圍) 窗格。

方法 2：觀察運算式

「Watch」分頁可讓您監控一段時間內的變數值。手錶不只是變數，您可以在「Watch」分頁中儲存任何有效的 JavaScript 運算式。

立即試用：

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

「Watch Expression」窗格

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

如上所述，系統會將 sum 評估為字串，但現在應為數字。現在您已確認這是錯誤的原因。

方法 3：控制台

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

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

評估範圍內的變數後，主控台導覽匣。

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

套用修正建議

您已找到該錯誤的修正程式。剩下的工作就是嘗試修正程式碼，方法是編輯程式碼，然後重新執行示範。您不需要退出開發人員工具即可套用修正。您可以直接在開發人員工具 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 中斷點。

如要瞭解各種類型的使用時機和方式，請參閱「使用中斷點暫停程式碼」。

本教學課程沒有說明幾個程式碼步驟控制項。詳情請參閱「逐行程式碼」。