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

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

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

流程1：打上斷點(diǎn)

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

在一行代碼的前面或者后面寫上debugger運(yùn)行到這的時(shí)候就會(huì)停止啦

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

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

然后刷新一下

流程2：遇上斷點(diǎn)

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

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

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

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

提示

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

補(bǔ)充

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

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

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

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

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