學習前端開發,首先學會如何調試,全在這裡了,0基礎看過來

· Step over next function call:執行到下一步的函數調用(跳到下一行)。

· Step into next function call:進入當前函數。

· Step out of current function:跳出當前執行函數。

· Deactive/Active all breakpoints:關閉/開啟所有斷點(不會取消)。

· Pause on exceptions:異常情況自動斷點設置。

其實右側還有很多強大的功能

· Watch:Watch表達式

· Call Stack: 棧中變量的調用,這裡是遞歸調用,肯定是在內存棧部分調用。

· Scope:當前作用域變量觀察。

· BreakPoints:當前斷點變量觀察。

· XHR BreakPoints:面向Ajax,專為異步而生的斷點調試功能。

· DOM BreakPoints:主要包括下列DOM斷點,註冊方式見下圖

1. 當節點屬性發生變化時斷點(Break on attributes modifications)

2. 當節點內部子節點變化時斷點(Break on subtree modifications)

3. 當節點被移除時斷點(Break on node removal)

· Global Listeners:全局事件監聽

· Event Listener Breakpoints:事件監聽器斷點,列出了所有頁面及腳本事件,包括:鼠標、鍵盤、動畫、定時器、XHR等等。

6、chrome中的斷點調試

1)設置斷點

學習前端開發,首先學會如何調試,全在這裡了,0基礎看過來


這邊以chrome瀏覽器為例,點F12進入調試,切換到sources選項卡,從左邊選擇要調試的文件,然後鼠標點擊展開文件的行號,出現藍色的標籤即為打上斷點。打上斷點後刷新網頁,就會執行到打斷點的那一行就停止執行

2)常用按鈕

學習前端開發,首先學會如何調試,全在這裡了,0基礎看過來


左一(藍色):正常執行 當刷新網頁後,停留在斷點處,點擊這個按鈕就會繼續正常執行下去

左二:逐過程執行 當斷點斷在一個函數的時候,點這個按鈕,既執行完整個函數(直到下一個函數)

左三:逐步執行 這個按鈕為分步執行,每點擊一次就執行一行代碼,適用較為細緻的調試

3)取消斷點

學習前端開發,首先學會如何調試,全在這裡了,0基礎看過來


或者直接取消藍色的斷點;


分享到:


相關文章: