?

這篇文章是根據(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è)匹配只是簡單的字符串查找，發(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)，有兩種模式：在所有異常處中斷，在未捕獲的異常處中斷. 在異常處中斷后就可以查看為什么拋出異常了。

6.?DOM Level 3 Event 事件中斷

在 Elements 面板，選中一個(gè)元素右鍵，有兩個(gè)選項(xiàng)：Break on subtree modifications，Break on attributes modifications，這兩個(gè)對(duì)應(yīng) DOM Level 3 Event 中的DOMSubtreeModified?,?DOMSubtreeModified?事件 在 Scripts 面板 DOM Breakpoints 處會(huì)列出所有 level3 的 event 中斷

?

7.?所有 js 文件中查找

在?chrome developer tool?打開的情況下，按 ctrl + shift + F，在通過 js 鉤子查找代碼位置時(shí)很有用，查找支持正則表達(dá)式

8.?command line api

• $(id_selector) 這個(gè)與頁面是否有 jQuery 無關(guān)
• $$(css_selector)
• $0，$1，$2，$3，$4
• Elements 面板中最近選中的 5 個(gè)元素，最后選擇的是 $0
• 這個(gè) 5 個(gè)變量時(shí)先進(jìn)先出的
• copy(str) 復(fù)制 str 到剪切板，在斷點(diǎn)時(shí)復(fù)制變量時(shí)有用
• monitorEvents(object[,types])/unmonitorEvents(object[,types])
• 當(dāng) object 上 types 事件發(fā)生時(shí)在 console 中輸出 event 對(duì)象
• 更多 console api 請(qǐng) console.log(console) 或?點(diǎn)擊
• 更多 command line api?點(diǎn)擊
• ?

  9. 實(shí)時(shí)修改 js 代碼生效

  • 頁面外部 js 文件在 Scripts 面板中可以直接修改，改完后按 ctrl + S 保存，會(huì)立即生效
  • 注意
  • 經(jīng)測試不支持 html 頁面中 js 修改
  • 經(jīng)過 Pretty print 格式化的腳本不支持修改

  10. console 中執(zhí)行的代碼可斷點(diǎn)

  在 console 中輸入代碼的最后一行加上 //@ sourceURL=filename.js，會(huì)在 Scripts 面板中有個(gè)叫 filename.js 的文件，然后他就和外部 js 文件一樣了

  ?

轉(zhuǎn)載于:https://www.cnblogs.com/mengxiaotian/p/5172784.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的chrome 控制台js调试与断点调试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。