前端打斷點debugger使用流程詳細(xì)教程

更新時間：2024年12月18日 08:35:37 作者：碼嘍的自我修養(yǎng)

這篇文章主要介紹了前端打斷點debugger使用的相關(guān)資料,包括如何設(shè)置斷點、如何使用調(diào)試按鈕以及如何查看變量,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

流程1：打上斷點

方式一：編輯器內(nèi)

在一行代碼的前面或者后面寫上debugger運行到這的時候就會停止啦

方式二：瀏覽器控制臺內(nèi)

直接在控制臺的source(中文版為源代碼/來源)目錄下點擊左邊的行數(shù)即可

然后刷新一下

流程2：遇上斷點

遇到斷點后，程序會停止運行，此時注意，控制器里打斷點的那行代碼并沒有被執(zhí)行，
第一個按鈕是一直執(zhí)行到下一個斷點的意思，直到運行完畢
第二個按鈕是進(jìn)行下一步，也就是執(zhí)行下一個邏輯，又或者說，【按邏輯（比如會遇到 if 那些）去執(zhí)行下一行代碼】。

箭頭：停止斷點調(diào)試
眼睛：不跳入函數(shù)中去，繼續(xù)執(zhí)行下一行代碼（F10）
向下的箭頭：跳入函數(shù)中去（F11）
向上的箭頭：從執(zhí)行的函數(shù)中跳出
帶斜杠的圖標(biāo)：禁用所有的斷點，不做任何調(diào)試

流程3：查看變量（英文版為scope）

可以查看到不同作用域下的變量的動態(tài)變化 ,如下圖所示，展示了代碼塊范圍內(nèi)的所有變量：

提示

提醒一句：對有異步代碼的文件進(jìn)行斷點時有個小提醒，可能你在斷點的情況下正常運行了，但不斷點的情況下就不正常了，這時候就要想到異步的時機問題，可能斷點的時候異步就執(zhí)行完了。

補充

代表 “下一步（Step）”：運行下一條指令，快捷鍵 F9。運行下一條語句。一次接一次地點擊此按鈕，整個腳本的所有語句會被逐個執(zhí)行。

代表 “跨步（Step over）”：運行下一條指令，但不會進(jìn)入到一個函數(shù)中，快捷鍵 F10。
跟上一條命令“下一步（Step）”類似，但如果下一條語句是函數(shù)調(diào)用則表現(xiàn)不同。這里的函數(shù)指的是：不是內(nèi)建的如 alert 函數(shù)等，而是我們自己寫的函數(shù)。

如果我們對比一下，“下一步（Step）”命令會進(jìn)入嵌套函數(shù)調(diào)用并在其第一行暫停執(zhí)行，而“跨步（Step over）”對我們不可見地執(zhí)行嵌套函數(shù)調(diào)用，跳過了函數(shù)內(nèi)部。

執(zhí)行會在該函數(shù)調(diào)用后立即暫停。

如果我們對該函數(shù)的內(nèi)部執(zhí)行不感興趣，這命令會很有用。