快捷導(dǎo)航

Chrome瀏覽器斷點(diǎn)調(diào)試技巧(非常詳細(xì)!)

更新時(shí)間：2023年09月27日 09:25:57 作者：程序媛小y

在我們?nèi)粘ｉ_(kāi)發(fā)中,常常利用chrome強(qiáng)大的控制臺(tái)Sources下面進(jìn)行代碼斷點(diǎn)調(diào)試,這篇文章主要給大家介紹了關(guān)于Chrome瀏覽器斷點(diǎn)調(diào)試技巧的相關(guān)資料,需要的朋友可以參考下

前言

某些情況下，我們必須知道當(dāng)前代碼的執(zhí)行順序，以及每一步變量的執(zhí)行狀態(tài)來(lái)確定代碼是否正確按照我們意愿執(zhí)行。

此時(shí)使用斷點(diǎn)調(diào)試是非常明智的選擇。

起步

使用斷點(diǎn)調(diào)試的第一步，我們需要打開(kāi)控制臺(tái)，選擇sources，并點(diǎn)擊需要調(diào)試的文件。

此時(shí)在右側(cè)面板可以看到調(diào)試操作區(qū)域：

1.標(biāo)記斷點(diǎn)

在中間代碼區(qū)域，點(diǎn)擊代碼行號(hào)，出現(xiàn)藍(lán)色（紅色）標(biāo)記點(diǎn)則說(shuō)明當(dāng)前代碼行被標(biāo)記斷點(diǎn)，此后每一次代碼執(zhí)行到當(dāng)前行的時(shí)候都會(huì)暫停

此時(shí)刷新，開(kāi)始調(diào)試

2.查看變量狀態(tài)

將鼠標(biāo)放置到變量身，可以查看當(dāng)前變量在當(dāng)前狀態(tài)下的值

另外，我們也可以通過(guò)劃選來(lái)查看某一句表達(dá)式或語(yǔ)句的執(zhí)行結(jié)果：

3.單步跳過(guò)—F10

我們也可以點(diǎn)擊右側(cè)菜單中的"單步跳過(guò)" step over next 按鈕來(lái)讓代碼進(jìn)入下一個(gè)函數(shù)調(diào)用。

關(guān)于 step over next :

它在意的是執(zhí)行調(diào)用結(jié)果，并不會(huì)進(jìn)入函數(shù)內(nèi)部
當(dāng)遇到自定義函數(shù)的時(shí)候，會(huì)在后臺(tái)靜默調(diào)用，直接得出結(jié)果。

如上圖，當(dāng)你點(diǎn)擊 step over next 的時(shí)候，會(huì)直接跳過(guò) showInfo 進(jìn)而得出結(jié)果，而不是進(jìn)入 showInfo 函數(shù)的內(nèi)部繼續(xù)單步執(zhí)行

4.單步進(jìn)入—F11

如果在執(zhí)行的時(shí)候遇到自定義函數(shù)，并且你希望讓斷點(diǎn)單步執(zhí)行進(jìn)入自定義函數(shù)內(nèi)部繼續(xù)依次執(zhí)行的話，可以點(diǎn)擊"單步進(jìn)入" step into next 按鈕

往往單步進(jìn)入F11與單步跳過(guò)F10配合能讓我們非常高效的調(diào)試代碼，畢竟不是每一個(gè)函數(shù)你都需要進(jìn)入內(nèi)部去查看結(jié)果，所以該跳過(guò)就跳過(guò)，該進(jìn)入就進(jìn)入

5.跳出—Shift+F11

如果你在調(diào)試的時(shí)候不小心進(jìn)入了一個(gè)本來(lái)不關(guān)心的函數(shù)，此時(shí)可以點(diǎn)擊"跳出" step outcurrent 來(lái)跳出當(dāng)前進(jìn)入的函數(shù)。

6.單步執(zhí)行—F9

"單步執(zhí)行" step 不會(huì)區(qū)分任何自定義函數(shù)，所有腳本代碼都會(huì)依次執(zhí)行。

一般情況下，我們使用"單步執(zhí)行" step 很少,因?yàn)椴皇敲恳粋€(gè)自定義函數(shù)我們都需要進(jìn)入到內(nèi)部來(lái)觀察其執(zhí)行狀態(tài)，所以實(shí)際開(kāi)發(fā)調(diào)試中，我們使用"單步跳過(guò)" step over next +"單步進(jìn)入" step into next 更多

7.恢復(fù)腳本執(zhí)行—F8

如果我們想要放棄當(dāng)前腳本的調(diào)試，可以點(diǎn)擊"恢復(fù)腳本執(zhí)行" resume script excution ，這會(huì)讓當(dāng)前腳本直接執(zhí)行到最后，如果要重新調(diào)試的話，保持?jǐn)帱c(diǎn)存在的前提下刷新頁(yè)面即可

比如：我們正在執(zhí)行一個(gè)循環(huán)，并且希望查看這個(gè)循環(huán)的第八次，那么我們就可以連續(xù)點(diǎn)擊這個(gè)按鈕，直接跳過(guò)前七次循環(huán)，到達(dá)第八次循環(huán)，然后進(jìn)行循環(huán)開(kāi)始一步一步執(zhí)行。