前端工作中，不僅編碼很重要，重現(xiàn)bug，解決bug的能力同樣重要。而這些都離不開代碼調(diào)試?，F(xiàn)就一些調(diào)試技巧做出總結(jié)。
- 1 alert() 方法。
用法：在你覺得有問題的代碼處，加上一句alert(xxx)，就好了。
適用場景：任何時候。 - 2 console.log()
用法：在你覺得有問題的代碼處，加上一句console.log()，就好了。然后在開發(fā)者工具控制臺就可以看到你打印出來的東西了。
適用場景：任何時候。 - 3 斷點(diǎn)調(diào)試
我們需要關(guān)注上圖紅色方框內(nèi)的六個按鈕。從左到右依次標(biāo)記為a,b,c,d,e,f。
- a: Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行（程序執(zhí)行到下一斷點(diǎn)停止），快捷鍵F8。
- b: Step over next function call：逐語句執(zhí)行（跳到下一行），快捷鍵F10。
- c: Step into next function call：進(jìn)入當(dāng)前函數(shù)?？旖萱IF11。
- d: Step out of current function：跳出當(dāng)前執(zhí)行函數(shù)，快捷鍵F11+Shift。
- e: Deactive/Active all breakpoints：關(guān)閉/開啟所有斷點(diǎn)。
- f: Pause on exceptions：異常情況自動斷點(diǎn)設(shè)置。
我們可根據(jù)自己的需要進(jìn)行斷點(diǎn)的調(diào)試，排查問題。
適用場景：大多數(shù)情況。
- 4 Debugger斷點(diǎn)
用法：在代碼中添加”debugger”語句，當(dāng)代碼執(zhí)行到該語句的時候就會自動斷點(diǎn)。剩下的操作就跟在Sources面板添加斷點(diǎn)調(diào)試一模一樣。
適用場景：當(dāng)我們在source面板找不到對應(yīng)的js文件時，或者source面板的js文件已經(jīng)經(jīng)過壓縮與混淆，我們不知道該在哪一行打斷點(diǎn)時，我們可以使用該方法。 - 5 事件斷點(diǎn)
用法： 在上圖中點(diǎn)擊Event Listener Breakpoints，然后選擇我們需要監(jiān)聽的事件。之后當(dāng)該事件被觸發(fā)時，瀏覽器會幫我們自動在相應(yīng)的js文件代碼處打上斷點(diǎn)。
適用場景：當(dāng)我們忘記代碼寫在哪個js文件時，該方法可以快速幫助我們進(jìn)行定位，節(jié)約時間。
以上就是我們前端開發(fā)中經(jīng)常用到的調(diào)試技巧。
