使用斷點來暫停JavaScript代碼，審查變量的值和在特定時刻所調用的堆棧。
一旦你設置了斷點，你應該學習如何遍歷你的代碼，並審查你的變量和調用堆棧。
TL;DR
- 設置斷點的最基本的方法是在特定的代碼行上手動添加一個斷點。您也可以將這些斷點配置為僅在滿足特定條件時觸發。
- 您還可以設置在滿足一般條件時觸發的斷點，例如事件，DOM更改或未捕獲異常。
在代碼特定行上設置斷點
當您知道要審查的語句時，在特定代碼行上設置斷點很有用。例如，如果您的登錄流程未按預期工作，並且您的代碼中只有一個函數來處理登錄，那么可以安全地假設該錯誤可能在該函數中。在這種情況下，在該函數的第一行添加斷點是有意義的。
當你在一行代碼上設置斷點時，代碼總是會在這一行代碼上暫停，直到您刪除斷點，禁用它，或使其有條件觸發。
要在特定代碼行上設置斷點，首先打開Sources(源文件)面板，並在左側的File Navigator(文件導航器)窗格中選擇該腳本。如果找不到File Navigator(文件導航器)，按下Toggle file navigator(切換文件導航器)按鈕（
）。
提示: 如果你使用縮略的代碼，點擊pretty print(代碼美化)按鈕（
）使其可讀。
在源代碼的左側，您可以看到行號。這個區域稱為line number gutter(行號槽)。單擊行號槽中的行號，就會在該行代碼上添加一個斷點。
如果一個表達式占了多行，並且你把一個行斷點放在這個表達式的中間，DevTools會在下一個表達式上設置斷點。例如，如果您嘗試在下面截圖中的第4行設置斷點，DevTools會自動將斷點放在第6行。
使一個行號斷點有條件
只有當您指定的條件為 true 時，才會觸發條件斷點。
右鍵單擊尚未設置斷點的行號，然后點擊Add conditional breakpoint(添加條件斷點)來創建一個條件斷點。如果你已經在一行代碼上添加了斷點，並且希望使斷點有條件，右鍵單擊該斷點，並點擊Edit breakpoint(編輯斷點)。
在文本字段中輸入你的條件，並按 Enter 鍵。
條件斷點是金黃色的。
刪除或禁用一個行號斷點
如果你想臨時忽略一個斷點，然后禁用它。右鍵單擊line number gutter(行號槽)中該斷點，並選擇Disable breakpoint(禁用斷點)。
如果你不再需要一個斷點，然后刪除它。右鍵單擊line number gutter(行號槽)中該斷點，並選擇Remove breakpoint(刪除斷點)。
您還可以在Sources(源文件)面板上的Breakpoints(斷點)窗格中管理所有腳本中的所有行號斷點。
要從Breakpoints(斷點)窗格界面中刪除斷點，右鍵單擊該斷點，並選擇Remove breakpoint(刪除斷點)。
要從此窗格中禁用斷點，請取消勾選其復選框。
要禁用所有斷點，右鍵單擊該窗格,並選擇Deactivate breakpoints(停用斷點)。這個產生的效果與Disable All Breakpoints(禁用所有斷點)選項是相同的。
您也可以在Sources(源文件)面板上,通過點擊Deactivate breakpoints(停用斷點)按鈕(
)來禁用所有斷點。
設置監測DOM變化的斷點
假設在你的代碼中有一個bug，比如錯誤地更改，刪除或添加DOM節點。DevTools提供了一個快速方式來查找這個問題的根本原因：DOM change breakpoints(DOM變化斷點)。
而不是手動搜索導致DOM變化的代碼，DevTools允許您在節點上設置斷點。每當節點，或在某些情況下其子節點之一被添加，刪除或改變時，DevTools暫停頁面，並帶到到導致DOM變化確切的代碼行。
下面是一個現場演示，學習如何設置DOM change breakpoints(DOM變化斷點)。單擊Increment(增加)按鈕使Count加1。 現在就試試。
您在此互動教程中的目標是設置DOM change breakpoints(DOM變化斷點)，當Count增加時觸發，以便您可以檢查修改Count的代碼。
要想添加DOM change breakpoints(DOM變化斷點)：
- 在
Count元素上右鍵單擊，然后選擇Inspect(檢查)。DevTools將這個節點突出顯示為藍色。它應該是一個<p>節點。您可以通過雙擊它來展開節點，以便您可以查看其內容。這樣可以驗證你在正確的節點上。 - 右鍵單擊突出顯示的節點，然后選擇
Break on>Subtree Modifications(子樹修改)。節點左側的藍色圖標
表示在該節點上設置了DOM斷點。當節點突出顯示時，很難看到這個圖標，因為它是一個藍色的圖標，背景也是藍色的。 - 回到演示，單擊
Increment(增加)按鈕。DevTools暫停該頁面，轉到Sources(源文件)面板，並突出顯示腳本中導致更改的代碼行。 - 點擊
Resume script execution(恢復腳本執行)按鈕
兩次，可以恢復腳本執行。您需要按兩次，因為當計數文本被刪除時，斷點被觸發了一次，然后當文本用新計數更新時，斷點被再次觸發。
要在所選節點的屬性更改時，或者當所選擇的節點被刪除時中斷頁面進行調試，，只需在上面的步驟2中選擇Attributes modifications(屬性修改)或Node Removal(節點刪除)代替Subtree Modifications(子樹修改)即可。
提示： 這些斷點不是排他的。您可以在單個節點上同時啟用兩個或所有三個斷點。
要想暫時關閉這個斷點：
- 在DevTools中回到
Elements(元素)面板。 - 單擊
DOM Breakpoints(DOM斷點)窗格。如果你的DevTools窗口很小，DOM Breakpoints(DOM斷點)窗格可能隱藏在溢出菜單
后面。您應該可以看到一個復選框，旁邊有文字，和p下面的Subtree Modifications(子樹修改)。 - 取消勾選
Subtree Modifications(子樹修改)旁邊的復選框。 - 在Demo頁面上，嘗試再次點擊
Increment(增加)按鈕。計數器將遞增，並且DevTools不再暫停頁面。
提示： 將鼠標懸停在p上可以在視口中突出顯示節點。單擊p可以在Elements(元素)面板中選中這個節點。
要想刪除這個斷點：
- 轉到
DOM Breakpoints(DOM斷點)窗格。 - 右鍵單擊要刪除的斷點，然后選擇
Remove breakpoint(刪除斷點)。
更多關於DOM change breakpoints(DOM變化斷點)類型
以下是有關每種類型的DOM change breakpoints(DOM變化斷點)具體觸發時間和觸發方式的詳細信息：
Subtree Modifications(子樹修改) - 當當前選定節點的子節點被刪除，添加或子節點的內容發生更改時觸發。當子節點屬性改變時，或當前選擇的節點發生任何改變，都不會觸發該類型的斷點。Attributes modifications(屬性修改) - 當在當前選定的節點上添加或刪除屬性時,或當屬性值改變時觸發。Node Removal(節點刪除) -當當前選定的節點被刪除時觸發。
在XHR上中斷
有兩種方法可以觸發XHR上的斷點：當任何XHR到達XHR生命周期的某個階段時（readystatechange，load等），或者當XHR的URL與某個字符串匹配時。
如果你想在XHR生命周期的某個階段時中斷，請在事件偵聽器斷點窗格中查看XHR目錄。
要在XHR的URL與某個字符串匹配時中斷，請使用Sources(源文件)面板上的XHR Breakpoints(XHR斷點)窗格。
點擊“+”(加號)按鈕添加一個新的斷點模式。在文本字段中輸入你的字符串，並按Enter鍵保存。
提示：點擊“+”(加號)，然后立即按Enter鍵，可以在發送任何XHR之前觸發斷點。
當一個事件觸發時中斷
當某事件（例如，click(點擊)）或事件類別（例如，任何mouse(鼠標)事件）被觸發時，使用Sources(源文件)面板上的Event Listener Breakpoints(事件偵聽器斷點)窗格中斷。
頂層表示事件的類別。勾選其中一個復選框，以便在觸發該類別的任何事件時暫停。展開頂級類別可以查看其包含的事件。
如果要監視特定事件，找到事件所屬的頂級類別，然后勾選目標事件旁邊的復選框。
在未捕獲的異常上中斷
如果你的代碼拋出異常，你不知道他們來自哪里，點擊Sources(源文件)面板上的pause on exception(在異常上暫停)按鈕（
）。
DevTools在拋出異常的行自動中斷。
說明
翻譯自：https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints
本文內容來自：Chrome DevTools谷歌瀏覽器開發者工具如何設置斷點 – Break易站
—Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)