google chrome在招来了firefox，firebug的项目组领导人john j. barton后，chrome dev tools也变的越来越好用，越来越方便了。本文根据google i/o上对chrome dev tools的介绍(),和相关ppt： 整理而来。(参照的chrome版本为: 19.0.1084.52)
实时css style编辑
选择一个dom,可以对dom进行编辑和操作,实时修改css style, 同时cssstyle可以保存变更历史版本。
保存变更历史版本:
同时支持可以在chrome 载入的css文件正文中自由的修改。
网络交互
当一个页面载入时，所有发出的请求可以在“network”里监听到，同时下面有”all”, “documents”, ”stylesheets”, “images”, “scripts”, “xhr”(xmlhttprequst), websockets, other, 这几个分类，可以清晰的把网络请求进行分类，同时可以看到每个请求的详细情况。
控制台
在控制台里可以方便的使用命令来查看dom，执行javascript, 等等操作， console api: copy(), dir(), inspect(), $0,
script debugging
script debugging 脚本调试功能，这个功能可以说是chrome dev tools里最实用最强大的工具了:
1. javascript breakpoints, break on exception, javascript pretty print.
break points:断点在需要设置的地方点一下即可,break on exception:当此功能开启时，有script异常出现时,自动会在exception处断住,方便差错。javascript pretty print: 当javascript被压缩后，非常难阅读，pretty print使javascript按照语法和关键字重新换行并重排，使得压缩后的javascript仍然可以进行阅读。
2. dom breakpoints
dom元素断点，经常有多处javascript操作同一个dom元素，如果要在javascript上下断点，要下好几个地方，不好断到想要的地方，在dom元素上下断点就方便多了：
break on subtree modifications, break on attributes modifications, break on node removal, 可以方便的断到操作dom的javascript。
3. xhr breakpoints, event listener breakpoints:
xhr breakpoints,可以方便的断到xmlhttprequest ajax请求。event listener breakpoints, 可以方便的断到各种event。
4. 查找javascript
使用ctrl shift f, 打开查找窗口, 查找支持正则表达式：
查找函数定义：ctrl shift o
查找文件： ctrl o
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的时间轴画了出来，方便进行优化:
remote debugging
remote debugging 使得chrome成为一个webserver,执行命令--remote-debugging-port=1337, 同时再开一个chrome 访问localhost:1337, 就可以用一个chrome当host,一个chrome当client,在调试一些移动web的时候非常实用。
您还没有登录,请您登录后再发表评论