使用中斷點暫停 JavaScript 程式碼。本指南說明開發人員工具中的每種中斷點,以及使用時機與設定方式。如需偵錯程序的互動式教學課程,請參閱開始在 Chrome 開發人員工具中對 JavaScript 進行偵錯。
各種中斷點類型的使用時機總覽
最廣為人知的中斷點類型就是程式碼行。但是,如果您不知道要查看什麼位置,或使用的是大型程式碼集,可能會導致程式碼行中斷點沒有效率。瞭解其他類型的中斷點使用方法和時機,有助於您在偵錯時節省時間。
中斷點類型 | 適用時機 |
---|---|
程式碼行 | 僅在確切的編碼區域上暫停。 |
程式碼條件行 | 在程式碼的確切區域暫停,但只在其他條件為 true 時才會暫停。 |
記錄點 | 將訊息記錄在控制台中,不必暫停執行作業。 |
DOM | 暫停在變更或移除特定 DOM 節點或其子項的程式碼上。 |
XHR | 當 XHR 網址含有字串模式時暫停。 |
事件監聽器 | 暫停在觸發事件 (例如 click ) 後執行的程式碼。 |
例外狀況 | 暫停擲回捕捉到或未偵測到的例外狀況的該行程式碼。 |
功能 | 呼叫特定函式時暫停。 |
Trusted Type (信任的類型) | 在「信任的類型」違規情況時暫停。 |
程式碼行中斷點
如果您知道要調查的確切程式碼區域,請使用程式碼中斷點。開發人員工具一律會在執行這行程式碼前暫停。
如何在開發人員工具中設定程式碼行中斷點:
- 按一下「來源」分頁標籤。
- 開啟含有要中斷程式碼的行的檔案。
- 前往程式碼行。
- 程式碼左側是行號欄。按一下該圖示。行號欄的頂端會顯示藍色圖示。
這個範例顯示在第 29 行設定的程式碼行中斷點。
程式碼中的程式碼行中斷點
從程式碼呼叫 debugger
,暫停該行。這相當於程式碼行中斷點,差別在於前者是在程式碼中設定,而不是在開發人員工具 UI 中設定。
console.log('a');
console.log('b');
debugger;
console.log('c');
程式碼行中斷點
如要停止執行作業,但只在部分條件為 true 時停止執行,則使用程式碼的條件行中斷點。
當您想要略過與案例無關的中斷點時 (尤其是在迴圈中),這類中斷點非常實用。
如要設定程式碼行中斷點,請按照下列步驟操作:
- 開啟「來源」分頁。
- 開啟含有要中斷程式碼的行的檔案。
- 前往程式碼行。
- 程式碼左側是行號欄。在該項目上按一下滑鼠右鍵。
- 選取「新增條件中斷點」。程式碼行下方會顯示對話方塊。
- 在對話方塊中輸入條件。
- 按下 Enter 鍵啟用中斷點。行號欄頂端會顯示帶有問號的橘色圖示。
此範例顯示只有在疊代迴圈 x
超過 10
時,才會觸發條件行中斷點i=6
。
記錄程式碼行中斷點
使用程式碼行中斷點 (記錄點) 將訊息記錄到控制台,不必暫停執行,也不會透過 console.log()
呼叫讓程式碼更加井然有序。
若要設定記錄點:
- 開啟「來源」分頁。
- 開啟含有要中斷程式碼的行的檔案。
- 前往程式碼行。
- 程式碼左側是行號欄。在該項目上按一下滑鼠右鍵。
- 選取「新增記錄點」。程式碼行下方會顯示對話方塊。
在對話方塊中輸入記錄訊息。您可以利用與
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'}
按下 Enter 鍵啟用中斷點。行號欄頂端會顯示帶有兩個點的粉紅色圖示。
此範例顯示位於第 30 行的記錄點,將字串和變數值記錄到 Console。
編輯程式碼行中斷點
您可以使用「Breakpoints」窗格,停用、編輯或移除程式碼行中斷點。
編輯中斷點群組
「Breakpoints」窗格會依檔案將中斷點分組,並依行和欄編號排序。您可以利用群組執行下列操作:
- 如要收合或展開群組,請按一下群組名稱。
- 如要個別啟用或停用群組或中斷點,請按一下群組或中斷點旁邊的 。
- 如要移除群組,請將滑鼠遊標懸停在該群組上,然後按一下 。
這部影片說明如何收合群組,以及依群組或群組逐一停用/啟用中斷點。停用中斷點時,「Sources」面板會在行號旁邊顯示標記。
群組具有內容選單。在「Breakpoints」窗格中,在群組上按一下滑鼠右鍵,然後選擇:
- 移除檔案 (群組) 中的所有中斷點。
- 停用檔案中的所有中斷點。
- 啟用檔案中的所有中斷點。
- 移除所有檔案中的中斷點。
- 移除其他群組中的其他中斷點。
編輯中斷點
如要編輯中斷點,請按照下列步驟操作:
- 按一下中斷點旁邊的 ,即可啟用或停用中斷點。停用中斷點時,「Sources」面板會在行號旁邊顯示標記。
- 將滑鼠遊標懸停在中斷點上,然後按一下 進行編輯, 則可移除該中斷點。
編輯中斷點時,請透過內嵌編輯器的下拉式清單變更類型。
在中斷點上按一下滑鼠右鍵,即可查看相關內容選單,並選擇下列其中一個選項:
- 顯示位置。
- 編輯條件或記錄點。
- 啟用所有中斷點。
- 停用所有中斷點。
- 移除中斷點。
- 移除檔案中的其他中斷點。
- 移除所有檔案中的中斷點。
觀看影片,瞭解各種中斷點編輯作業的實際運作情形:停用、移除、編輯條件、顯示選單中的位置,以及變更類型。
DOM 變更中斷點
當您想暫停變更 DOM 節點或其子項的程式碼時,請使用 DOM 變更中斷點。
如何設定 DOM 變更中斷點:
- 按一下「元素」分頁標籤。
- 前往要設定中斷點的元素。
- 在元素上按一下滑鼠右鍵。
- 將遊標懸停在「Break on」上,然後選取「Subtree 宣傳活動」、「屬性修改」或「節點移除」。
本例顯示建立 DOM 變更中斷點的內容選單。
您可以在下列位置找到 DOM 變更中斷點清單:
- 「Elements」(元素) >「DOM Breakpoints」窗格。
- 「Sources」(來源) >「DOM Breakpoints」側邊窗格。
您可以在該分頁中:
- 透過 啟用或停用這類功能。
- 在 DOM 上按一下滑鼠右鍵,然後點選「移除」或「顯示」這些這些項目。
DOM 變更中斷點的類型
- 子樹狀結構修改。在目前所選節點的子項移除或新增,或發生子項內容變更時觸發。不會在子項節點屬性變更或目前所選節點的任何變更時觸發。
- 屬性修改:在目前選取的節點新增或移除屬性,或屬性值變更時觸發。
- 移除節點:在目前選取的節點移除時觸發。
XHR/擷取中斷點
當 XHR 的要求網址包含指定字串時,如果您需要進行中斷,請使用 XHR/擷取中斷點。開發人員工具會在 XHR 呼叫 send()
的程式碼行中暫停。
舉例來說,當您看到網頁要求錯誤的網址,而且想要快速找到造成錯誤要求的 AJAX 或擷取原始碼時,就適合採取這種做法。
如何設定 XHR/擷取中斷點:
- 按一下「來源」分頁標籤。
- 展開「XHR Breakpoints」窗格。
- 按一下「 新增中斷點」。
- 輸入要分隔的字串。當這個字串出現在 XHR 要求網址的任何位置時,開發人員工具就會暫停。
- 按下 Enter 鍵即可確認。
這個範例說明如何為網址中包含 org
的任何要求,在 XHR/fetch 中斷點 中建立 XHR/fetch 中斷點。
事件監聽器中斷點
當您想暫停在觸發事件後執行的事件監聽器程式碼上,請使用事件監聽器中斷點。您可以選取特定事件 (例如 click
) 或事件類別,例如所有滑鼠事件。
- 按一下「來源」分頁標籤。
- 展開「Event Listener Breakpoints」窗格。開發人員工具會顯示事件類別清單,例如「Animation」。
- 勾選其中一個類別,即可在觸發該類別的任何事件時暫停,或展開該類別並查看特定事件。
這個範例說明如何為 deviceorientation
建立事件監聽器中斷點。
此外,偵錯工具會暫停在網路工作站或工作 (包括共用儲存空間小程式) 中發生的事件。
本例顯示,在 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()
,確認目標函式可能位於範圍內並不容易。這裡介紹的策略如下:
- 在函式所在的位置設定程式碼行中斷點。
- 觸發中斷點。
- 請在開發人員工具控制台中呼叫
debug()
,當程式碼在程式碼中斷點上仍處於暫停狀態時。
信任的型別中斷點
Trusted Type API 可防範「跨網站指令碼攻擊」(XSS) 攻擊的安全漏洞。
.innerHTML
在「Sources」分頁的「Breakpoints」窗格中,前往「CSP violation Breakpoints」區段並啟用下列其中一個選項,或同時啟用兩者,然後執行程式碼:
查看 接收器違規事項。
在這個例子中,因接收器違規問題而暫停執行。
勾選 「違反政策」。
在這個例子中,因違反政策而暫停執行。您可以透過
trustedTypes.createPolicy
設定信任類型政策。
進一步瞭解如何使用這個 API:
- 如要進一步達成安全性目標,請參閱「利用受信任的類型防範 DOM 型跨網站指令碼安全漏洞」一文。
- 如要進行偵錯,請參閱「在 Chrome 開發人員工具中實作 CSP 和可信任類型偵錯」。