Google Chrome在招來(lái)了FireFox，F(xiàn)ireBug的項(xiàng)目組領(lǐng)導(dǎo)人John J. Barton后，Chrome Dev Tools也變的越來(lái)越好用，越來(lái)越方便了。本文根據(jù)Google I/O上對(duì)Chrome Dev Tools的介紹（Youtube 視頻）和相關(guān)PPT 整理而來(lái)。(參照的Chrome版本為: 19.0.1084.52)

實(shí)時(shí)CSS Style編輯

選擇一個(gè)Dom,可以對(duì)Dom進(jìn)行編輯和操作,實(shí)時(shí)修改Css Style, 同時(shí)CssStyle可以保存變更歷史版本。

保存變更歷史版本:

同時(shí)支持可以在Chrome 載入的Css文件正文中自由的修改。

網(wǎng)絡(luò)交互

當(dāng)一個(gè)頁(yè)面載入時(shí)，所有發(fā)出的請(qǐng)求可以在“Network”里監(jiān)聽(tīng)到，同時(shí)下面有”All”, “Documents”, ”Stylesheets”, “Images”, “Scripts”, “XHR”(XMLHttpRequst), WebSockets, Other, 這幾個(gè)分類，可以清晰的把網(wǎng)絡(luò)請(qǐng)求進(jìn)行分類，同時(shí)可以看到每個(gè)請(qǐng)求的詳細(xì)情況。

控制臺(tái)

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

Script Debugging

Script Debugging 腳本調(diào)試功能，這個(gè)功能可以說(shuō)是Chrome Dev Tools里最實(shí)用***大的工具了:

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

Break Points:斷點(diǎn)在需要設(shè)置的地方點(diǎn)一下即可,Break on exception:當(dāng)此功能開(kāi)啟時(shí)，有Script異常出現(xiàn)時(shí),自動(dòng)會(huì)在Exception處斷住,方便差錯(cuò)。JavaScript Pretty Print: 當(dāng)JavaScript被壓縮后，非常難閱讀，Pretty Print使JavaScript按照語(yǔ)法和關(guān)鍵字重新?lián)Q行并重排，使得壓縮后的JavaScript仍然可以進(jìn)行閱讀。

2. DOM Breakpoints

Dom元素?cái)帱c(diǎn)，經(jīng)常有多處JavaScript操作同一個(gè)Dom元素，如果要在JavaScript上下斷點(diǎn)，要下好幾個(gè)地方，不好斷到想要的地方，在Dom元素上下斷點(diǎn)就方便多了：

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

#p#

3. XHR Breakpoints, Event listener breakpoints:

XHR Breakpoints,可以方便的斷到XMLHttpRequest Ajax請(qǐng)求。Event Listener Breakpoints, 可以方便的斷到各種Event。

4. 查找JavaScript

使用Ctrl+Shift+F, 打開(kāi)查找窗口, 查找支持正則表達(dá)式：

查找函數(shù)定義：Ctrl + Shift + o

查找文件： Ctrl + o

5. 實(shí)時(shí)修改 JavaScript代碼

頁(yè)面外鏈JavaScript文件在 Script Panel中可以直接修改，改完后Ctrl + s 保存， 會(huì)立即生效，但是不支持 Html 頁(yè)面中 JavaScript 修改，經(jīng)過(guò) Pretty print 格式化的JavaScript也不支持實(shí)時(shí)修改。

6. 自建Script文件

在Console(控制臺(tái)) 中輸入代碼的***一行加上 //@ sourceURL=filename.js, 會(huì)在Script Panel中加入一個(gè)新的外鏈Script文件: filename.js, 這個(gè)新文件和其它外鏈JavaScript 文件一樣，可以實(shí)時(shí)進(jìn)行修改。

Timeline

Timeline功能把瀏覽器處理Dom的時(shí)間軸畫(huà)了出來(lái)，方便進(jìn)行優(yōu)化:

Remote Debugging

Remote Debugging 使得Chrome成為一個(gè)WebServer,執(zhí)行命令–remote-debugging-port=1337, 同時(shí)再開(kāi)一個(gè)Chrome 訪問(wèn)localhost:1337, 就可以用一個(gè)Chrome當(dāng)Host,一個(gè)Chrome當(dāng)Client,在調(diào)試一些移動(dòng)Web的時(shí)候非常實(shí)用。

原文鏈接：http://www.cnblogs.com/powertoolsteam/archive/2012/06/15/2550882.html