感谢支持
我们一直在努力

FireBug图文详解

Firebug是firefox下的一个插件,能够调试所有网站语言,如HTML、CSS等,但FireBug最吸引我的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用。

Firefox的主要菜单选项有控制台、HTML、CSS、脚本、DOM、网络六个,Firebug从各个不同的角度剖析Web页面内部的细节层面,上述功能的配合使用能够满足网页设计的各项要求。

Firebug插件展开图示

1、控制台(console)功能:

启用此标签后界面如下:

作用:显示网页各类错误信息,并可对日志进行打印处理。

特色:

详细提示错误:显示当前页面中的javascript错误以及警告,并提示出错的文件和行号,方便调试。

查看AJAX黑幕:调试Ajax时,能看到每一个XMLHttpRequests请求post出去的参数、 URL、http头以及回馈的内容,原本幕后运作的程序展示在面前。

查看运行信息:可以查看变量内容及JAVASCRIPT中运行期的信息。

查看脚本的log:Firebug的日志输出有多种格式及语法,还可定制彩色输出,比起单调的alert,显然更加方便。

2、HTML功能

启用此标签后界面如下:

作用:用于查看当前页面的源代码功能,并可进行编辑,时时显示,从而实现页面最佳效果。

特色:

结构清晰:经过格式化的HTML代码,具有清晰的层次,可以清晰范编程标签之间的从属关系,

标识DOM层次,如图所示清晰列出HTML元素的parent、child、root元素,配合CSS查看器更见边界的分析页面的DIV+CSS。

直接修改,实时显示:可以在HTML查看器中直接修改HTML源代码,并且浏览器中第一时间看到修改后的效果。

高亮显示页面内容改变:若HTML页面元素的样式或背景色被改变,将以黄色高亮显示。

所见即所得:利用Inspect检查功能,用鼠标选定页面的某块区块,即可查看相应的HTML源代码和CSS样式表。

3、CSS功能

启用此标签后界面如下:

作用:如今网页多采用CSS+DIV,其中DIV可以精简HTML代码,CSS用于控制页面样式。CSS标签,用于查看所有的CSS定义信息,同时可编辑达到修改页面样式的效果。

特色:

自下向上列出每一个 CSS样式表的从属继承关系

以在这个查看器中直接添加、修改、删除一些CSS样式表属性,并在当前页面中 直接看到修改后的结果。

典型应用:根据需要随意挪动像素。

智能提示:通过上下方向键查看常用样式表属性的值。

Firebug 的详细介绍:请点这里
Firebug 的下载地址:请点这里

相关阅读

Nginx+Firebug 让浏览器告诉你负载均衡将请求分到了哪台服务器 http://www.linuxidc.com/Linux/2013-10/91824.htm

4、脚本(Javascript)功能:

启用此标签后界面如下:

作用:脚本调试器,麻雀虽小,五脏俱全。

特点:

脚本调试:包含:单步调试、设置断点、变量查看窗口……

统计脚本运行时间:通过右边的监控功能来实现脚本运行时间的查看和统计,提高运行效率。

5、DOM功能:

启用此标签后界面如下:

作用:用于查看页面DOM信息,通过提供的搜索功能实现DOM的快速准确定位,并可双击来实现DOM节点属性或值的修改。

特色:

快速定位DOM对象:DOM(Document Object Model)里头包含了大量的Object以及函数、事件,通过搜索快速定位DOM对象,方便地浏览DOM的内部结构。

双击DOM对象,可编辑变量或值。

自动完成功能:当你输入document.get之后,按下tab键就能补齐为 document.getElementById。按下shift+tab又会恢复原状

找寻驱使对象:找寻javascript的驱使对象

6、网络(Net)功能:

启用此标签后界面如下:

作用:用来监控网页各组成元素的运行时间的信息。

特色:揪出拖慢网络元凶:将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来。

“理论”只是基础,“实践”才是硬道理。FireBug会成为你爱不释手的一款插件。

赞(0) 打赏
转载请注明出处:服务器评测 » FireBug图文详解
分享到: 更多 (0)

听说打赏我的人,都进福布斯排行榜啦!

支付宝扫一扫打赏

微信扫一扫打赏