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 文件中搜索&查找 js 函數定義

• 在 chrome developer tool 打開的狀況下, 按 ctrl + shift + F, 在經過 js 鉤子查找代碼位置時頗有用, 查找支持正則表達式
• 查找函數定義: ctrl + shift + 0 (在 Scripts panel 下)
• 查找文件: ctrl + o  (在 Scripts panel 下)
• 更多快捷鍵: 在 chrome developer tool 中按 ? 查看幫助

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

 

參考連接