JavaScript有哪些斷點類型

小編給大家分享一下JavaScript有哪些斷點類型，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

JavaScript中斷點的類型：1、Sources斷點；2、Debugger斷點；3、DOM斷點，即在DOM元素上添加斷點，進而達到調試的目的；4、XHR斷點；5、事件監聽器斷點。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JS斷點分類

1、JS斷點

（1）Sources斷點

  Sources斷點添加的流程是“F12（Ctrl + Shift + I）打開開發工具”——“點擊Sources菜單”——“左側樹中找到相應文件”——“點擊行號列”即完成在當前行添加/刪除斷點操作。當斷點添加完畢后，刷新頁面JS執行到斷點位置停住，在Sources界面會看到當前作用域中所有變量和值，只需對每個值進行驗證即可完成我們題設驗證要求

  在Sources里還可以設置條件斷點，在斷點位置的右鍵菜單中選擇“Edit Breakpoint...”可以設置觸發斷點的條件，就是寫一個表達式，表達式為 true 時才觸發斷點。

（2）Debugger斷點

  Debugger斷點的添加就是通過在代碼中添加"debugger;"語句，當代碼執行到該語句的時候就會自動斷點

2、DOM斷點

DOM斷點，顧名思義就是在DOM元素上添加斷點，進而達到調試的目的。而在實際使用中斷點的效果最終還是落地到JS邏輯之內。

DOM斷點添加方式：Elements-右擊element元素-Break on-選擇斷點

（1）subtree modifications 子節點變化斷點

主要針對子節點增加、刪除以及交換順序等操作，但子節點進行屬性修改和內容修改并不會觸發斷點

（2）attributes modifications 節點屬性斷點

（3）node removal 節點移除斷點

3、XHR斷點

XHR Breakpoints

顧名思義，當異步請求發送的url滿足斷點條件時，觸發的斷點

斷點方式：sources- XHR/fetch Breakpoints -"+"-編輯斷點條件

4、事件監聽器斷點

事件監聽器斷點，即根據事件名稱進行斷點設置。當事件被觸發時，斷點到事件綁定的位置。事件監聽器斷點，列出了所有頁面及腳本事件，包括：鼠標、鍵盤、動畫、定時器、XHR等等。（位置一般在sources的XHR/fetch Breakpoints下方）

以上是“JavaScript有哪些斷點類型”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！