亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2022年04月01日 11:28:59   作者：zxg_神說要有光  
斷點調試是啥?難不難? 斷點調試其實并不是多么復雜的一件事,簡單的理解無外呼就是打開瀏覽器,打開sources找到js文件,在行號上點一下罷了,下面這篇文章主要給大家介紹了關于JS中6種打斷點方式的相關資料,需要的朋友可以參考下

前言

Debugger 是前端開發(fā)很重要的一個工具，它可以在我們關心的代碼處斷住，通過單步運行來理清邏輯。而 Debugger 用的好壞與斷點打得好壞有直接的關系。

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

普通斷點

在想斷住的那一行左側單擊一下就可以添加一個斷點，運行到該處就會斷住。

這是最基礎的斷點方式，VSCode 和 Chrome Devtools 都支持這種斷點。

條件斷點

右鍵單擊代碼所在的行左側，會出現(xiàn)一個下拉框，可以添加一個條件斷點。

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

這種根據(jù)條件來斷住的斷點 VSCode 和 Chrome Devtools 也都支持。

DOM 斷點

在 Chrome Devtools 的 Elements 面板的對應元素上右鍵，選擇 break on，可以添加一個 dom 斷點，也就是當子樹有變動、屬性有變動、節(jié)點移除這三種情況的時候會斷住?？梢杂脕碚{試導致 dom 變化的代碼。

因為是涉及到 DOM 的調試，只有 Chrome Devtools 支持這種斷點。

URL 斷點

在 Chrome Devtools 的 Sources 面板可以添加 XHR 的 url 斷點，當 ajax 請求對應 url 時就會斷住，可以用來調試請求相關的代碼。

這個功能只有 Chrome Devtools 有。

Event Listener 斷點

在 Chrome Devtools 的 Sources 面板還可以添加 Event Listener 的斷點，指定當發(fā)生什么事件時斷住，可以用來調試事件相關代碼。

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

異常斷點

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

總結

Debugger 打斷點的方式除了直接在對應代碼行單擊的普通斷點以外，還有很多根據(jù)不同的情況來添加斷點的方式。

一共有六種：

  • 普通斷點：運行到該處就斷住
  • 條件斷點：運行到該處且表達式為真就斷住，比普通斷點更靈活
  • DOM 斷點：DOM 的子樹變動、屬性變動、節(jié)點刪除時斷住，可以用來調試引起 DOM 變化的代碼
  • URL 斷點：URL 匹配某個模式的時候斷住，可以用來調試請求相關代碼
  • Event Listener 斷點：觸發(fā)某個事件監(jiān)聽器的時候斷住，可以用來調試事件相關代碼
  • 異常斷點：拋出異常被捕獲或者未被捕獲的時候斷住，可以用來調試發(fā)生異常的代碼

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

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

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

到此這篇關于JS中的6種打斷點的文章就介紹到這了,更多相關JS打斷點的方式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論