Chrome 使用心得之 开发者工具[Elements]项V1.0
2011-08-24 21:54
309 查看
导读:标题有两个地方需要说明一下。一是,继上一篇文章,我将连续归纳自己对Chrome的使用心得——在网络上实在没有找到这个方面系列的文章(也是DE提醒了我);二是,最后的一个版本号。因为知识是不断丰富和加深的,所以,会持续增加或是修正文章。闲话少说,且看重点。
环境:Windows7 Ultimate Chrome 15dev
关键词:Chrome Elements
看图说话:(图片在新窗口中可以看到全图)
![](http://hi.csdn.net/attachment/201108/24/0_13141922895sfj.gif)
1 启动 开发者工具
如果忘了如何快速启动,请看上一篇文章。
2 图中红框从【Elements】开始,顺时针说明
Elements:
元素 页。显示当前页面静态源码。
Panel:
面板 页。这是我暂时赋予的称谓。因为像极了Adobe公司的产品UI。分别是,计算所得样式;页面样式;页面测距;HTML属性;DOM断点;时间监听器。
具体各自的使用,相信作为前端设计师都明白的。至于菜鸟如我,那就需要细细研究一番了。其中Styles 可以很好的帮助页面工程师进行布局等调整,看看右边的三个小工具~。Properties 主要是DOM结构表现。DOM Breakpoints 具体作用,我猜测是当页面出现断点时(一会儿会提到)有用。Event
Listeners 页面事件监听,右边是过滤器 设置。
警示统计:面板右下角,设置旁边。
左下角bar。依次是:独立窗口显示 开发者工具 ,控制台(Console), 查找镜(大伙儿很爱用的Firebug上的那个矩形框),DOM接点树——可做删除操作,点中,直接按下 Delete 键。
代码区域。选中节点,比如div等,右键,出现如下图示选项:
![](http://hi.csdn.net/attachment/201108/24/0_1314193948n1i6.gif)
选项的意思,想来大伙一看英文就明白了。其中,Edit as HTML,十分十分的有用啊。我个人觉得,可以省去可视化编辑器了。嘿嘿。
看那三个Break on *,就是上文提到的Breakpoints的问题。具体,我没有研究过。
好了,就到这里吧。文中定有错误遗漏之处,看管要多多指正。共求进步。
环境:Windows7 Ultimate Chrome 15dev
关键词:Chrome Elements
看图说话:(图片在新窗口中可以看到全图)
![](http://hi.csdn.net/attachment/201108/24/0_13141922895sfj.gif)
1 启动 开发者工具
如果忘了如何快速启动,请看上一篇文章。
2 图中红框从【Elements】开始,顺时针说明
Elements:
元素 页。显示当前页面静态源码。
Panel:
面板 页。这是我暂时赋予的称谓。因为像极了Adobe公司的产品UI。分别是,计算所得样式;页面样式;页面测距;HTML属性;DOM断点;时间监听器。
具体各自的使用,相信作为前端设计师都明白的。至于菜鸟如我,那就需要细细研究一番了。其中Styles 可以很好的帮助页面工程师进行布局等调整,看看右边的三个小工具~。Properties 主要是DOM结构表现。DOM Breakpoints 具体作用,我猜测是当页面出现断点时(一会儿会提到)有用。Event
Listeners 页面事件监听,右边是过滤器 设置。
警示统计:面板右下角,设置旁边。
左下角bar。依次是:独立窗口显示 开发者工具 ,控制台(Console), 查找镜(大伙儿很爱用的Firebug上的那个矩形框),DOM接点树——可做删除操作,点中,直接按下 Delete 键。
代码区域。选中节点,比如div等,右键,出现如下图示选项:
![](http://hi.csdn.net/attachment/201108/24/0_1314193948n1i6.gif)
选项的意思,想来大伙一看英文就明白了。其中,Edit as HTML,十分十分的有用啊。我个人觉得,可以省去可视化编辑器了。嘿嘿。
看那三个Break on *,就是上文提到的Breakpoints的问题。具体,我没有研究过。
好了,就到这里吧。文中定有错误遗漏之处,看管要多多指正。共求进步。
相关文章推荐
- Chrome 使用心得之 开发者工具[Resources]项V1.0
- Chrome 使用心得之 开发者快捷键大全V1.0
- Chrome 使用心得之 开发者快捷键大全V1.0
- Chrome开发者工具使用教程笔记
- Chrome开发者工具详解(1)-Elements、Console、Sources面板 Chrome开发者工具面板
- 使用Chrome开发者工具来在设备上调试
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- chrome开发者工具的使用
- 使用 Chrome 开发者工具实现网站快速开发的12个小技巧
- 使用Chrome开发者工具注入Javascript实现额外功能
- chrome开发者工具使用
- Chrome自带的开发者工具使用方法教程
- Chrome 开发者工具使用技巧
- chrome开发者工具功能拾遗:Elements面板篇
- chrome开发者工具使用
- chrome 开发者工具 使用指南
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- Chrome 开发者工具使用指南
- Chrome开发者工具详解(1):Elements、Console、Sources面板
- firefox和chrome的开发者工具使用技巧