chromedevelopertool調試技巧

這篇文章是根據目前chrome穩定版(19.0.1084.52 m)寫的, 因為 google 也在不斷完善chromedeveloper tool, 所以chrome版本不同可能稍有差別. 一些快捷鍵也是 windows 上的, mac 下的應該大同小異. 常規的斷點相關的 breakpoint/conditional-breakpoint/call-st

這篇文章是根據目前 chrome 穩定版(19.0.1084.52 m)寫的, 因為 google 也在不斷完善chrome developer tool, 所以 chrome 版本不同可能稍有差別. 一些快捷鍵也是 windows 上的, mac 下的應該大同小異.

常規的斷點相關的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了.

1. Beautify Javascript

js 文件在上線前一般都會壓縮下, 壓縮的 javascript 幾乎沒有可讀性, 幾乎無法設定斷點. 在 Scripts 面板下面有個 Pretty print 按鈕(這種符號 {}), 點擊會將壓縮 js 文件格式化縮進規整的文件, 這時候在設定斷點可讀性就大大提高了.

2. 查看元素綁定了哪些事件

在 Elements 面板, 選中一個元素, 然后在右側的 Event Listeners 下面會按類型出這個元素相關的事件, 也就是在事件捕獲和冒泡階段會經過的這個節點的事件.

在 Event Listeners 右側下拉按鈕中可以選擇 Selected Node Only 只列出這個節點上的事件

展開事件后會顯示出這個事件是在哪個文件中綁定的, 點擊文件名會直接跳到綁定事件處理函數所在行, 如果 js 是壓縮了的, 可以先 Pretty print 下, 然后再查看綁定的事件.

3. Ajax 時中斷

在 Scripts 面板右側有個 XHR Breakpoints, 點右側的 + 會添加一個 xhr 斷點, 斷點是根據 xhr 的 url 匹配中斷的, 如果不寫匹配規則會在所有 ajax, 這個匹配只是簡單的字符串查找, 發送前中斷, 在中斷后再在 Call Stack 中查看時那個地方發起的 ajax 請求

4. 頁面事件中斷

除了給設定常規斷點外, 還可以在某一特定事件發生時中斷(不針對元素) , 在 Scripts 面板右側, 有個 Event Listener Breakpoints, 這里列出了支持的所有事件, 不僅 click, keyup 等事件, 還支持 Timer(在 setTimeout setInterval 處理函數開始執行時中斷), onload, scroll 等事件.

5. Javascript 異常時中斷

Pretty print 左側的按鈕是開啟 js 拋異常時中斷的開關, 有兩種模式：在所有異常處中斷, 在未捕獲的異常處中斷. 在異常處中斷后就可以查看為什么拋出異常了

6. DOM Level 3 Event 事件中斷

在 Elements 面板, 選中一個元素右鍵, 有兩個選項：Break on subtree modifications, Break on attributes modifications, 這兩個對應 DOM Level 3 Event 中的DOMSubtreeModified , DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 處會列出所有 level3 的 event 中斷

7. 所有 js 文件中搜索&查找 js 函數定義

8. command line api

9. 實時修改 js 代碼生效

10. console 中執行的代碼可斷點

在 console 中輸入代碼的最后一行加上 //@ sourceURL=filename.js, 會在 Scripts 面板中有個叫 filename.js 的文件, 然后他就和外部 js 文件一樣了

function hello() {
 alert('say hi');
}
//@ sourceURL=hello.js

參考鏈接

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com