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學習教學】

###################################################

以上是JavaScript中斷點的型別有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！