资源描述：
《谷歌 chrome dev tools 浅析 – 成为更高效的 developer》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。
1、谷歌ChromeDevTools浅析–成为更高效的DeveloperGoogleChrome在招来了FireFox，FireBug的项目组领导人JohnJ.Barton后，ChromeDevTools也变的越来越好用，越来越方便了。本文根据GoogleI/O上对ChromeDevTools的介绍,和相关PPT： 整理而来。(参照的Chrome版本为:19.0.1084.52)实时CSSStyle编辑选择一个Dom,可以对Dom进行编辑和操作,实时修改CssStyle,同时CssStyle可以保存变
2、更历史版本。保存变更历史版本:同时支持可以在Chrome载入的Css文件正文中自由的修改。 网络交互lv包包、古奇女包、coach包:www.naitiao.com
3、兔毛皮草、獭兔皮草、皮草服饰：www.shideke.com当一个页面载入时，所有发出的请求可以在“Network”里监听到，同时下面有”All”,“Documents”,”Stylesheets”,“Images”,“Scripts”,“XHR”(XMLHttpRequst),WebSockets,Other,这几个分类，可以清晰的
4、把网络请求进行分类，同时可以看到每个请求的详细情况。 控制台在控制台里可以方便的使用命令来查看Dom，执行JavaScript,等等操作，ConsoleAPI: http://getfirebug.com/wiki/index.php/Command_Line_APIcopy(),dir(),inspect(),$0, ScriptDebuggingScriptDebugging脚本调试功能，这个功能可以说是ChromeDevTools里最实用最强大的工具了:1.JavaScriptBreakpo
5、ints,Breakonexception,JavaScriptPrettyPrint.lv包包、古奇女包、coach包:www.naitiao.com
6、兔毛皮草、獭兔皮草、皮草服饰：www.shideke.comBreakPoints:断点在需要设置的地方点一下即可,Breakonexception:当此功能开启时，有Script异常出现时,自动会在Exception处断住,方便差错。JavaScriptPrettyPrint:当JavaScript被压缩后，非常难阅读，PrettyPrint使
7、JavaScript按照语法和关键字重新换行并重排，使得压缩后的JavaScript仍然可以进行阅读。 2.DOMBreakpointsDom元素断点，经常有多处JavaScript操作同一个Dom元素，如果要在JavaScript上下断点，要下好几个地方，不好断到想要的地方，在Dom元素上下断点就方便多了：Breakonsubtreemodifications,Breakonattributesmodifications,Breakonnoderemoval,可以方便的断到操作Dom的JavaS
8、cript。 3.XHRBreakpoints,Eventlistenerbreakpoints:lv包包、古奇女包、coach包:www.naitiao.com
9、兔毛皮草、獭兔皮草、皮草服饰：www.shideke.comXHRBreakpoints,可以方便的断到XMLHttpRequestAjax请求。EventListenerBreakpoints,可以方便的断到各种Event。 4.查找JavaScript使用Ctrl+Shift+F,打开查找窗口,查找支持正则表达式：查找函数定义：Ct
10、rl+Shift+olv包包、古奇女包、coach包:www.naitiao.com
11、兔毛皮草、獭兔皮草、皮草服饰：www.shideke.com查找文件：Ctrl+o 5.实时修改JavaScript代码页面外链JavaScript文件在ScriptPanel中可以直接修改，改完后Ctrl+s 保存，会立即生效，但是不支持Html页面中JavaScript修改，经过Prettyprint格式化的JavaScript也不支持实时修改。 6.自建Script文件在Console(控制台)中输入代码的
12、最后一行加上//@sourceURL=filename.js,会在ScriptPanel中加入一个新的外链Script文件:filename.js,这个新文件和其它外链JavaScript文件一样，可以实时进行修改。 lv包包、古奇女包、coach包:www.naitiao.com
13、兔毛皮草、獭兔皮草、皮草服饰：www.shideke.comTimelineTimeline功能把浏览器处理Dom的时间轴画了出来，方便进行优化: RemoteDebuggingRemoteDebugg
