chrome developer tool 調試技巧

　　這篇文章是根據目前 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 文件中查找

　　在 chrome developer tool 打開的情況下, 按 ctrl + shift + F, 在通過 js 鈎子查找代碼位置時很有用, 查找支持正則表達式

8. command line api

• $(id_selector) 這個與頁面是否有 jQuery 無關
• $$(css_selector)
• $0, $1, $2, $3, $4
  1. Elements 面板中最近選中的 5 個元素, 最后選擇的是 $0
  2. 這個 5 個變量時先進先出的
• copy(str) 復制 str 到剪切板, 在斷點時復制變量時有用
• monitorEvents(object[, types])/unmonitorEvents(object[, types])
  1. 當 object 上 types 事件發生時在 console 中輸出 event 對象
• 更多 console api 請 console.log(console) 或 點擊
• 更多 command line api 點擊

9. 實時修改 js 代碼生效

• 頁面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 會立即生效
• 注意
  1. 經測試不支持 html 頁面中 js 修改
  2. 經過 Pretty print 格式化的腳本不支持修改

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

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

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

參考鏈接

• chrome developer tool doc
• A Re-introduction to the Chrome Developer Tools

博文出處：http://ued.taobao.com/blog/2012/06/03/debug-with-chrome-dev-tool/