為 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. 含有檔案樹狀結構的「頁面」分頁。這裡會列出網頁要求的所有檔案。
  2. 「Code Editor」區段。在「頁面」分頁中選取檔案後，系統會將 檔案會顯示在這裡

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

    如果開發人員工具視窗寬度預設為寬，「Debugger」預設為「Code Editor」。在這種情況下，「範圍」和「手錶」分頁會將「中斷點」、「呼叫堆疊」等分頁彙整為可收合的部分。

展開視窗右側的 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() 方法或許可以完成工作，但中斷點可更快完成工作。A 罩杯 中斷點可讓您在程式碼執行作業期間暫停程式碼，並檢查該程式碼的所有值 時刻。與 console.log() 方法相比，中斷點有一些優點：

  • 使用 console.log() 時，您需要手動開啟原始碼、尋找相關程式碼，然後插入 console.log() 陳述式，然後重新載入頁面，這樣就能查看 控制台。透過中斷點，即使不知道程式碼是如何 結構
  • 您需要在 console.log() 陳述式中明確指定要每個需要的值 透過中斷點，開發人員工具會顯示當下所有變數的值。 有時候，您甚至不知道有變數會影響程式碼。

簡單來說，中斷點可協助您更快找出及修正錯誤，比 console.log() 方法更快。

退一步 回想應用程式的運作方式後 不正確總和 (5 + 1 = 51) 會在與click 新增數字 1 和數字 2 按鈕。因此，您可能會想要在這段時間內暫停程式碼 click 事件監聽器會執行的函式。事件監聽器中斷點可讓您確切執行以下操作：

  1. 在「偵錯工具」部分，按一下「事件監聽器中斷點」，即可展開 專區。開發人員工具會顯示可展開事件類別清單，例如 Animation 和 剪貼簿。
  2. 按一下「滑鼠」事件類別旁邊的 arrow_right 展開。 開發人員工具會顯示滑鼠事件的清單，例如 click 和 mousedown。每項事件旁邊都會顯示核取方塊。

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

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

  4. 返回示範畫面，再次點選「新增數字 1 和數字 2」。開發人員工具會暫停示範 醒目顯示「Sources」(來源) 面板中的一行程式碼。開發人員工具必須在以下這一行暫停： 程式碼：

    function onClick() {

    如果程式碼已暫停在另一行程式碼上，請按下 繼續執行「Resume Script Execution」，直到在正確的行暫停為止。

事件監聽器中斷點只是開發人員工具中可用的眾多中斷點之一。是 建議您探索各種類型，因為每種類型最後都能協助您針對 盡快模擬預測結果如要瞭解何時可暫停程式碼，請參閱「使用中斷點暫停程式碼」一文 每種類型

逐步執行程式碼

導致錯誤的常見原因之一，就是指令碼執行順序有誤。逐步執行程式碼 能讓您逐步瞭解程式碼的執行狀況 (一次一行文字)，並找出確切執行位置 執行順序與預期不同立即試用：

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

    if (inputsAreEmpty()) {

  2. 按一下「step_over」step_over。

    開發人員工具會執行 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」窗格。

方法 2：監控運算式

「手錶」分頁可讓您監控變數值的變化。手錶不限於變數。您可以儲存任何有效的 JavaScript 運算式位於「Watch」分頁中。

立即試用：

  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) 後的「Console」導覽匣。

套用修正

您已找到此問題的修正程式，最後，請編輯程式碼並嘗試修正相關問題， 請重新執行示範您不需要離開開發人員工具，即可套用修正。您可以編輯 JavaScript 程式碼 直接在開發人員工具 UI 中存取立即試用：

  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 中斷點。

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

本教學課程中並未說明幾個程式碼步行控制項。請參閱這篇文章 程式碼。