前端與移動開發(fā)：Js中調試小技巧tips---斷點調試

【前言】

這篇文章給大家詳細介紹一下js如何去斷點調試。

【斷點解釋】

斷點，調試器的功能之一，可以讓程序中斷在需要的地方，從而方便其分析。也可以在一次調試中設置斷點，下一次只需讓程序自動運行到設置斷點位置，便可在上次設置斷點的位置中斷下來，極大的方便了操作，同時節(jié)省了時間，在前端開發(fā)中，斷點調試是一個必備技能之一。

【步驟】

1. 首先打開chorme瀏覽器，F(xiàn)12，打開控制臺界面

2. Source面板

Sources面板是chrome developer tool中的斷點調試面板。我們打開Sources面板后其實會在界面中看到如下內容，我們跟著逐一看看都是什么意思：

2.1.左上藍色模塊

網站文件目錄樹。

2.2.右上黃色模塊

左側所選文件的具體內容展示區(qū)

2.3.右下綠色模塊

這一模塊有倆個可切換區(qū)域：

scope：顯示當前斷點的作用域

watch ：點擊+號可添加你所需要監(jiān)控的變量或者表達式

2.4.左下紅色模塊

主要核心功能區(qū)

Call Stack 顯示當前斷點的環(huán)境調用棧

Breakpoints 當前js斷點列表，添加的每個斷點都會出現(xiàn)在此處，點擊列表中斷點就會定位到內容區(qū)的斷點上

DOM Breakpoints 當前DOM斷點列表列表

XHR Breakpoints 當前xhr斷點列表，可點擊右側+添加斷點

Event Listener Breakpoints 事件監(jiān)聽器斷點設置處

Event Listeners 當前事件監(jiān)聽斷點列表

3. 設置斷點

斷點調試的首要條件當然是添加斷點，js斷點添加的方式有倆種:

3.1.JS斷點

Sources斷點

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

Debugger斷點

Debugger斷點的添加就是通過在代碼中添加"debugger;"語句，當代碼執(zhí)行到該語句的時候就會自動斷點。這個調試方式，在Js中調試小技巧tips(二)中有詳細介紹

3.2.DOM斷點

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

DOM斷點的添加流程為：打開Elements面板——定位到相關DOM節(jié)點——單機鼠標右鍵，彈出側邊欄——鼠標移動到Breakon...上，選擇相應選項subtree modifications/attributes modifications/node removal即

file:///C:/Users/WCM/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png

4. 斷點調試

Pause/Resumescript execution：暫停/恢復腳本執(zhí)行(程序執(zhí)行到下一斷點停止)。

Step over nextfunction call：執(zhí)行到下一步的函數(shù)調用(跳到下一行)。

Step into nextfunction call：進入當前函數(shù)。

Step out ofcurrent function：跳出當前執(zhí)行函數(shù)。

Deactive/Activeall breakpoints：關閉/開啟所有斷點(不會取消)。

Pause onexceptions：異常情況自動斷點設置。