Firebug 折腾记_(2)HTML&CSS 定位及调试小技巧

版权声明：保留原博文链接及作者的情况下，请尽情转载吧！！！

题外话

传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的; 而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果; 在调试中对代码的操作不会保存到本地实际代码中..是不是很赞!!;

定位HTML元素的三种方式

1. 进入调试工具界面,按下”瓢虫”旁边的小鼠标,再进行网页元素的选择
2. 默认快捷键,Ctrl + shift + C
3. 鼠标移动到网页的某一块元素,鼠标右键,使用Firebug查看元素

HTML及CSS简单调试

##HTML元素编辑 除了写死的代码结构不能操作外(比如DIV块标签),内部的各种属性和内容都支持实时修改和预览的; 修改其中内容,只要单击你选中的东东即可,会有一个小小的蓝色框框出来 比如:

• 类(class)
• 行内样式(style)
• 目标(target)
• 链接(href)
• 文本内容
• 增加额外属性,在包含块的第一个标签的括号内单击即可添加自己想要增加的

HTML DOM选定

可以轻而易举的选定各种包裹层和父类,单击即可

CSS元素编辑(实时预览)

• 支持禁用某个属性,点击属性旁边的红色圈圈,被禁用属性会变成灰色

• 修改某个属性

• 增加某个属性

CSS像素微调技巧

CSDN不支持GIF动态图..所以没做…..百看不如一试

• 方向键↑或者方向键↓，上增加1px(em==),下减去1px(em==)
• Ctrl+↑ 或者Ctrl+↓，上增加0.1px(em==),下减去0.1px(em==)
• shift+↑ 或者shift+↓，上增加10px(em==),下减去10px(em==)

概览区域

• 计算出样式可以 – 可以计算我们选定块的整体大小,很实用

• 样式下拉菜单 – 实时查看链接的效果 这里面更改颜色显式的模式,及链接的效果实时查看,比如你选定一个a链接区域, CSS有设置了hover,focus这些事件,勾选了即可看到添加样式的效果而不需要移动触发

快捷键及自定义

全局自定义快捷键调用: ctrl+shift+alt+b,当然也可以点击”瓢虫进去”

Firebug全局快捷键,支持自定义

哪个和你的习惯冲突了.修改内部快捷键保存确定即可生效