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可以保存变更历史版本。
![clip_image002](https://www.#.com/imgs/9/5/8/6/6/953fb6f16f9ed73d5588017535e55848.jpe)
保存变更历史版本:
![clip_image004](https://www.#.com/imgs/0/3/5/0/92/827c51416e87e0b389e4977e37ae156c.jpe)
同时支持可以在Chrome 载入的Css文件正文中自由的修改。
网络交互
![clip_image006](https://www.#.com/imgs/3/2/9/0/58/18c8bb18dd7849ce90781d0a8fa5bd3d.jpe)
当一个页面载入时,所有发出的请求可以在“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,
![clip_image008](https://www.#.com/imgs/6/8/7/0/6/3b036f4f413f6e85b43db96dec623a2e.jpe)
Script Debugging
Script Debugging 脚本调试功能,这个功能可以说是Chrome Dev Tools里最实用最强大的工具了:
1. Javascript Breakpoints, Break on exception, Javascript Pretty Print.
![clip_image010](https://www.#.com/imgs/7/1/9/2/37/8aff0ecce949734a8ea810101f71a04c.jpe)
Break Points:断点在需要设置的地方点一下即可,Break on exception:当此功能开启时,有Script异常出现时,自动会在Exception处断住,方便差错。Javascript Pretty Print: 当Javascript被压缩后,非常难阅读,Pretty Print使Javascript按照语法和关键字重新换行并重排,使得压缩后的Javascript仍然可以进行阅读。
2. DOM Breakpoints
Dom元素断点,经常有多处Javascript操作同一个Dom元素,如果要在Javascript上下断点,要下好几个地方,不好断到想要的地方,在Dom元素上下断点就方便多了:
![clip_image012](https://www.#.com/imgs/3/5/3/5/62/9cf1b8c152b398bea5ed633f6ad515f6.jpe)
Break on subtree modifications, Break on attributes modifications, Break on node removal, 可以方便的断到操作Dom的Javascript。
3. XHR Breakpoints, Event listener breakpoints:
![clip_image014](https://www.#.com/imgs/7/7/2/1/65/3f7a7cfd481fd131fe94c5d6c6556ea0.jpe)
XHR Breakpoints,可以方便的断到XMLHttpRequest Ajax请求。Event Listener Breakpoints, 可以方便的断到各种Event。
4. 查找Javascript
使用Ctrl+Shift+F, 打开查找窗口, 查找支持正则表达式:
![clip_image016](https://www.#.com/imgs/3/6/7/7/96/079d0c88d4f61456a17c1bdefc7ecf5a.jpe)
查找函数定义:Ctrl + Shift + o
![clip_image018](https://www.#.com/imgs/5/5/6/4/92/a2cb6b4239983a01e63f42bc01f3badf.jpe)
查找文件: Ctrl + o
![clip_image020](https://www.#.com/imgs/3/2/4/8/50/507196514ee6d5f1582363dc56dcc0ce.jpe)
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的时间轴画了出来,方便进行优化:
![clip_image022](https://www.#.com/imgs/6/8/6/6/63/6dd1a2748dd0459f9d42a95a2bdd5258.jpe)
Remote Debugging
Remote Debugging 使得Chrome成为一个WebServer,执行命令--remote-debugging-port=1337, 同时再开一个Chrome 访问localhost:1337, 就可以用一个Chrome当Host,一个Chrome当Client,在调试一些移动Web的时候非常实用。
![clip_image024](https://www.#.com/imgs/2/2/4/0/13/59e3ab38658d0e72aea895accff6d570.jpe)