這篇文章是根據(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 文件在上線前一般都會(huì)壓縮下，壓縮的 javascript 幾乎沒有可讀性，幾乎無法設(shè)定斷點(diǎn). 在 Scripts 面板下面有個(gè) Pretty print 按鈕(這種符號(hào) {})，點(diǎn)擊會(huì)將壓縮 js 文件格式化縮進(jìn)規(guī)整的文件，這時(shí)候在設(shè)定斷點(diǎn)可讀性就大大提高了。

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

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

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

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

3. Ajax 時(shí)中斷

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

4. 頁面事件中斷

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

5. Javascript 異常時(shí)中斷

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

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

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