上一節：JavaScript調試：使用Google Chrome Debugger【簡潔；高效；易學】
一共兩節（基本上調試JavaScript夠用了）
使用斷點暫停JavaScript代碼。本指南介紹了DevTools中可用的每種類型的斷點，以及何時使用以及如何設定每種類型。有關調試過程的動手教程，請參閱Chrome DevTools中的調試JavaScript入門。
何時使用每個斷點類型的概述
最着名的斷點類型是代碼行。但是代碼行斷點的設定效率很低，特别是如果您不确切地知道要查找的位置，或者您正在使用大型代碼庫。通過了解如何以及何時使用其他類型的斷點，您可以在調試時節省時間。
| 斷點類型 | 當你想要暫停時使用這個... |
|---|---|
| 行的代碼Line-of-code | 在确切的代碼區域。 |
| 條件行代碼Conditional line-of-code | 在确切的代碼區域，但僅在某些其他條件為真時。 |
| DOM | 在更改或删除特定DOM節點或其子節點的代碼上。 |
| XHR | 當XHR URL包含字元串模式時。 |
| 事件監聽器Event listener | 在事件之後運作的代碼，例如 |
| 例外Exception | 在抛出捕獲或未捕獲異常的代碼行上。 |
| 功能Function | 每當調用特定函數時。 |
代碼行斷點
當您知道需要調查的确切代碼區域時，請使用代碼行斷點。在執行這行代碼之前，DevTools 總是暫停。
在DevTools中設定代碼行斷點：
- 單擊“ Sources ”頁籤。
- 打開包含要中斷的代碼行的檔案。
- 去代碼行。
- 代碼行的左側是行号列。點選它。行号列頂部會顯示一個藍色圖示。
圖1：第29行設定的代碼行斷點
代碼中的代碼行斷點
debugger
從您的代碼調用以暫停該行。這相當于代碼行斷點，除了斷點是在代碼中設定的，而不是在DevTools UI中。
console.log('a');
console.log('b');
debugger;
console.log('c'); 條件行代碼斷點
當您知道需要調查的确切代碼區域時，請使用條件行代碼斷點，但隻有在其他條件為真時才要暫停。
設定條件行代碼斷點：
- 代碼行的左側是行号列。右鍵單擊它。
- 選擇Add conditional breakpoint。代碼行下方會顯示一個對話框。
- 在對話框中輸入您的條件。
- 按Enter以激活斷點。行号列頂部會顯示橙色圖示。
圖2：第32行設定的條件行代碼斷點
管理代碼行斷點
使用“ 斷點”窗格可以從單個位置禁用或删除代碼行斷點。
圖3：Breakpoints窗格顯示兩個代碼行斷點：一個在第15行
get-started.js
，另一個在第32行
- 選中條目旁邊的複選框以禁用該斷點。
- 右鍵單擊某個條目以删除該斷點。
- 右鍵單擊“ Breakpoints”窗格中的任意位置以取消激活所有斷點，禁用所有斷點或删除所有斷點。禁用所有斷點等同于取消選中每個斷點。取消激活所有斷點會訓示DevTools忽略所有代碼行斷點，但也要保持其啟用狀态，以便它們在重新激活它們時處于與之前相同的狀态。
圖4：“ 斷點”窗格中的已停用斷點已禁用且透明
DOM改變斷點
如果要暫停更改DOM節點或其子節點的代碼，請使用DOM更改斷點。
設定DOM更改斷點：
- 單擊“ Elements”頁籤。
- 轉到要設定斷點的元素。
- 右鍵單擊該元素。
- 将滑鼠懸停在“ Break on”上，然後選擇“子樹修改Subtree modifications”，“ 屬性修改Attribute modifications ”或“ 節點删除Node removal”。
圖5：用于建立DOM更改斷點的上下文菜單
DOM的類型更改斷點
- 子樹修改。當删除或添加目前所選節點的子節點或更改子節點的内容時觸發。未在子節點屬性更改或目前所選節點的任何更改上觸發。
- 屬性修改：在目前標明的節點上添加或删除屬性時或屬性值更改時觸發。
- 節點删除：删除目前標明的節點時觸發。
XHR / Fetch斷點
如果要在XHR的請求URL包含指定字元串時中斷，請使用XHR斷點。DevTools暫停XHR調用的代碼行
send()
。
注意：此功能也适用于擷取請求。
這有用的一個示例是，當您看到頁面請求的URL不正确，并且您希望快速找到導緻錯誤請求的AJAX或Fetch源代碼時。
要設定XHR斷點：
- 單擊“ Sources”頁籤。
- 展開“ XHR Breakpoints”窗格。
- 單擊“ Add breakpoint”。
- 輸入要中斷的字元串。當此字元串出現在XHR的請求URL中的任何位置時，DevTools會暫停。
- 按Enter确認。
圖6：在XHR Breakpoints 為
org
URL 中包含的任何請求建立XHR斷點
事件監聽器斷點
如果要暫停事件觸發後運作的事件偵聽器代碼，請使用事件偵聽器斷點。您可以選擇特定事件，例如事件
click
類别，例如所有滑鼠事件。
- 展開“ Event Listener Breakpoints”窗格。DevTools顯示事件類别清單，例如Animation。
- 檢查其中一個類别，以便在觸發該類别的任何事件時暫停，或者展開類别并檢查特定事件。
圖7：為。建立事件偵聽器斷點
deviceorientation
異常斷點
如果要在抛出捕獲或未捕獲的異常的代碼行上暫停，請使用異常斷點。
- 單擊Pause on exceptions 。啟用後會變為藍色。
JavaScript調試：Pause Code With Breakpoints in Google Chrome Debugger - （可選）如果除了未捕獲的異常之外還要暫停捕獲的異常，請選中“ Pause On Caught Exceptions”複選框。
圖7：暫停未捕獲的異常
功能斷點
當您想要在調用特定函數時暫停時，調用
debug(functionName)
，
functionName
您要調試的函數在哪裡。您可以插入
debug()
代碼（如
console.log()
語句）或從DevTools控制台調用它。
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
如果要調試的函數不在範圍内，DevTools會抛出一個。
(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()
從DevTools控制台調用，確定目标函數在範圍内可能會非常棘手。這是一個政策：
- 在函數作為範圍的某處設定 line-of-code breakpoint。
- 觸發斷點。
-
debug()