前言

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

此時使用斷點調試是非常明智的選擇。

起步

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

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

1.標記斷點

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

此時刷新，開始調試

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

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

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

3.單步跳過—F10

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

關于 step over next :

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

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

4.單步進入—F11

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

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

5.跳出—Shift+F11

如果你在調試的時候不小心進入了一個本來不關心的函數，此時可以點擊"跳出" step outcurrent 來跳出當前進入的函數。

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

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

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

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

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

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

8.斷點調試指令

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

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

總結

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

最新評論