目錄

• chrome 除錯工具使用
• 斷點除錯
• 程式碼斷點
• 條件斷點
• 管理程式碼斷點
• DOM斷點
• XHR/Fetch 斷點
• 事件監聽器斷點
• 異常斷點
• 進步執行程式碼
• 檢視當前執行上下文
• 檢視當前呼叫堆疊
• 觀察自定義表示式

chrome 除錯工具使用

斷點除錯

程式碼斷點

1、開啟除錯工具（Ctrl/Cmd + Shift + C）。
2、單擊 Sources 選項卡。
3、開啟包含要中斷的程式碼行檔案。
4、在需要暫停的程式碼左側的行號處，點選，行號處會顯示一個藍色的圖示

5、現在重新整理頁面，當代碼執行到這一行就會暫停

條件斷點

除了普通的斷點外，還可以使用條件斷點，不過只有在條件為真時才會暫停。

1、在程式碼行左側的行號處，右鍵單擊。
2、選擇 add conditional breakpoint

管理程式碼斷點

斷點多了，有時候自己也亂。這個時候可以在右側的 Breakpoints 窗格管理斷點。這裡顯示每個斷點對應的行號和程式碼

1、點選斷點前的複選框可以禁用該斷點。
2、右鍵單擊某個條目，可以撥出選單以刪除該斷點，取消啟用所有斷點，禁用所有斷點或刪除所有斷點，刪除除此斷點外的其他斷點。其中取消啟用所有斷點會指示DevTools忽略所有程式碼行斷點，但也要保持其啟用狀態，以便它們在重新啟用它們時處於與之前相同的狀態。
3、單擊斷點其他位置，可以聯動到該程式碼在編輯器的位置，並且背景會標黃

DOM斷點

有時候可能需要在DOM節點發生改變的時，對程式碼暫停。這是就可以設定DOM更改斷點。

1、切換到 Elements 選項卡。
2、右鍵點選需要設定斷點的元素，撥出選單。
3、將滑鼠移動到 Break on 上，然後選擇 “子樹修改”，“屬性修改” 或 “節點刪除”。

三種斷點型別解釋：

• 子樹修改。當刪除或添加當前所選節點的子節點或更改子節點的內容時觸發。未在子節點屬性更改或當前所選節點的任何更改上觸發。
• 屬性修改：在當前選定的節點上新增或刪除屬性時或屬性值更改時觸發。
• 節點刪除：刪除當前選定的節點時觸發

XHR/Fetch 斷點

如果要在XHR請求的時候，對包含指定字串的URL進行中斷，可以使用此斷點。DevTools暫停XHR呼叫的程式碼行 send()。（Fetch 也適用）

1、切換到 Sources 選項卡。
2、展開 XHR/Fetch Breakpoints 窗格。
3、點選右側的加號新增斷點。
4、在彈出的輸入框輸入URL包含的字串，回車，包含這段字串的URL，在發出請求的時候，DevTools就會暫停。注意，如果輸入為空，將對任何請求進行暫停。

事件監聽器斷點

如果要暫停事件觸發後執行的事件監聽器程式碼，可以使用事件監聽器斷點。

1、切換到 Sources 選項卡。
2、展開 Event Listener Breakpoints 窗格。
3、在事件列表裡選擇需要監聽的事件型別。比如常用的 Mouse 下的 click 事件。

異常斷點

如果要在丟擲捕獲或未捕獲的異常的程式碼上暫停，那麼可以使用異常斷點。

1、切換到 Sources 選項卡。
2、點選 暫停異常 按鈕。如圖。啟用後會變成藍色。
3、如果除了未捕獲的異常之外還要暫停捕獲的異常，請選中“ 暫停捕獲異常”複選框

進步執行程式碼

程式碼暫停後，我們需要手動控制程式碼的執行，以方便排查問題。如下圖從左往右依次是恢復執行，跳過下一個函式，跳入下一個函式，跳出下一個函式和逐步執行下一行

檢視當前執行上下文

在某行程式碼上暫停時，使用 scope 窗格可以檢視當前執行上下文。

1、雙擊屬性值，可以進行更改。
2、不可列舉的屬性顯示為灰色

檢視當前呼叫堆疊

在某行程式碼上暫停時，使用 call stack 窗格可以檢視此時的呼叫堆疊。

1、單擊某一個條目可以跳轉到呼叫該函式的程式碼行。藍色箭頭表示DevTools當前正在突出顯示的函式。
2、右鍵點選某個條目，可以選擇複製堆疊跟蹤。將當前呼叫堆疊複製到剪下板。

觀察自定義表示式

在 Watch 窗格可以檢視自定義表示式的值。

1、單擊加號按鈕建立監聽表示式。
2、單擊重新整理按鈕會重新整理現有表示式的值。在逐步執行程式碼時，值會自動更新。
3、滑鼠懸浮在表示式上時，會出現一個減號，點選可以刪除該表示式