作者：神說要有光zxg來源：神光的程式設計秘籍
Debugger 是前端開發很重要的一個工具，它可以在我們關心的代碼處斷住，通過單步運作來理清邏輯。而 Debugger 用的好壞與斷點打得好壞有直接的關系。
Chrome Devtools 和 VSCode 都提供了 Debugger，它們支援的打斷點的方式有 6 種。
在想斷住的那一行左側單擊一下就可以添加一個斷點，運作到該處就會斷住。
這是最基礎的斷點方式，VSCode 和 Chrome Devtools 都支援這種斷點。
右鍵單擊代碼所在的行左側，會出現一個下拉框，可以添加一個條件斷點。
輸入條件表達式，當運作到這一行代碼并且表達式的值非空時就會斷住，這比普通斷點靈活些。
這種根據條件來斷住的斷點 VSCode 和 Chrome Devtools 也都支援。
在 Chrome Devtools 的 Elements 面闆的對應元素上右鍵，選擇 break on，可以添加一個 dom 斷點，也就是當子樹有變動、屬性有變動、節點移除這三種情況的時候會斷住。可以用來調試導緻 dom 變化的代碼。
涉及到 DOM 的調試，隻有 Chrome Devtools 支援這種斷點。
在 Chrome Devtools 的 Sources 面闆可以添加 XHR 的 url 斷點，當 ajax 請求對應 url 時就會斷住，可以用來調試請求相關的代碼。
這個功能隻有 Chrome Devtools 有。
在 Chrome Devtools 的 Sources 面闆還可以添加 Event Listener 的斷點，指定當發生什麼事件時斷住，可以用來調試事件相關代碼。
這個功能也是隻有 Chrome Devtools 有。
在 VSCode 的 Debugger 面闆勾選 Uncaught Exceptions 和 Caught Exceptions 可以添加異常斷點，在抛出異常未被捕獲或者被捕獲時斷柱。用來調試一些發生異常的代碼時很有用。
這個功能隻有 VSCode 有。
Debugger 打斷點的方式除了直接在對應代碼行單擊的普通斷點以外，還有很多根據不同的情況來添加斷點的方式。
一共有六種：
普通斷點：運作到該處就斷住
條件斷點：運作到該處且表達式為真就斷住，比普通斷點更靈活
DOM 斷點：DOM 的子樹變動、屬性變動、節點删除時斷住，可以用來調試引起 DOM 變化的代碼
URL 斷點：URL 比對某個模式的時候斷住，可以用來調試請求相關代碼
Event Listener 斷點：觸發某個事件監聽器的時候斷住，可以用來調試事件相關代碼
異常斷點：抛出異常被捕獲或者未被捕獲的時候斷住，可以用來調試發生異常的代碼
這些打斷點方式大部分都是 Chrome Devtools 支援的(普通、條件、DOM、URL、Event Listener)，也有的是 VSCode Debugger 支援的(普通、條件、異常)。
不同情況下的代碼可以用不同的打斷點方式，這樣調試代碼會高效很多。
JS 的六種打斷點方式，你用過幾種呢?