快捷導(dǎo)航

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

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

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

前言

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

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

起步

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

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

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

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

此時刷新，開始調(diào)試

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

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

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

3.單步跳過—F10

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

關(guān)于 step over next :

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

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

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

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

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

5.跳出—Shift+F11

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

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

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

一般情況下，我們使用"單步執(zhí)行" step 很少,因為不是每一個自定義函數(shù)我們都需要進(jìn)入到內(nèi)部來觀察其執(zhí)行狀態(tài)，所以實際開發(fā)調(diào)試中，我們使用"單步跳過" step over next +"單步進(jìn)入" step into next 更多

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

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