更新時間:2018-01-05 來源:黑馬程序員 瀏覽量:
【前言】
這篇文章給大家詳細介紹一下js如何去斷點調(diào)試。
【斷點解釋】
斷點,調(diào)試器的功能之一,可以讓程序中斷在需要的地方,從而方便其分析。也可以在一次調(diào)試中設(shè)置斷點,下一次只需讓程序自動運行到設(shè)置斷點位置,便可在上次設(shè)置斷點的位置中斷下來,極大的方便了操作,同時節(jié)省了時間,在前端開發(fā)中,斷點調(diào)試是一個必備技能之一。
【步驟】
1. 首先打開chorme瀏覽器,F(xiàn)12,打開控制臺界面
2. Source面板
Sources面板是chrome developer tool中的斷點調(diào)試面板。我們打開Sources面板后其實會在界面中看到如下內(nèi)容,我們跟著逐一看看都是什么意思:
2.1.左上藍色模塊
網(wǎng)站文件目錄樹。
2.2.右上黃色模塊
左側(cè)所選文件的具體內(nèi)容展示區(qū)
2.3.右下綠色模塊
這一模塊有倆個可切換區(qū)域:
scope:顯示當前斷點的作用域
watch :點擊+號可添加你所需要監(jiān)控的變量或者表達式
2.4.左下紅色模塊
主要核心功能區(qū)
Call Stack 顯示當前斷點的環(huán)境調(diào)用棧
Breakpoints 當前js斷點列表,添加的每個斷點都會出現(xiàn)在此處,點擊列表中斷點就會定位到內(nèi)容區(qū)的斷點上
DOM Breakpoints 當前DOM斷點列表列表
XHR Breakpoints 當前xhr斷點列表,可點擊右側(cè)+添加斷點
Event Listener Breakpoints 事件監(jiān)聽器斷點設(shè)置處
Event Listeners 當前事件監(jiān)聽斷點列表
3. 設(shè)置斷點
斷點調(diào)試的首要條件當然是添加斷點,js斷點添加的方式有倆種:
3.1.JS斷點
Sources斷點
Sources斷點添加的流程是“F12(Ctrl + Shift + I)打開開發(fā)工具”——“點擊Sources菜單”——“左側(cè)樹中找到相應(yīng)文件”——“點擊行號列”即完成在當前行添加/刪除斷點操作。當斷點添加完畢后,刷新頁面JS執(zhí)行到斷點位置停住,在Sources界面會看到當前作用域中所有變量和值,只需對每個值進行驗證即可完成我們題設(shè)驗證要求。
Debugger斷點
Debugger斷點的添加就是通過在代碼中添加"debugger;"語句,當代碼執(zhí)行到該語句的時候就會自動斷點。這個調(diào)試方式,在Js中調(diào)試小技巧tips(二)中有詳細介紹
3.2.DOM斷點
DOM斷點,顧名思義就是在DOM元素上添加斷點,進而達到調(diào)試的目的。而在實際使用中斷點的效果最終還是落地到JS邏輯之內(nèi)。
DOM斷點的添加流程為:打開Elements面板——定位到相關(guān)DOM節(jié)點——單機鼠標右鍵,彈出側(cè)邊欄——鼠標移動到Breakon...上,選擇相應(yīng)選項subtree modifications/attributes modifications/node removal即
file:///C:/Users/WCM/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png
4. 斷點調(diào)試
Pause/Resumescript execution:暫停/恢復(fù)腳本執(zhí)行(程序執(zhí)行到下一斷點停止)。
Step over nextfunction call:執(zhí)行到下一步的函數(shù)調(diào)用(跳到下一行)。
Step into nextfunction call:進入當前函數(shù)。
Step out ofcurrent function:跳出當前執(zhí)行函數(shù)。
Deactive/Activeall breakpoints:關(guān)閉/開啟所有斷點(不會取消)。
Pause onexceptions:異常情況自動斷點設(shè)置。
本文版權(quán)歸黑馬程序員前端與移動開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!
作者:黑馬程序員前端與移動開發(fā)培訓(xùn)學(xué)院
首發(fā):http://web.itheima.com/