使用中斷點暫停程式碼

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用中斷點暫停 JavaScript 程式碼。本指南將說明 DevTools 提供的每種中斷點類型，以及何時使用及如何設定每種類型。如需偵錯程序的互動式教學課程，請參閱「在 Chrome 開發人員工具中開始偵錯 JavaScript」。

各中斷點類型的使用時機總覽

最常見的中斷點類型是程式碼行。但是，程式碼行的中斷點設定可能並不容易，特別是當您不知道該從何處查看，或使用了大型程式碼集時。瞭解其他類型的中斷點的使用方式和時機，就能在偵錯時節省時間。

中斷點類型適用情況
程式碼行在特定的程式碼區域中暫停。
條件式程式碼行在程式碼的特定區域中暫停，但只在其他條件符合時暫停。
記錄點將訊息記錄到控制台，且不暫停執行。
DOM暫停變更或移除特定 DOM 節點或其子項的程式碼。
XHR當 XHR 網址包含字串模式時暫停。
事件監聽器在觸發事件 (例如 click) 後執行的程式碼上暫停。
例外狀況針對擲出或未偵測到例外狀況的程式碼，暫停這行。
功能呼叫特定函式時暫停。
信任類型在遇到 Trusted Type 違規時暫停。

程式碼行中斷點

當您知道需要調查的確切程式碼區域時，請使用程式碼行中斷點。開發人員工具「一律」會在執行這行程式碼前暫停。

如要在開發人員工具中設定一行程式碼中斷點，請按照下列步驟操作：

  1. 按一下「來源」面板。
  2. 開啟檔案，其中包含您要換行的程式碼。
  3. 前往程式碼行。
  4. 程式碼列左側是行號欄，按一下該圖示。行號欄頂端會顯示藍色圖示。

程式碼行中斷點。

這個範例顯示在 29 行設定的程式碼行中斷點。

程式碼中的程式碼行中斷點

從程式碼呼叫 debugger，即可在該行暫停。這等同於程式碼行中斷點，不過您必須在程式碼中設定中斷點，而不是在開發人員工具 UI 中設定。

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

條件式程式碼行中斷點

如要停止執行作業，但只在某些條件為 true 時才停止，請使用條件式程式碼行中斷點。

當您想要略過與案例無關的中斷點時 (尤其是迴圈中)，這類中斷點就能派上用場。

如要設定條件式程式碼行中斷點，請按照下列步驟操作：

  1. 開啟「來源」面板。
  2. 開啟含有要中斷的程式碼行的檔案。
  3. 前往程式碼行。
  4. 行號的左側是行號欄。在該項目上按一下滑鼠右鍵。
  5. 選取「新增條件中斷點」。系統會在程式碼行下方顯示對話方塊。
  6. 在對話方塊中輸入條件。
  7. 按下 Enter 鍵即可啟用中斷點。行號欄頂端會顯示帶有問號的橘色圖示。

條件行程式碼中斷點。

這個範例顯示只有在疊代迴圈中x超過 10 時觸發的條件行中斷點i=6。

記錄程式碼中斷點

使用記錄程式碼行中斷點 (logpoints)，將訊息記錄到主控台，不必暫停執行作業，也不必使用 console.log() 呼叫來雜亂程式碼。

如要設定記錄點，請按照下列步驟操作：

  1. 開啟「來源」面板。
  2. 開啟含有要中斷的程式碼行的檔案。
  3. 前往程式碼行。
  4. 程式碼列左側是行號欄，按一下滑鼠右鍵。
  5. 選取「新增記錄點」。對話方塊會顯示在程式碼行下方。

  6. 在對話方塊中輸入記錄訊息。您可以使用與 console.log(message) 呼叫相同的語法。

    舉例來說，您可以記錄：

    "A string " + num, str.length > 1, str.toUpperCase(), obj

    在這種情況下，記錄訊息如下：

    // str = "test"
// num = 42
// obj = {attr: "x"}
A string 42 true TEST {attr: 'x'}

  7. 按下 Enter 鍵即可啟用中斷點。行號欄頂端會顯示一個有兩個圓點的粉紅色圖示。

記錄點，可將字串和變數值記錄到主控台。

這個範例顯示第 30 列的記錄點，該記錄點會將字串和變數值記錄到控制台。

編輯程式碼行中斷點

使用「Breakpoints」專區停用、編輯或移除程式碼行中斷點。

編輯中斷點群組

「Breakpoints」部分會依檔案分組中斷點，並依行號和欄號排序。您可以透過群組執行以下操作：

  • 如要收合或展開群組，請按一下群組名稱。
  • 如要個別啟用或停用群組或中斷點，請按一下群組或中斷點旁邊的 核取方塊。。
  • 如要移除群組，請將滑鼠游標懸停在群組上，然後按一下 收市。。

