常規的斷點相關的 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
Elements 面板中最近選中的 5 個元素, 最後選擇的是 $0
這個 5 個變量時先進先出的
copy(str) 複製 str 到剪切板, 在斷點時複製變量時有用
monitorEvents(object[, types])/unmonitorEvents(object[, types])
當 object 上 types 事件發生時在 console 中輸出 event 對象
更多 console api 請 console.log(console) 或 點擊
更多 command line api 點擊
9. 實時修改 js 代碼生效
頁面外部 js 文件在 Scripts 面板中可以直接修改, 改完後按 ctrl + S 保存, 會立即生效
注意
經測試不支持 html 頁面中 js 修改
經過 Pretty print 格式化的腳本不支持修改
10. console 中執行的代碼可斷點
在 console 中輸入代碼的最後一行加上 //@ sourceURL=filename.js, 會在 Scripts 面板中有個叫 filename.js 的文件, 然後他就和外部 js 文件一樣了
參考鏈接
chrome developer tool doc https://developers.google.com/chrome-developer-tools/docs/overview