使用中斷點暫停程式碼

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用中斷點暫停 JavaScript 程式碼。本指南說明開發人員工具中的每種中斷點，以及使用時機與設定方式。如需偵錯程序的互動式教學課程，請參閱開始在 Chrome 開發人員工具中對 JavaScript 進行偵錯。

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

最廣為人知的中斷點類型就是程式碼行。但是，如果您不知道要查看什麼位置，或使用的是大型程式碼集，可能會導致程式碼行中斷點沒有效率。瞭解其他類型的中斷點使用方法和時機，有助於您在偵錯時節省時間。

中斷點類型適用時機
程式碼行僅在確切的編碼區域上暫停。
程式碼條件行在程式碼的確切區域暫停，但只在其他條件為 true 時才會暫停。
記錄點將訊息記錄在控制台中，不必暫停執行作業。
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。

記錄程式碼行中斷點

使用程式碼行中斷點 (記錄點) 將訊息記錄到控制台，不必暫停執行，也不會透過 console.log() 呼叫讓程式碼更加井然有序。

若要設定記錄點：

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

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

    舉例來說，您可以記錄：

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

    本例中記錄的訊息如下：

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

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

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

此範例顯示位於第 30 行的記錄點，將字串和變數值記錄到 Console。

編輯程式碼行中斷點

您可以使用「Breakpoints」窗格，停用、編輯或移除程式碼行中斷點。

編輯中斷點群組

「Breakpoints」窗格會依檔案將中斷點分組，並依行和欄編號排序。您可以利用群組執行下列操作：

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

這部影片說明如何收合群組，以及依群組或群組逐一停用/啟用中斷點。停用中斷點時，「Sources」面板會在行號旁邊顯示標記。

群組具有內容選單。在「Breakpoints」窗格中，在群組上按一下滑鼠右鍵，然後選擇：

群組的內容選單。

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

編輯中斷點

如要編輯中斷點，請按照下列步驟操作：

  • 按一下中斷點旁邊的 核取方塊。，即可啟用或停用中斷點。停用中斷點時，「Sources」面板會在行號旁邊顯示標記。
  • 將滑鼠遊標懸停在中斷點上，然後按一下 。 進行編輯，收市。 則可移除該中斷點。

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

    變更中斷點的類型。

  • 在中斷點上按一下滑鼠右鍵，即可查看相關內容選單，並選擇下列其中一個選項：

    中斷點的內容選單。

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

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

DOM 變更中斷點

當您想暫停變更 DOM 節點或其子項的程式碼時，請使用 DOM 變更中斷點。

如何設定 DOM 變更中斷點：

  1. 按一下「元素」分頁標籤。
  2. 前往要設定中斷點的元素。
  3. 在元素上按一下滑鼠右鍵。
  4. 將遊標懸停在「Break on」上，然後選取「Subtree 宣傳活動」、「屬性修改」或「節點移除」。

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

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

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

  • 「Elements」(元素) >「DOM Breakpoints」窗格。
  • 「Sources」(來源) >「DOM Breakpoints」側邊窗格。

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

您可以在該分頁中：

  • 透過 核取方塊。 啟用或停用這類功能。
  • 在 DOM 上按一下滑鼠右鍵，然後點選「移除」或「顯示」這些這些項目。

DOM 變更中斷點的類型

  • 子樹狀結構修改。在目前所選節點的子項移除或新增，或發生子項內容變更時觸發。不會在子項節點屬性變更或目前所選節點的任何變更時觸發。
  • 屬性修改：在目前選取的節點新增或移除屬性，或屬性值變更時觸發。
  • 移除節點：在目前選取的節點移除時觸發。

XHR/擷取中斷點

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

舉例來說，當您看到網頁要求錯誤的網址，而且想要快速找到造成錯誤要求的 AJAX 或擷取原始碼時，就適合採取這種做法。

如何設定 XHR/擷取中斷點：

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

建立 XHR/擷取中斷點。

這個範例說明如何為網址中包含 org 的任何要求，在 XHR/fetch 中斷點 中建立 XHR/fetch 中斷點。

事件監聽器中斷點

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

  1. 按一下「來源」分頁標籤。
  2. 展開「Event Listener Breakpoints」窗格。開發人員工具會顯示事件類別清單，例如「Animation」。
  3. 勾選其中一個類別，即可在觸發該類別的任何事件時暫停，或展開該類別並查看特定事件。

建立事件監聽器中斷點。

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

此外，偵錯工具會暫停在網路工作站或工作 (包括共用儲存空間小程式) 中發生的事件。

偵錯工具已針對 Service Worker 的事件暫停。

本例顯示，在 Service Worker 中發生的 setTimer 事件中，Debugger 暫停了。

您也可以前往「Elements」(元素) >「Event Listeners」(事件監聽器) 窗格，查看事件監聽器清單。

例外狀況中斷點

在擲回已擷取或未擷取例外狀況的程式碼行中，使用例外狀況中斷點。您可以在 Node.js 以外的任何偵錯工作階段中，單獨暫停這類例外狀況。

在「Sources」分頁的「Breakpoints」窗格中，啟用下列其中一個選項或同時啟用兩者，然後執行程式碼：

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

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

    在此範例中，在未偵測到的例外狀況上暫停執行。

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

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

    在此範例中，在偵測到的例外狀況時暫停執行。

非同步呼叫中的例外狀況

無論是同步或非同步呼叫，偵錯工具都會嘗試暫停對應的例外狀況。在非同步案例中，Debugger 會在各項承諾中尋找拒絕處理常式，以判斷何時該停止。

擷取例外狀況並忽略程式碼

啟用「忽略清單」後，偵錯工具會在偵測到的例外狀況發生在未忽略的影格中，或是在呼叫堆疊中通過這類影格時暫停。

下一個範例顯示，Debugger 已暫停在遭到忽略的 library.js 擲回的已偵測到例外狀況，而該 library.js 通過未忽略的 mycode.js。

在通過呼叫堆疊中未忽略的已擷取例外狀況時暫停。

如要進一步瞭解極端案例中的 Debugger 行為，請前往這個示範頁面測試一系列情境。

函式中斷點

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

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();

確認目標函式位於範圍內

如果要偵錯的函式不在範圍內，開發人員工具會擲回 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 API 可防範「跨網站指令碼攻擊」(XSS) 攻擊的安全漏洞。

.innerHTML

在「Sources」分頁的「Breakpoints」窗格中，前往「CSP violation Breakpoints」區段並啟用下列其中一個選項，或同時啟用兩者，然後執行程式碼：

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

    當對應的核取方塊啟用時，已在接收器違規問題暫停。

    在這個例子中，因接收器違規問題而暫停執行。

  • 勾選 核取方塊。「違反政策」。

    在啟用對應的核取方塊時，因違反政策而遭暫停。

    在這個例子中，因違反政策而暫停執行。您可以透過 trustedTypes.createPolicy 設定信任類型政策。

進一步瞭解如何使用這個 API：