這部影片說明如何收合群組，並逐一或逐群組停用/啟用中斷點。停用中斷點後，「來源」面板會將行號旁的標記設為透明。

群組會提供內容選單。在「中斷點」部分，按一下群組並選擇：

群組的內容選單。

  • 移除檔案 (群組) 中的所有中斷點。
  • 停用檔案中的所有中斷點。
  • 啟用檔案中的所有中斷點。
  • 移除所有檔案中的所有中斷點。
  • 移除其他中斷點 (位於其他群組中)。

編輯中斷點

如何編輯中斷點：

  • 按一下中斷點旁的 核取方塊。，即可啟用或停用中斷點。停用中斷點時，「Sources」面板會在行號旁將標記設為透明。
  • 將滑鼠游標懸停在暫停點上，然後點選 。 即可編輯，點選 收市。 則可移除。

  • 編輯中斷點時，請從內嵌編輯器的下拉式清單中變更其類型。

    變更中斷點的類型。

  • 按一下滑鼠右鍵即可查看中斷點的內容選單，然後選擇其中一個選項：

    中斷點的內容選單。

    • 顯示位置。
    • 編輯條件或記錄點。
    • 啟用所有中斷點。
    • 停用所有中斷點。
    • 移除中斷點。
    • 移除其他中斷點 (在所有檔案中)。
    • 移除所有中斷點 (所有檔案)。

您可以觀看影片，瞭解各種中斷點編輯的實際操作：停用、移除、編輯條件、顯示選單中的位置及變更類型。

使用「永不暫停此處」即可略過中斷點

使用「永不暫停在此」程式碼中斷點，略過因其他原因而發生的暫停。當您已開啟例外狀況中斷點，但偵錯工具不斷在您不想偵錯的特別雜亂的例外狀況上停止時，這項功能就會派上用場。

如要將廣告插播點設為靜音，請按照下列步驟操作：

  1. 在「來源」面板中開啟來源檔案，找出您「不想」繼續執行作業的行。
  2. 在左側導致斷行的陳述式旁邊，在行號欄的行號上按一下滑鼠右鍵。
  3. 在下拉式選單中選取「永不暫停」。線條旁邊會顯示橘色 (條件式) 中斷點。

您也可以在執行作業暫停期間靜音中斷點。請觀看下一部影片，瞭解工作流程。

有了「永不暫停此處」，您就能將偵錯工具陳述式和所有其他中斷點類型靜音，但行碼中斷點和事件監聽器中斷點除外。

如果不應暫停的陳述式與導致暫停的陳述式不同，Never pause here 可能會在包含多個陳述式的一行失敗。在來源對應程式碼中，並非所有中斷點位置都會對應至造成中斷的原始陳述式。

DOM 變更中斷點

如要暫停變更 DOM 節點或子項的程式碼，請使用 DOM 變更中斷點。

如要設定 DOM 變更中斷點，請按照下列步驟操作：

  1. 按一下「元素」分頁標籤。
  2. 前往要設定中斷點的元素。
  3. 在元素上按一下滑鼠右鍵。
  4. 將滑鼠游標懸停在「Break on」上，然後選取「Subtree modifications」、「Attribute modifications」或「Node removal」。

用於建立 DOM 變更中斷點的內容選單。

這個範例顯示建立 DOM 變更中斷點的內容選單。

您可以在下列位置找到 DOM 變更中斷點清單：

  • 依序前往「Elements」>「DOM 中斷點」窗格。
  • 來源 > DOM 中斷點側邊面板。

「元素」和「來源」面板中的 DOM 中斷點清單。

您可以執行下列操作：

  • 使用 核取方塊。 啟用或停用這些項目。
  • 在 DOM 中按一下滑鼠右鍵，然後依序點選「移除」或「顯示」。

DOM 變更中斷點的類型

  • 子目錄修改。當目前選取的節點的子項遭到移除或新增，或是子項的內容有所變更時，就會觸發此事件。不會在子節點屬性變更或目前所選節點的任何變更時觸發。
  • 屬性修改：在目前所選節點上新增或移除屬性，或屬性值變更時觸發。
  • 移除節點：在移除目前選取的節點時觸發。

XHR/擷取中斷點

如果 XHR 的要求網址包含指定字串時想要中斷，請使用 XHR/擷取中斷點。開發人員工具會在 XHR 呼叫 send() 的程式碼行暫停。

當您發現網頁要求錯誤的網址，且想快速找出造成錯誤要求的 AJAX 或 Fetch 原始碼時，就很有用。

