Google Chrome Dev Tools 淺析 – 成為更高效的 Developer

Google Chrome在招來了FireFox，FireBug的項目組領導人John J. Barton後，Chrome Dev Tools也變的越來越好用，越來越方便了。本文根據Google I/O上對Chrome Dev Tools的介紹(http://www.youtube.com/watch?v=N8SS-rUEZPg),和相關PPT：http://chrome-devtools-io2011.appspot.com/template/index.html 整理而來。(參照的Chrome版本為: 19.0.1084.52)

即時CSS Style編輯

選擇一個Dom,可以對Dom進行編輯和操作,即時修改Css Style, 同時CssStyle可以儲存變更曆史版本。

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image002" border="0" alt="clip_image002" src="http://www.bkjia.com/uploads/allimg/131228/131054L08-0.jpg" width="558" height="268" />

儲存變更曆史版本:

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image004" border="0" alt="clip_image004" src="http://www.bkjia.com/uploads/allimg/131228/131054KE-1.jpg" width="558" height="268" />

同時支援可以在Chrome 載入的Css檔案本文中自由的修改。

 

網路互動

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image006" border="0" alt="clip_image006" src="http://www.bkjia.com/uploads/allimg/131228/13105451B-2.jpg" width="557" height="300" />

當一個頁面載入時，所有發出的請求可以在“Network”裡監聽到，同時下面有”All”, “Documents”, ”Stylesheets”, “Images”, “Scripts”, “XHR”(XMLHttpRequst), WebSockets, Other, 這幾個分類，可以清晰的把網路請求進行分類，同時可以看到每個請求的詳細情況。

 

控制台

在控制台裡可以方便的使用命令來查看Dom，執行JavaScript, 等等操作， Console API: http://getfirebug.com/wiki/index.php/Command_Line_API copy(), dir(), inspect(), $0,

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image008" border="0" alt="clip_image008" src="http://www.bkjia.com/uploads/allimg/131228/1310541021-3.jpg" width="557" height="301" />

 

Script Debugging

Script Debugging 指令碼調試功能，這個功能可以說是Chrome Dev Tools裡最實用最強大的工具了:

1. JavaScript Breakpoints, Break on exception, JavaScript Pretty Print.

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image010" border="0" alt="clip_image010" src="http://www.bkjia.com/uploads/allimg/131228/1310545X8-4.jpg" width="558" height="310" />

Break Points:斷點在需要設定的地方點一下即可,Break on exception:當此功能開啟時，有Script異常出現時,自動會在Exception處斷住,方便差錯。JavaScript Pretty Print: 當JavaScript被壓縮後，非常難閱讀，Pretty Print使JavaScript按照文法和關鍵字重新換行並重排，使得壓縮後的JavaScript仍然可以進行閱讀。

 

2. DOM Breakpoints

Dom元素斷點，經常有多處JavaScript操作同一個Dom元素，如果要在JavaScript上下斷點，要下好幾個地方，不好斷到想要的地方，在Dom元素上下斷點就方便多了：

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image012" border="0" alt="clip_image012" src="http://www.bkjia.com/uploads/allimg/131228/13105455A-5.jpg" width="557" height="344" />

Break on subtree modifications, Break on attributes modifications, Break on node removal, 可以方便的斷到操作Dom的JavaScript。

 

3. XHR Breakpoints, Event listener breakpoints:

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image014" border="0" alt="clip_image014" src="http://www.bkjia.com/uploads/allimg/131228/13105464A-6.jpg" width="557" height="332" />

XHR Breakpoints,可以方便的斷到XMLHttpRequest Ajax請求。Event Listener Breakpoints, 可以方便的斷到各種Event。

 

4. 尋找JavaScript

使用Ctrl+Shift+F, 開啟尋找視窗, 尋找支援Regex：

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image016" border="0" alt="clip_image016" src="http://img1.51cto.com/attachment/201206/15/2369428_1339749750gjyJ.jpg" width="557" height="332" />

尋找函數定義：Ctrl + Shift + o

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image018" border="0" alt="clip_image018" src="http://www.bkjia.com/uploads/allimg/131228/13105422E-8.jpg" width="557" height="332" />

尋找檔案： Ctrl + o

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image020" border="0" alt="clip_image020" src="http://www.bkjia.com/uploads/allimg/131228/1310544K9-9.jpg" width="557" height="332" />

 

5. 即時修改 JavaScript代碼

頁面外鏈JavaScript檔案在 Script Panel中可以直接修改，改完後Ctrl + s 儲存， 會立即生效，但是不支援 Html 頁面中 JavaScript 修改，經過 Pretty print 格式化的JavaScript也不支援即時修改。

 

6. 自建Script檔案

在Console(控制台) 中輸入代碼的最後一行加上 //@ sourceURL=filename.js, 會在Script Panel中加入一個新的外鏈Script檔案: filename.js, 這個新檔案和其它外鏈JavaScript 檔案一樣，可以即時進行修改。

 

Timeline

Timeline功能把瀏覽器處理Dom的時間軸畫了出來，方便進行最佳化:

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image022" border="0" alt="clip_image022" src="http://www.bkjia.com/uploads/allimg/131228/1310545615-10.jpg" width="557" height="332" />

 

Remote Debugging

Remote Debugging 使得Chrome成為一個WebServer,執行命令--remote-debugging-port=1337, 同時再開一個Chrome 訪問localhost:1337, 就可以用一個Chrome當Host,一個Chrome當Client,在調試一些移動Web的時候非常實用。

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image024" border="0" alt="clip_image024" src="http://www.bkjia.com/uploads/allimg/131228/1310544416-11.jpg" width="558" height="410" />