调试CSS的利器 Firebug

因为工作一直要测试浏览器对页面的兼用性,所以一直都安装了Firefox,可是一直没有好好用过Firefox,仅仅把Firefox 当成是一个显示工具。最近Roast告诉我他(PHP程序员)怎么调试CSS的,说到可以用Firebug,于是我将信将疑的使用了下,发现原来是如此的好东西。

暂时没有发现任何缺点。

结合下面的图看Firebug优点如下:
1.结合当前位置,当前html代码,和当前的CSS代码。点到html代码位置,马上实际页面中显示当前标签的位置,并且一并显示CSS。
2.告诉你标签所对应的CSS代码在哪个css文件当中(方便你在准确的文件当中修改代码,再也不用自己找了),并且告诉你与这个标签有关的所有CSS,包括继承的属性(经常不知道哪个CSS影响了你的一个细节,现在一目了然,太强大了)。
3.点击布局标签,你可以看到真实的元素的高度和宽度以及内间距(Padding)、外间距(Margin),迅速找到问题出现在哪。
4.可以显示javascript生成的html代码,知道意味着什么了,可以调试javascipt生成标签的样式啦。真的是很好很强大。

firebug 调试 css

firebug css

Firebug 非常强大,运行速度也非常快,希望大家多多使用多多发现其中的便捷之处。利用它可以帮助页面重构人员调试CSS,也可以帮助程序员调试Js.

Firebug 下载地址http://getfirebug.com/

直接用Firefox点击这个按钮就可以安装:

This entry was posted in firefox and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>