流程1：打上斷點

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

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

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

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

然后刷新一下 

流程2：遇上斷點

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

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

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

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

提示

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

補充 

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

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

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

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

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

總結(jié)

到此這篇關于前端打斷點debugger使用的文章就介紹到這了,更多相關前端打斷點debugger使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論