首頁 > web前端 > 前端問答 > JavaScript中斷點的型別有哪些

JavaScript中斷點的型別有哪些

青灯夜游
發布: 2022-01-12 13:46:28
原創
2290 人瀏覽過

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

JavaScript中斷點的型別有哪些

本教學操作環境: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中文網其他相關文章!

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