首頁 > web前端 > js教程 > 主體

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

青灯夜游
發布: 2022-02-16 10:46:33
轉載
2565 人瀏覽過

這篇文章給大家總結分享6種JavaScript的打斷點的方式,值的學習收藏,快來看看你用過幾種吧?希望對大家有幫助!

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

Debugger 是前端開發很重要的一個工具,它可以在我們關心的程式碼處斷住,透過單步運行來理清邏輯。而 Debugger 用的好壞與斷點打得好壞有直接的關係。

Chrome Devtools 和 VSCode 都提供了 Debugger,它們支援的打斷點的方式有 6 種。

普通斷點

在想斷住的那一行左邊點選一下就可以新增一個斷點,運行到該處就會斷住。

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

這是最基礎的斷點方式,VSCode 和 Chrome Devtools 都支援這種斷點。 【相關推薦:javascript學習教學

條件斷點

右鍵點選程式碼所在的行左側,會出現一個下拉框,可以新增一個條件斷點。

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

輸入條件表達式,當運行到這一行程式碼並且表達式的值為真時就會斷住,這比普通斷點靈活些。

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

這種根據條件來斷住的斷點 VSCode 和 Chrome Devtools 也都支援。

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

DOM 斷點

在Chrome Devtools 的Elements 面板的對應元素上右鍵,選擇break on,可以新增一個dom 斷點,也就是當子樹有變動、屬性有變動、節點移除這三種情況的時候會斷住。可以用來調試導致 dom 變化的程式碼。

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

因為是涉及 DOM 的偵錯,只有 Chrome Devtools 支援這種斷點。

URL 斷點

在 Chrome Devtools 的 Sources 面板可以加入 XHR 的 url 斷點,當 ajax 請求對應 url 時就會斷住,可以用來偵錯請求相關的程式碼。

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

這個功能只有 Chrome Devtools 有。

Event Listener 斷點

在 Chrome Devtools 的 Sources 面板也可以加入 Event Listener 的斷點,指定當發生什麼事件時斷住,可以用來偵錯事件相關程式碼。

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

這個功能也是只有 Chrome Devtools 有。

異常斷點

在 VSCode 的 Debugger 面板勾選 Uncaught Exceptions 和 Caught Exceptions 可以添加異常斷點,在拋出異常未被捕獲或被捕獲時斷柱。用來調試一些發生異常的程式碼時很有用。

總結分享: 6 種JavaScript的打斷點的方式(收藏學習)

總結

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

一共有六種:

  • 普通斷點:運作到該處就斷住
  • ##條件斷點:運行到該處且表達式為真就斷住,比普通斷點更靈活
  • #DOM 斷點:DOM 的子樹變動、屬性變更、節點刪除時斷住,可以用來除錯引起DOM 變化的程式碼
  • URL 斷點:URL 符合某個模式的時候斷住,可以用來偵錯請求相關程式碼
  • #Event Listener 斷點:觸發某個事件監聽器的時候斷住,可以用來偵錯事件相關程式碼
  • 異常斷點:拋出例外被捕獲或未被捕獲的時候斷住,可以用來調試發生異常的代碼
這些打斷點方式大部分都是Chrome Devtools 支持的(普通、條件、DOM、URL、Event Listener、異常),也有的是VSCode Debugger 支援的(普通、條件、異常)。

不同情況下的程式碼可以用不同的打斷點方式,這樣偵錯程式碼就會有效率得多。這六種打斷點方式,你用過幾種呢?

(學習影片分享:

web前端教學

以上是總結分享: 6 種JavaScript的打斷點的方式(收藏學習)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板