使用中斷點暫停程式碼

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

最常見的中斷點類型是程式碼。但程式碼中斷點可能會 設定的排序效率較低，特別是當您不知道該從何處查看，或您是否正在與 大型程式碼集瞭解您 幾種中斷點

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

程式碼行中斷點

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

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

  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，而不會暫停執行作業，且不會透過 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 行的記錄點，將字串和變數值記錄到「Console」。

編輯程式碼行中斷點

在「Breakpoints」區段中，停用、編輯或移除程式碼中斷點。

編輯中斷點群組

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

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

這部影片說明如何收合群組，以及如何逐一或個別群組停用/啟用中斷點。停用中斷點時，「Sources」面板會在行號旁將標記設為透明。

群組會提供內容選單。在「Breakpoints」區段中，在群組上按一下滑鼠右鍵，然後選擇：

群組的內容選單。

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

編輯中斷點

如何編輯中斷點：

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

  • 編輯中斷點時，請在內嵌編輯器的下拉式清單中選取類型。

    變更中斷點的類型。

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

    中斷點的內容選單。

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

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

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

使用「永不暫停在此」程式碼中斷點，略過因其他原因而發生的暫停。當您啟用例外狀況中斷點後，偵錯工具就會持續停止在您不想進行偵錯的特別雜訊例外狀況上時停止。

如要忽略休息地點，請按照下列步驟操作：

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

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

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

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

DOM 變更中斷點

當您想要在變更 DOM 節點或其節點的程式碼中，使用 DOM 變更中斷點 。

如何設定 DOM 變更中斷點：

  1. 按一下「元素」分頁標籤。
  2. 前往要設定中斷點的元素。
  3. 在元素上按一下滑鼠右鍵。
  4. 將滑鼠遊標懸停在「分隔設定」上，然後選取「子樹狀結構修改」、「屬性修改內容」，或 移除節點：

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

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

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

  • 元素 >「DOM 中斷點」窗格。
  • 來源 >「DOM 中斷點」側邊窗格。

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

您可以在該分頁中執行下列操作：

  • 請使用 核取方塊。 啟用或停用這些裝置。
  • 按一下滑鼠右鍵 >在 DOM 中移除或顯示這些圖片。

DOM 變更中斷點的類型

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

XHR/擷取中斷點

如果 XHR 的要求網址包含指定的 字串。開發人員工具會在 XHR 呼叫 send() 的程式碼行暫停。

當你發現您的網頁要求錯誤的網址時 ，您可以快速找出造成錯誤要求的 AJAX 或 Fetch 原始碼。

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

  1. 按一下「來源」面板。
  2. 展開「XHR Breakpoints」窗格。
  3. 按一下「新增中斷點」圖示 加入訂單。
  4. 輸入做為分隔字串的字串。找到此字串時，開發人員工具會暫停 。
  5. 按下 Enter 鍵即可確認操作。

建立 XHR/擷取中斷點。

本例說明如何針對任何包含 XHR/fetch 中斷點的要求， org。

事件監聽器中斷點

如要在 就會觸發這個事件您可以選取特定事件 (例如 click)，也可以選取事件類別，例如 所有滑鼠事件。

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

建立事件監聽器中斷點。

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

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

Debugger 已在 Service Worker 的事件上暫停。

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

您也可以在「元素」>「Event Listeners」(事件監聽器) 窗格。

例外狀況中斷點

在擲出或 您可以在 Node.js 以外的任何偵錯工作階段中，分別暫停這兩種例外狀況。

在「Sources」面板的「Breakpoints」區段中，啟用下列其中一個選項或同時啟用兩者，然後執行程式碼：

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

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

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

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

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

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

非同步呼叫中的例外狀況

「偵錯」和「未擷取」核取方塊啟用時，「Debugger」嘗試在同步和非同步呼叫中，嘗試暫停對應的例外狀況。在非同步的情況下，Debugger 會從承諾的拒絕處理常式尋找停止時間。

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

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

下一個範例顯示 Debugger 暫停在傳遞未忽略的 mycode.js 所擲回的 library.js 所擲回的例外狀況上。

暫停於會通過呼叫堆疊中未忽略的影格的擷取例外狀況時暫停。

如要進一步瞭解在邊緣案例中的偵錯工具行為，請參閱這個示範頁面，測試各種情境。

函式中斷點

呼叫 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) 攻擊。

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

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

    對應的核取方塊處於啟用狀態，因接收器違規而暫停。

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

  • 查看 核取方塊。 項違反政策。

    勾選對應的核取方塊後，因違反政策而遭暫停。

    在此範例中，系統會因為違反政策而暫停執行。信任類型政策可使用 trustedTypes.createPolicy 進行設定。

請參閱以下文章，瞭解如何使用 API：