前端與移動(dòng)開(kāi)發(fā)：Js中調(diào)試小技巧tips---斷點(diǎn)調(diào)試

【前言】

這篇文章給大家詳細(xì)介紹一下js如何去斷點(diǎn)調(diào)試。

【斷點(diǎn)解釋】

斷點(diǎn)，調(diào)試器的功能之一，可以讓程序中斷在需要的地方，從而方便其分析。也可以在一次調(diào)試中設(shè)置斷點(diǎn)，下一次只需讓程序自動(dòng)運(yùn)行到設(shè)置斷點(diǎn)位置，便可在上次設(shè)置斷點(diǎn)的位置中斷下來(lái)，極大的方便了操作，同時(shí)節(jié)省了時(shí)間，在前端開(kāi)發(fā)中，斷點(diǎn)調(diào)試是一個(gè)必備技能之一。

【步驟】

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

2. Source面板

Sources面板是chrome developer tool中的斷點(diǎn)調(diào)試面板。我們打開(kāi)Sources面板后其實(shí)會(huì)在界面中看到如下內(nèi)容，我們跟著逐一看看都是什么意思：

2.1.左上藍(lán)色模塊

網(wǎng)站文件目錄樹(shù)。

2.2.右上黃色模塊

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

2.3.右下綠色模塊

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

scope：顯示當(dāng)前斷點(diǎn)的作用域

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

2.4.左下紅色模塊

主要核心功能區(qū)

Call Stack 顯示當(dāng)前斷點(diǎn)的環(huán)境調(diào)用棧

Breakpoints 當(dāng)前js斷點(diǎn)列表，添加的每個(gè)斷點(diǎn)都會(huì)出現(xiàn)在此處，點(diǎn)擊列表中斷點(diǎn)就會(huì)定位到內(nèi)容區(qū)的斷點(diǎn)上

DOM Breakpoints 當(dāng)前DOM斷點(diǎn)列表列表

XHR Breakpoints 當(dāng)前xhr斷點(diǎn)列表，可點(diǎn)擊右側(cè)+添加斷點(diǎn)

Event Listener Breakpoints 事件監(jiān)聽(tīng)器斷點(diǎn)設(shè)置處

Event Listeners 當(dāng)前事件監(jiān)聽(tīng)斷點(diǎn)列表

3. 設(shè)置斷點(diǎn)

斷點(diǎn)調(diào)試的首要條件當(dāng)然是添加斷點(diǎn)，js斷點(diǎn)添加的方式有倆種:

3.1.JS斷點(diǎn)

Sources斷點(diǎn)

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

Debugger斷點(diǎn)

Debugger斷點(diǎn)的添加就是通過(guò)在代碼中添加"debugger;"語(yǔ)句，當(dāng)代碼執(zhí)行到該語(yǔ)句的時(shí)候就會(huì)自動(dòng)斷點(diǎn)。這個(gè)調(diào)試方式，在Js中調(diào)試小技巧tips(二)中有詳細(xì)介紹

3.2.DOM斷點(diǎn)

DOM斷點(diǎn)，顧名思義就是在DOM元素上添加斷點(diǎn)，進(jìn)而達(dá)到調(diào)試的目的。而在實(shí)際使用中斷點(diǎn)的效果最終還是落地到JS邏輯之內(nèi)。

DOM斷點(diǎn)的添加流程為：打開(kāi)Elements面板——定位到相關(guān)DOM節(jié)點(diǎn)——單機(jī)鼠標(biāo)右鍵，彈出側(cè)邊欄——鼠標(biāo)移動(dòng)到Breakon...上，選擇相應(yīng)選項(xiàng)subtree modifications/attributes modifications/node removal即

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

4. 斷點(diǎn)調(diào)試

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

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

Step into nextfunction call：進(jìn)入當(dāng)前函數(shù)。

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

Deactive/Activeall breakpoints：關(guān)閉/開(kāi)啟所有斷點(diǎn)(不會(huì)取消)。

Pause onexceptions：異常情況自動(dòng)斷點(diǎn)設(shè)置。

本文版權(quán)歸黑馬程序員前端與移動(dòng)開(kāi)發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！

作者：黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院

首發(fā)：http://web.itheima.com/