如要設定 XHR/Fetch 中斷點，請按照下列步驟操作：

  1. 按一下「來源」面板。
  2. 展開「XHR Breakpoints」窗格。
  3. 按一下 加入訂單「Add Breakpoint」(新增中斷點)。
  4. 輸入要分割的字串。當這個字串出現在 XHR 要求網址的任何位置時，開發人員工具就會暫停。
  5. 按下 Enter 鍵即可確認操作。

建立 XHR/Fetch 中斷點。

本例說明如何針對網址中含有 org 的任何要求，在 XHR/fetch Breakpoints 中建立 XHR/擷取中斷點。

事件監聽器中斷點

如要暫停在事件觸發後執行的事件監聽器程式碼，請使用事件監聽器斷點。您可以選取特定事件 (例如 click) 或事件類別 (例如所有滑鼠事件)。

  1. 按一下「來源」面板。
  2. 展開「事件監聽器中斷點」窗格。開發人員工具會顯示事件類別清單，例如「動畫」。
  3. 只要勾選其中一個類別，即可在觸發該類別的任何事件時暫停，或展開該類別並查看特定事件。

建立事件監聽器中斷點。

本範例說明如何為 deviceorientation 建立事件監聽器斷點。

此外，偵錯工具會在網頁工作站或任何類型的工作項 (包括共用儲存空間工作項) 中發生的事件上暫停。

偵錯工具已在服務工作者的事件上暫停。

這個範例顯示 Debugger 已暫停在 setTimer 事件中發生的服務工作站。

您也可以在「元素」>「事件監聽器」窗格中，查看事件監聽器清單。

例外狀況中斷點

在擲出未偵測到或未偵測到例外狀況的程式碼行上，如果您想暫停程式碼，請使用例外狀況中斷點。您可以在 Node.js 以外的任何偵錯工作階段中，個別暫停這兩種例外狀況。

在「來源」面板的「中斷點」部分中，啟用下列任一或兩個選項，然後執行程式碼：

  • 勾選 核取方塊。「在遇到未偵測到的例外狀況時暫停」。

    當對應的核取方塊啟用時，在未偵測到的例外狀況上暫停。

    在這個範例中，系統在發生未偵測到的例外狀況時暫停執行。

  • 勾選「在偵測到例外狀況時暫停」圖示 核取方塊。。

    在對應的核取方塊啟用時，在偵測到例外狀況時暫停。

    在這個範例中，系統會在遇到例外狀況時暫停執行。

非同步呼叫中的例外狀況

只要已開啟其中一個或兩個已偵測和未偵測的核取方塊，Debugger 就會嘗試在同步和非同步呼叫中暫停對應的例外狀況。在非同步的情況下，Debugger 會從承諾的拒絕處理常式尋找停止時間。

已擷取的例外狀況和忽略的程式碼

開啟「Ignore List」後，Debugger 會在非忽略的框架中或在呼叫堆疊中傳遞此類框架時，暫停處理例外狀況。

下例顯示 Debugger 在遭到忽略的 library.js 傳遞至未忽略的 mycode.js 時，在已偵測到的例外狀況上暫停。

暫停於會通過呼叫堆疊中未忽略的框架的例外狀況時。

如要進一步瞭解極端情況下Debugger 的行為，請在這個示範頁面上測試一系列情境。

函式中斷點

如要暫停每次呼叫特定函式的動作，請呼叫 debug(functionName)，其中 functionName 是您要偵錯的函式。您可以在程式碼中插入 debug() (例如 console.log() 陳述式)，或透過開發人員工具控制台呼叫。debug() 相當於在函式的第 1 行設定程式碼中斷點。

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

確認目標函式位於範圍內

如果要偵錯的函式不在範圍內，DevTools 會擲回 ReferenceError。

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

如果是從開發人員工具控制台呼叫 debug()，確保目標函式位於範圍內可能並不容易。方法有兩種：

  1. 在函式範圍內的某處設定程式碼中斷點。
  2. 觸發中斷點。
  3. 在程式碼中斷點暫停程式碼時，在開發人員工具控制台中呼叫 debug()。

Trusted Type 中斷點

Trusted Type API 可防範跨網站指令碼 (XSS) 攻擊等安全漏洞。

在「來源」面板的「中斷點」部分中，前往「CSP 違規中斷點」部分，啟用下列任一或兩個選項，然後執行程式碼：

  • 查看 核取方塊。 接收器違規事項。

    啟用對應的核取方塊時，會在接收端違規時暫停。

    在這個範例中，執行作業會在匯流程式違規時暫停。

  • 請查看核取方塊。「違反政策」。

    啟用對應的核取方塊時，系統會在政策違規時暫停。

    在這個例子中，執行作業會在政策違規時暫停。可信類型政策可使用 trustedTypes.createPolicy 設定。

如要進一步瞭解如何使用 API，請參閱以下資源：