前言

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

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

起步

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

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

1.標記斷點

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

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

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

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

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

3.單步跳過—F10

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

關(guān)于 step over next :

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

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

4.單步進入—F11

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

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

5.跳出—Shift+F11

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

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

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

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

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

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

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

8.斷點調(diào)試指令

如果代碼非常復雜，行數(shù)很多的情況下，我們在sources中打斷點無疑會變得非常困難。此時我們可以使用 debugger 指令來讓chrome幫助我們打斷點。

請注意，調(diào)試結(jié)束后，不論是手動在sources中標記的斷點還是debugger標記的斷點，都一定要清除掉，否則你的代碼會一致被暫停，進入debugger調(diào)試狀態(tài)

總結(jié)

到此這篇關(guān)于Chrome瀏覽器斷點調(diào)試技巧的文章就介紹到這了,更多相關(guān)Chrome瀏覽器斷點調(diào)試內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論