Chrome調試(轉)

原文地址:http://blog.csdn.net/chenmoquan/article/details/44943245#comments

以爲寫的很適合web開發的新手

Chrome 的開發者工具分爲 8 個大模塊，每一個模塊及其主要功能爲：

• Element 標籤頁： 用於查看和編輯當前頁面中的 HTML 和 CSS 元素。
• Network 標籤頁：用於查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等。
• Source 標籤頁：用於查看和調試當前頁面所加載的腳本的源文件。
• TimeLine 標籤頁： 用於查看腳本的執行時間、頁面元素渲染時間等信息。
• Profiles 標籤頁：用於查看 CPU 執行時間與內存佔用等信息。
• Resource 標籤頁：用於查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件等。
• Audits 標籤頁：用於優化前端頁面，加速網頁加載速度等。
• Console 標籤頁：用於顯示腳本中所輸出的調試信息，或運行測試腳本等。

1.代碼格式化

通常狀況下上線前 js 文件在都會壓縮一下, 壓縮的 javascript 幾乎沒有可讀性, 幾乎沒法設定斷點. 在 Sourse 面板下面打開一個壓縮的js文件，會有個 Pretty print 按鈕(這種符號 {}), 點擊會將壓縮 js 文件格式化, 方便設斷點，提升可讀性。

2.查看元素綁定事件

在 Elements 面板, 選中一個元素, 而後在右側的 Event Listeners 下面會按類型出這個元素相關的事件, 也就是在事件捕獲和冒泡階段會通過的這個節點的事件.

在 Event Listeners 右側下拉按鈕中能夠選擇 Selected Node Only 只列出這個節點上的事件

展開事件後會顯示出這個事件是在哪一個文件中綁定的, 點擊文件名會直接跳到綁定事件處理函數所在行。

3.Ajax 時中斷

在 Sourse 面板右側有個 XHR Breakpoints, 點右側的 + 會添加一個 xhr 斷點, 斷點是根據 xhr 的 url 匹配中斷的, 若是不寫匹配規則會在全部 ajax, 這個匹配只是簡單的字符串查找, 發送前中斷, 在中斷後再在 Call Stack 中查看時那個地方發起的 ajax 請求

4.頁面事件中斷

除了給設定常規斷點外, 還能夠在某一特定事件發生時中斷(不針對元素) , 在 Sourse 面板右側, 有個 Event Listener Breakpoints, 這裏列出了支持的全部事件, 不只 click, keyup 等事件, 還支持 Timer(在 setTimeout setInterval 處理函數開始執行時中斷), onload, scroll 等事件。

5.Javascript 異常時中斷

在 Chrome 開發者工具中，能夠開啓運行時錯誤自動暫停這一功能，從而使開發者工具能在發現運行時腳本異常時，在異常腳本處暫停運行，跳轉至調試頁面，供開發人員進一步查找該運行時異常產生的緣由。

自動暫停按鈕的下方有一個選項，Pause On Caught Exceptions，若是勾選上，則即便所發生運行時異常的代碼在 try/catch 範圍內，Chrome 開發者工具也可以在錯誤代碼處停住。

6.DOM Level 3 Event 事件中斷

在 Elements 面板, 選中一個元素右鍵, Break on 有兩個選項：subtree modifications, attributes modifications, 這兩個對應 DOM Level 3 Event 中的DOMSubtreeModified , DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 處會列出全部 level3 的 event 中斷。

7.在 js 文件中搜索&查找 js 函數定義

• 在 chrome developer tool 打開的狀況下, 按 ctrl + shift + F, 在經過 js 鉤子查找代碼位置時頗有用, 查找能夠支持正則表達式
• 查找函數定義: ctrl + shift + 0 (在 Sources panel 下)
• 查找文件: ctrl + o (在 Sources panel 下)
• 更多快捷鍵: 在 chrome developer tool 中按 ? 查看幫助

8.command line api

兩種類型的命令行：
1. 單行模式。單行模式是chrome的默認命令行模式，它容許咱們一次輸入一行代碼。單行模式的優勢是支持自動完成。
這個很強大的，就像在終端中同樣，你還可使用上下鍵來調入最近使用過的命令。
2. 多行模式。多行模式是單行模式的增強版，它容許咱們一次輸入多行代碼而且立刻執行。

例子：

• console.group()和console.groupEnd() 分組顯示
• console.dir()能夠顯示一個對象全部的屬性和方法
• console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼。
• console.trace()用來追蹤函數的調用軌跡。
• console.time()和console.timeEnd()，用來顯示代碼的運行時間。