斷點(diǎn)調(diào)試
某些情況下，我們必須知道當(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í)行。
8.斷點(diǎn)調(diào)試指令
如果代碼非常復(fù)雜，行數(shù)很多的情況下，我們?cè)趕ources中打斷點(diǎn)無(wú)疑會(huì)變得非常困難。此時(shí)我們可以使用debugger指令來(lái)讓chrome幫助我們打斷點(diǎn)。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-458778.html
請(qǐng)注意，調(diào)試結(jié)束后，不論是手動(dòng)在sources中標(biāo)記的斷點(diǎn)還是debugger標(biāo)記的斷點(diǎn)，都一定要清除掉，否則你的代碼會(huì)一致被暫停，進(jìn)入debugger調(diào)試狀態(tài)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-458778.html
到了這里，關(guān)于Chrome瀏覽器斷點(diǎn)調(diào)試技巧的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
