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

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

1. Beautify Javascript

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

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

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

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

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

3. Ajax 時中斷

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

4. 頁面事件中斷

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

5. Javascript 異常時中斷

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

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

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