大名鼎鼎的Firebug绝对是用来帮助您进行前端开发和调试的利器,这里我们绝对要把他收录到开发者必备精选集中。
Firebug同Firefox连接在一起,形成了强大的网页开发工具。您可以通过Firebug来编辑、调试和监控任何页面的CSS、HTML和JavaScript。
查看和编辑HTML代码
通过Firebug可以很简单的查找页面中的HTML元素。并且在您找到了需要的HTML元素之后,Firebug还提供了大量的相关信息,并且允许您动态的编辑HTML元素及其属性。
动态调整CSS
Firebug的CSS标签可以告诉您所有需要的style信息,如果您不喜欢现在的样式,直接就可以编辑CSS规则改变这些样式。
可视化的CSS模型
调试中,您设计的CSS盒子模型可能不象想象中那样整齐,而这些模型又都很难懂或者难以想象。Firebug完全可以帮助您,他能够显示出正确的盒子模型以及一些关键的数据,比如大小阿、margin阿、边界阿、内边距阿等等。
监控网络活动
页面读取花费了很长时间?为什么?是不是写了很多的JavaScript?还是忘记压缩图片了?是不是页面上引用的第三方资源太慢了?Firebug可以一项一项的把这些关键点都列出来,让您知道页面读取的细节信心。
调试JavaScript
Firebug中包含了一个非常强大的JavaScript调试器,您可以在任何时候给页面中的代码设置断点,然后从调试器进入到代码的世界,查看变量值等等。如果您的代码有点慢,不妨使用JavaScript的分析工具来测量一下性能,快速找到瓶颈所在。
快速查找错误
Firebug能够在第一时间内向您报告出页面上包含的错误,包括JavaScript、CSS和XML的错误信息。
查看DOM
DOM即文档对象模型,是HTML页面形成的关键数据结构,他把页面中所有的HTML元素拼装成一个模型中,以便JavaScript代码来控制他们。Firebug能够帮助您查找并详细查看DOM对象,甚至能够直接动态编辑这些DOM对象。
直接运行JavaScript代码
命令行是所有编程工具中最古老的一种了。Firebug也给您提供了这种怀旧的但是确实强大的命令行工具,可以方便您直接在命令上使用JavaScript。
JavaScript输出日志
有时候光有强劲的调试器还不够,可能简单的在控制台上输出大量运行信息是更为直接和快速的方式。Firebug给您提供了一系列同样强大的日志输出函数可以帮助到您。
需要在其他浏览器上使用Firebug?现在有福了,可以用Firebug Lite,还包括在Chrome上的扩展哦!
注意注意:
现在官方扩展中心上的Firebug还是1.6系列,对于Firefox 4的支持不是很好,要想支持Firefox 4,需要使用1.7系列的,不过1.7系列还处于测试阶段,所以官方扩展中心还没有更新,大家如果需要在Firefox 4上使用Firebug,可以来这里安装。
— — 转载至火狐官方。
评论(1)
曾经的花心,曾经的不在意任何人,都将不复存在,心里从相爱的那刻起,就装进了另外一个人。从那刻开始,一个人的世界将是两个人的行走。不经意间的刻骨,是心中充满真爱的时刻。…