time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > 建站技巧 > 谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer

谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer

时间:2012-08-30 12:37 点击:2869次 字体:[ ]




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可以保存变更历史版本。

谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer_www.fengfly.com

保存变更历史版本:

谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer_www.fengfly.com

同时支持可以在Chrome 载入的Css文件正文中自由的修改。

 

网络交互

谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer_www.fengfly.com

当一个页面载入时,所有发出的请求可以在“Network”里监听到,同时下面有”All”, “Documents”, ”Stylesheets”, “Images”, “Scripts”, “XHR”(XMLHttpRequst), WebSockets, Other, 这几个分类,可以清晰的把网络请求进行分类,同时可以看到每个请求的详细情况。

 



本文地址 : http://www.fengfly.com/plus/view-209044-1.html
标签: Developer Chrome 高效 谷歌 Dev Tools
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: