共用方式為

帶有斷點的暫停程式碼

使用斷點來暫停你的 JavaScript 程式碼。 本文說明 DevTools 中每種類型的斷點，以及何時使用和如何設定每種類型。

若想了解如何使用現有網頁的入門教學，請參見 「開始除錯 JavaScript」。

何時使用各斷點類型概述

最知名的斷點類型是程式碼行斷點。 但程式碼行斷點設定起來可能效率不高，尤其是當你不知道該從哪裡找，或是處理龐大的程式碼庫時。 你在除錯時，知道如何以及何時使用其他類型的斷點，可以節省時間。

斷點類型 想暫停時用這個......
程式碼行 在一個精確的程式碼區域上。
條件程式碼行 在精確的程式碼區域上，但只有在其他條件成立時才會如此。
DOM 在變更或移除特定 DOM 節點或子節點的程式碼上。
XHR 當 XHR URL 包含字串模式時，
事件監聽器 在事件發生後執行的程式碼，例如 click，執行。
Exception 在丟出捕捉或未捕捉例外的程式碼中。
Function 每當執行特定指令、函式或方法時，
對井點 一種不會「入侵」除錯器，而是將訊息記錄到主控台的變體。

程式碼行斷點

當你知道需要調查的確切程式碼區域時，可以使用程式碼行斷點。 DevTools 在執行這行程式碼前總是會暫停。

在 DevTools 中設定程式碼行斷點：

  1. 選擇 來源 工具。

  2. 打開包含你想要破壞的程式碼行的檔案。

  3. 去看程式碼那行。

  4. 程式碼行左側是行號欄。 點它。 行號欄旁會出現一個紅色圖示：

    程式碼行斷點

程式碼中的程式碼行斷點

用 debugger 你程式碼中的語句在那一行暫停。 這相當於程式碼 行斷點，只是斷點是在你的程式碼中設定，而非 DevTools 介面。

console.log('a');
console.log('b');
debugger;
console.log('c');

當上述程式碼片段在 Microsoft Edge 執行時，DevTools 會在包含該 debugger 語句的那一行暫停，就在執行該 console.log('c'); 行之前。

條件程式碼行斷點

當你知道需要調查的確切程式碼區域，但只想在其他條件成立時暫停時，使用條件行斷點。

要設定條件程式碼行斷點：

  1. 選擇 來源 工具。

  2. 打開包含你想斷開的程式碼行的檔案。

  3. 去看程式碼那行。

  4. 程式碼行左側是行號欄。 右鍵點擊。

  5. 選擇 新增條件斷點。 程式碼下方會顯示對話框。

    設定條件斷點時會出現的對話框

  6. 在對話框中輸入你的狀況。

  7. 按 Enter 鍵啟動斷點。 行號欄旁會出現一個紅色圖示：

    條件程式碼行斷點

管理程式碼行斷點

使用 中斷點 窗格，從單一位置停用或移除程式碼行中斷點。

斷點小組

  • 選擇條目旁的勾選框來停用該斷點。

  • 右鍵點擊某個條目即可移除該中斷點。

  • 在 斷點 面板中任意地點右鍵點擊即可移除所有斷點。

要停用所有斷點，請點擊 停用斷點 (停用 斷點圖示) 按鈕：

停用斷點按鈕

DOM 變更斷點

當你想暫停改變 DOM 節點或子節點的程式碼時，可以使用 DOM 變更斷點。

要設定 DOM 變更斷點：

  1. 選擇 元素 工具。

  2. 選擇你想設定斷點的元素。

  3. 右鍵點擊元素，點選 「中斷」，然後點選 子樹修改、 屬性修改或 節點移除：

    建立 DOM 變更斷點的右鍵選單

DOM 變更斷點的類型

  • 子樹修改。 當當前選擇節點的子節點被移除或新增，或子節點的內容被更改時會觸發。 子節點屬性變更或當前選擇節點的任何變更都不會觸發。

  • 屬性修改：當當前選擇節點新增或移除屬性，或屬性值變更時觸發。

  • 節點移除：當當前選擇的節點被移除時觸發。

XHR/fetch 斷點

當你想在 XmlHttpRequest (XHR) 或 Fetch 請求發生時中斷時，使用 XHR/fetch 斷點。 DevTools 會在 XHR 或 Fetch 請求發生的程式碼行中暫停。

其中一個有用的例子是，當你的網頁請求錯誤的 URL 時，你想快速找到導致錯誤請求的 XHR 或 Fetch 原始碼。

要設定 XHR 斷點：

  1. 選擇 來源 工具。

  2. 展開 XHR/fetch 斷點 面板。

  3. 點擊 新增斷點。

  4. 輸入你想要斷裂的全部或部分網址。 當你輸入的值出現在 XHR 或 Fetch 請求 URL 中時，DevTools 會暫停。

  5. 按 Enter 確認。

    建立一個 XHR 斷點

事件監聽器斷點

當你想暫停事件觸發後執行的事件監聽器程式碼時，可以使用事件監聽器斷點。 你可以選擇特定事件，例如 click，或事件類別，例如所有滑鼠事件。

  1. 選擇 來源 工具。

  2. 展開 事件監聽器斷點 面板。 DevTools 會顯示一系列事件類別，例如 動畫。

  3. 選擇一個類別，當該類別中的任何事件觸發時暫停。 或者，展開分類，然後選擇特定事件：

    建立事件監聽器斷點

例外斷點

當你想暫停在拋出捕捉或未捕捉異常的程式碼行時，可以使用例外斷點。

  1. 選擇 來源 工具。

  2. 當程式碼拋出 JavaScript 例外時要暫停，請在 Breakpoints 面板中選擇「 暫停未捕捉例外」 的方塊。

  3. 若要在被抓到的例外上暫停，例如當某個例外被區塊抓 try/catch 到時，請選擇「 暫停被抓到的例外」 勾選框：

    例外暫停按鈕

函數斷點

執行 debug(function) 一個方法，其中 function 是你想除錯的 JavaScript 函式，當你想在執行特定函式時暫停。 你可以在程式碼中插入 debug() (，例如在使用 console.log() 語句) 時，或是從 DevTools 控制台 工具執行該方法。

debug() 等同於在函式的第一行設定一個 程式碼行斷點 。

function sum(a, b) {
  let result = a + b; // DevTools will pause before running this line.
  return result;
}

// Call the debug method by passing a reference to the function object,
// not its name as a string.
debug(sum);

sum();

確保目標功能在範圍內

DevTools 會拋 ReferenceError 出一個如果你想除錯的函式不在作用範圍內。

(function () {
  function foo() {
    console.log('foo');
  }

  function bar() {
    console.log('bar');
  }

  // Here, calling debug(bar) works because
  // bar is defined in the current scope.
  debug(bar);

  bar();
})();

// Here, calling debug(foo) won't work, because foo
// isn't defined in the current scope.
debug(foo);

當你從 Console 工具呼叫debug()時，這裡有一種技巧可以確保目標函式在範圍內：

  1. 在函式在作用域內的某個程式碼 行斷點 處設定。

  2. 觸發斷點。 你的程式碼在斷點處暫停，且目前函式的變數都在作用域內。

  3. 在程式碼還停留在程式碼中斷點時，呼叫 debug() DevTools 主控台。

對井點

Logpoint 是一種斷點變體，不會在除錯器中「破壞」，而是直接將訊息記錄到主控台。 你用 DevTools 插入日誌點的方式和其他斷點一樣。

要設定對數點：

  1. 選擇來源工具。

  2. 打開包含你想插入日誌點程式碼的檔案。

  3. 右鍵點擊程式碼行左側的行號欄。

  4. 選擇 新增 logpoint。 程式碼下方會顯示對話框。

  5. 輸入訊息或 JavaScript 表達式，當 logpoint 被觸發時會被評估。

  6. 按下 Enter 鍵即可啟動 logpoint。 行號旁會出現一個紅色圖示。

另請參閱:

另請參閱

注意事項

本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可在此找到 ，作者為 Kayce Basques。

創用CC授權 本作品採用 創用CC 姓名標示4.0國際授權條款授權。

  • Last updated on