JS中的6種打斷點的方式範例總結

2022-04-01 13:00:30

前言

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 可以新增異常斷點，在丟擲異常未被捕獲或者被捕獲時斷柱。用來偵錯一些發生異常的程式碼時很有用。

Debugger 打斷點的方式除了直接在對應程式碼行單擊的普通斷點以外，還有很多根據不同的情況來新增斷點的方式。

一共有六種：

這些打斷點方式大部分都是 Chrome Devtools 支援的（普通、條件、DOM、URL、Event Listener、異常），也有的是 VSCode Debugger 支援的（普通、條件、異常）。

不同情況下的程式碼可以用不同的打斷點方式，這樣偵錯程式碼會高效很多。

JS 的六種打斷點方式，你用過幾種呢？

到此這篇關於JS中的6種打斷點的文章就介紹到這了,更多相關JS打斷點的方式內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！