閱讀(5.4k) 書簽贊(0) 我要糾錯

js調(diào)試技巧

2018-08-10 12:04 更新

一、常用JS 調(diào)試技巧

代碼格式化
可以將被壓縮的代碼自動展開
實時代碼編輯
可以在運行時動態(tài)改變 JS 代碼，并且不需要刷新頁面就可以看到效果，一般用這個實時的在代碼里插 console.log
DOM 事件/XHR 斷點
可以針對 DOM 結(jié)構(gòu)改變/屬性改變/鍵盤鼠標事件等下斷點，直接斷到事件的第一個 listener 函數(shù)上。還可以對 XHR 請求下斷點，斷到發(fā)起請求的那一行代碼上
調(diào)用棧分析
這個非常常用，Scripts 面板下右上角的那一部分
自動異常斷點
當代碼執(zhí)行出錯時，可以自動斷到出錯的代碼行上，直接分析出錯時的運行時環(huán)境
分析 HTTP 請求
Network 面板下列出了所有的 HTTP 請求，可以很方便的查看請求內(nèi)容、HTTP 頭、請求時間等信息

以線上代碼出 Bug 為例。一般上手第一步是使用代碼格式化功能將被壓縮的線上代碼展開，然后開啟自動異常斷點，嘗試重現(xiàn) Bug。當 Bug 出現(xiàn)時代碼會自動斷到出錯的那一行。然后通過調(diào)用棧分析結(jié)合控制臺找到最開始出錯的那個函數(shù)上。一般的 Bug 到這里就算找出來了，但是如果這個 Bug 是在事件回調(diào)函數(shù)或者 XHR 回調(diào)函數(shù)上，就得結(jié)合 DOM 事件斷點和 XHR 斷點進一步往上找哪個函數(shù)出錯。另外，如果是發(fā)給服務(wù)器請求沒有得到正確的 response，可以通過 Network 面板查看請求的參數(shù)、Cookie、HTTP 頭是否有誤。
另外，還可以通過 Charles/Nginx/Fiddler 等工具將遠程 js 代碼映射到自己的電腦上，免去了代碼格式化的麻煩，還可以直接編輯。

還有些比較小的 Tips:

console.group/console.groupEnd 可以將 log 信息分組展示，看起來更舒服
console.warn/console.error 可以輸出 warning 和 error log
element 面板右側(cè)實時編輯的 css 樣式，可以在 resource 面板里保存起來
關(guān)于樣式還有個技巧，Elements 面板右上角的 styles 欄，右側(cè)有三個圖標，功能依次是：根據(jù)當前元素創(chuàng)建一個 css 樣式、模擬 :hover/:active 等偽類、顏色值類型選擇。實用
resource 面板可以刪除和修改 cookie/localstorage
scripts 面板下的 ctrl+o 可以快速跳轉(zhuǎn)腳本文件，ctrl+shift+o 快速跳轉(zhuǎn)函數(shù)
右下角的齒輪圖標里有個選項是開發(fā)者工具和網(wǎng)頁左右分屏（Dock to the right，默認是上下分屏），寬屏必備
接上，還有個選項是禁用 Cookit，必點
接上，在選項面板里還可以手工編輯 user agent 和模擬觸摸事件

二、JS調(diào)試必備的5個debug技巧

1. debugger;

我以前也說過，你可以在JavaScript代碼中加入一句debugger;來手工造成一個斷點效果。

需要帶有條件的斷點嗎？你只需要用if語句包圍它：
代碼如下:
if (somethingHappens) {

debugger;

}

但要記住在程序發(fā)布前刪掉它們。

2. 設(shè)置在DOM node發(fā)生變化時觸發(fā)斷點

有時候你會發(fā)現(xiàn)DOM不受你的控制，自己會發(fā)生一些奇怪的變化，讓你很難找出問題的根源。

谷歌瀏覽器的開發(fā)工具里有一個超級好用的功能，專門可以對付這種情況，叫做“Break on…”，你在DOM節(jié)點上右鍵，就能看到這個菜單項。

斷點的觸發(fā)條件可以設(shè)置成這個節(jié)點被刪除、節(jié)點的屬性有任何變化，或它的某個子節(jié)點有變化發(fā)生。