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

常規(guī)的斷點相關(guān)的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了。

1. Beautify Javascript

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

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

在 Elements 面板，選中一個元素，然后在右側(cè)的 Event Listeners 下面會按類型出這個元素相關(guān)的事件，也就是在事件捕獲和冒泡階段會經(jīng)過的這個節(jié)點的事件。

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

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

3. Ajax 時中斷

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

4. 頁面事件中斷

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

5. Javascript 異常時中斷

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

標簽： 前端技術(shù) chrome調(diào)試工具 chrome-developer-tool 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。