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

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,湛江企業(yè)網(wǎng)站建設,湛江品牌網(wǎng)站建設,網(wǎng)站定制,湛江網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,湛江網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

1. BeautifyJavascript

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

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.頁面事件中斷

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

5.Javascript 異常時中斷

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

網(wǎng)頁題目：chromedevelopertool調(diào)試技巧
分享路徑：http://chinadenli.net/article10/cjjigo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站制作、手機網(wǎng)站建設、網(wǎng)站導航、網(wǎng)站設計、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)