本頁面由 Cloud Translation API 翻譯而成。

為 JavaScript 偵錯

Kayce Basques

Twitter GitHub Glitch

Sofia Emelianova

GitHub

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

步驟 1：重現錯誤

找出容易重現錯誤的一連串動作，都是偵錯的第一步。

在新分頁中開啟這個示範頁面。
在「數字 1」文字方塊中輸入 5。
在「數字 2」文字方塊中輸入 1。
按一下「新增電話號碼 1 和第 2 號」。按鈕下方的標籤顯示「5 + 1 = 51」。結果應為 6。這就是您要修正的錯誤。

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

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

步驟 2：熟悉「來源」面板 UI

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

按下 Command + Option + J 鍵 (Mac) 或 Control + Shift + J 鍵 (Windows 和 Linux)，開啟開發人員工具。此捷徑會開啟「Console」面板。
按一下「來源」分頁標籤。

「Sources」面板 UI 包含 3 個部分：

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

「File Navigator」窗格。這裡會列出網頁要求的所有檔案。
「Code Editor」窗格。在「File Navigator」窗格中選取檔案後，該檔案的內容會顯示在這裡。
「JavaScript Debugging」窗格。檢查網頁 JavaScript 的各種工具。如果您的開發人員工具視窗寬度太寬，這個窗格會顯示在「Code Editor」窗格的右側。

步驟 3：透過中斷點暫停程式碼

對這類問題進行偵錯的常見方法之一，就是在程式碼中插入大量 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() 方法更快找出並修正錯誤。

如果您回頭思考應用程式的運作方式，可以在與「新增數字 1」和「數字 2」按鈕相關聯的 click 事件監聽器中，推測出不正確的總和 (5 + 1 = 51)。因此，您可能需要在 click 事件監聽器執行前後暫停程式碼。事件監聽器中斷點可用來進行以下操作：

在「JavaScript Debugging」窗格中，按一下「Event Listener Breakpoints」展開該部分。開發人員工具會顯示可展開事件類別的清單，例如動畫和剪貼簿。
按一下「Mouse」事件類別旁邊的「Expand」圖示。開發人員工具會顯示滑鼠事件清單，例如 click 和 mousedown。每個事件旁邊都會顯示核取方塊。
勾選「click」核取方塊。開發人員工具現已設為在執行任何 click 事件監聽器時自動暫停。
返回示範畫面，再次點選「Add Number 1 and Number 2」。開發人員工具會暫停示範，並在「Sources」面板中醒目顯示一行程式碼。開發人員工具應暫停下列這行程式碼：
```
function onClick() {
```
如果在其他程式碼行中已暫停執行，請按下「Resume Script Execution」，直到暫停在正確的行上。

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

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

步驟 4：瀏覽程式碼

導致錯誤的常見原因之一，就是指令碼的執行順序不正確。逐行瀏覽程式碼可讓您逐步完成程式碼的執行程序，一次一行，並確定其執行順序與預期不同。立即試用：

在開發人員工具的「Sources」面板中，點選「Step to next functioncall」圖示，逐一執行 onClick() 函式的執行作業。開發人員工具會醒目顯示下列這行程式碼：
```
if (inputsAreEmpty()) {
```
按一下「Step over next function 呼叫」。開發人員工具不必進入就能執行 inputsAreEmpty()。請注意開發人員工具會略過幾行程式碼。這是因為 inputsAreEmpty() 評估為 false，所以未執行 if 陳述式的程式碼區塊。

這是逐步執行程式碼的基本概念。如果您查看 get-started.js 中的程式碼，可以發現錯誤可能位於 updateLabel() 函式的某個位置。您可以使用另一種類型的中斷點，將程式碼暫停到錯誤可能的位置，而不是逐一執行程式碼。

步驟 5：設定程式碼行中斷點

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

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

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

程式碼左側會顯示這行程式碼的行數，即 32。按一下「32」32。開發人員工具的 32 頂端會顯示藍色圖示。也就是說，這行有一個程式碼行中斷點。現在開發人員工具一律會在執行這行程式碼前暫停。
按一下「Resume Script running」。指令碼會繼續執行，直到到達第 32 行為止。在第 29、30 和 31 行中，開發人員工具的宣告旁邊會顯示 addend1、addend2 和 sum 的值。

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

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

步驟 6：檢查變數值

addend1、addend2 和 sum 的值看起來很可疑。這是以引號括住，也就是表示字串是字串這是解釋錯誤原因的假設。現在讓我們收集更多資訊開發人員工具提供許多工具，可用於檢查變數值。

方法 1：範圍窗格

當您暫停一行程式碼時，「Scope」窗格會顯示目前定義的本機和全域變數，以及每個變數的值。在適用情況下，也會顯示關閉變數。按兩下變數值即可進行編輯。當您並未暫停一行程式碼時，「Scope」窗格會呈現空白。

「Scope」(範圍) 窗格。

方法 2：觀察運算式

「Watch Expressions」分頁可讓您監控不同時間的變數值。顧名思義，監控運算式不只有變數而已。您可以將任何有效的 JavaScript 運算式儲存在觀察運算式中。立即試用：

按一下「觀看」分頁標籤。
按一下「Add Expression」圖示。
輸入 typeof sum。
按下 Enter 鍵。開發人員工具顯示 typeof sum: "string"。冒號右側的值是監控運算式的結果。

「Watch Expression」窗格

上方螢幕截圖顯示建立 typeof sum 觀察運算式後的「Watch Expression」窗格 (右下方)。如果您的開發人員工具視窗較大，「Watch Expression」窗格位於右側，「Event Listener Breakpoints」窗格上方。

如可疑，系統會將 sum 評估為字串，且其應為數字。現在已確認這是錯誤的原因。

方法 3：控制台

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

如果您尚未開啟主控台導覽匣，請按下 Escape 鍵開啟。系統隨即會在開發人員工具視窗的底部開啟。
在主控台中輸入 parseInt(addend1) + parseInt(addend2)。這個陳述式有效，因為您在 addend1 和 addend2 範圍內的程式碼行上暫停了。
按下 Enter 鍵。開發人員工具會評估陳述式，並輸出 6，這就是您預期試用版產生的結果。

「控制台」導覽匣是在評估範圍內的變數後。

上方螢幕截圖顯示評估 parseInt(addend1) + parseInt(addend2) 後產生的「Console」導覽匣。

步驟 7：套用修正建議

你已找到這個錯誤的修正方式。接下來只要編輯程式碼並重新執行示範，即可試試修正方法。現在不必離開開發人員工具就能套用修正結果。您可以直接在開發人員工具 UI 中編輯 JavaScript 程式碼。立即試用：

按一下「Resume Script running」。
在程式碼編輯器中，將第 31 行 var sum = addend1 + addend2 替換為 var sum = parseInt(addend1) + parseInt(addend2)。
按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux) 儲存變更。
按一下「停用中斷點」。其顏色會變更為藍色，表示有效。如果設定完成，開發人員工具會忽略您設定的任何中斷點。
請嘗試使用不同的值來示範。示範模式現在可以正確計算了。

後續步驟

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

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

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

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

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