firebug使用方法

firebug使用方法

firebug使用方法

Firebug是Joe Hewitt开发的一套与Firefox集成在一起的功能强大的web开发工具，可以实时编辑、调试和监测任何页面的CSS、HTML和JavaScript。

 

相信很多从事Web开发工作的开发者都听说和使用过Firebug，但可能大部分人还不知道，其实它是一个在网页设计方面功能相当强大的编辑器，它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是Firefox浏览器的一个插件，所以建议各位Web开发者，要充分利用FireFox浏览器和Firebug插件进行日常的调试工作。

 

一、Firebug安装

1、Firebug是与Firefox集成的，所以我们首先要安装的事Firefox浏览器。

2、安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加软件”，在弹出窗口中点击右下角的“获取扩展”链接。在打开的页面的search输入框中输入“firebug”。等搜索结果出来后点击Firbug链接）进入Firebug的下载安装页面。

3、在页面中点击Install Now按钮。

4、在弹出窗口中等待3秒后单击“立即安装”按钮。

5、等待安装完成后会单击窗口中的“重启 Firefox”按钮重新启动Firefox。

6、当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标，这就表示Firebug已经安装好了。灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。而绿色则表示Firebug已开启对当前网站进行编辑、调试和监测的功能。而红色图标表示已开启对当前网站进行编辑、调试和监测的功能，而且检查到当前页面有错误，当前图标表示有5个错误。

 

二、Firebug开启或关闭

 

单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分，上半部分是浏览的页面，下半部分则是Firebug的控制窗口。如果你不喜欢这样，可以按CTRL+F12或在前面操作后单击右上角的上箭头按钮，弹出一个新窗口作为Firebug的控制窗口。

 

 

三、Firebug主菜单

 

单击功能区最左边的臭虫图标可打开主菜单，其主要功能描述请看表

 

菜单选项	说明
Disable Firebug	关闭/开启Firebug对所有网页的编辑、调试和检测功能
Disable Firebug for xxxxx	关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能
Allowed Sites	设置允许编辑、调试和检测的网站
Text Size：Increase text size	增大信息区域显示文本的字号
Text Size：Decrease text size	减少信息区域显示文本的字号
Text Size：Normal text size	信息区域以正常字体显示
Options：Always Open in New Window	设置Firebug控制窗口永远在新窗口打开
Show Preview tooltips	设置是否显示预览提示。
Shade Box Model	当前查看状态为HTML，鼠标在HTML element标签上移动时，页面会相应在当前标签显示位置显示一个边框表示该标签范围。这个选项的作用是设置是否用不同颜色背景表示标签范围。
Firebug Website..	打开Firebug主页
Documentation..	打开Firebug文档页。
Discussion Group	打开Firebug讨论组
Contribute	打开捐助Firebug 页面。

 

 

四、Firebug操作界面

 

Firefox的主要菜单选项有控制台、HTML、CSS、脚本、DOM、网络六个，上述功能的配合使用能够满足网页设计的各项要求。

 

1、控制台（Console）功能

控制台得主要作用是用来显示网页各类错误信息，并可对日志进行打印处理。同时可以在进行javascript调试的时候当作命令行窗口使用，并通过概况子选项说明javascript代码执行的相关信息。

 

2、HTML功能

此菜单标签功能，主要用于查看当前页面的源代码功能，并可进行编辑，时时显示，从而实现页面最佳效果。

 

3、CSS功能

点击CSS菜单标签，可查看所有的CSS定义信息，同时也可以通过双击来达到修改页面样式的效果

 

4、脚本（Javascript）功能

脚本功能主要是一个脚本调试器，可以进行单步调试、断点设置、变量查看等功能，同时通过右边的监控功能来实现脚本运行时间的查看和统计，提高运行效率

 

5、DOM功能

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

 

6、网络（Net）功能

该标签功能主要用来监控网页各组成元素的运行时间的信息，方便找出其中运行时间较慢的部分，进一步优化运行效率

 

 

五、Firebug使用技巧

 

1、使用Firebug可以找到页面中的任何内容

不知道各位有无遇到过这样的情况，在一个复杂的HTML页面中，当你想找某个页面元素的实际对应的HTML时，你不得不在一大堆HTML代码中去查找，十分麻烦。有了Firebug，现在你只需要在页面中，用鼠标右键选中某个元素，然后在弹出的菜单中，选择“查看元素”，马上就会在HTML页面代码中找到该元素对应的代码了，十分方便，如下图所示：

同样，也提供了更快速的方法：只需要点Firebug插件左上方的箭头，如下图所示，则每当鼠标在页面中移动时，在Firebug控制台中就马上显示移动时经过的HTML元素的代码：

 

2、可以使用Firebug修改HTML和CSS

通过Firebug，可以直接修改HTML，增加HTML的属性，删除元素，增加CSS样式及实现更多功能，如下图：

在上图的菜单中可以清楚看到，你可以对HTML元素进行各样的修改操作，方法是先点击HTML部分的代码，然后鼠标右键即可在弹出的菜单中进行操作。

 

3、可以通过Firebug查看DOM元素和对XML进行操作

当打开一个HTML页通过Firebug查看HTML代码时，你可以同时点在控制面板中的DOM树，就会以DOM的树型结构方式看到整个HTML的结构。而如果你是打开了一个XML文件，那么鼠标右键点XML文件中的任何一个元素，在弹出的菜单中同样可以选择对XML进行相关操作，如下图：

 

4、使用Firebug调试Javascript代码

在Firebug控制台中，如果要执行调试Javascript代码，只需要首先将Script控制面版启动，然后在点击Console按钮，在下拉菜单中选择显示Javascipt及HTML错误(还可以让用户选择显示更多的错误)，接着在底部会发现出现>>>的箭头，在这里，你可以输入Javascipt代码，输入后，马上按回车键，就可以执行了，十分方便，如下图：

一个小技巧是，在输入Javascipt的时候，还支持使用tab键的自动完成提醒功能，比如对于一个很长的Javascipt函数，在没输入完的时候只要按tab键firebug就会帮助你自动补充完整。

　　

5、多次加载页面后Firebug会记得加载前的位置

无论你重复加载多少次页面，Firebug在每次加载页面后总会自己记得加载前页面所在的位置(比如你已经在浏览页面的底部，此时再加载页面，则新的页面加载后，依然把你带到页面底部)。

 

6、使用$标记去方便访问变量

在上面的第4点中，我们提到了在>>>这个命令行下可以进行Javascript的调试，而另外一个技巧是可以使用如$1去访问曾经访问过的变量中的最后一个，如此类推，可以使用$2访问曾经访问过的变量中的倒数第二个。如下图：

 

7、Firebug会高亮度显示修改过的内容

在Firebug中，只要你修改过页面中的内容，就会以黄色高亮度显示曾经修改过的内容，如下图：

 

8、监视Javascript的运行性能

在Firebug中，你可以点控制台中的“profile(概况)”选项，这将开启Firebug的性能监视功能，之后你可以进行页面的一系列操作，当再次点profile按钮后，将停止对性能的监测活动，接着Firebug会显示一个列表，其中会清楚列明操作过程中所涉及的函数，调用次数，占用时间、平均时间，最小时间，最大时间等，如下图所示：

 

9、Firebug强大的网络数据监视功能

Firebug还提供了十分功能强大的网络数据监功能。开发者在开发web应用时，经常要观察各类HTTP请求和回应，在这方面Firebug的功能十分强大。首先，只需要开启控制面板中的网络功能，然后在每次运行页面时，都可以清楚看到每个HTTP的请求和HTTP回应的具体细节。如下图：

在上图中，只要点每一个请求旁边的+号，就可以看到该请求的具体细节，如下图：

可以看到，能看到HTTP的头部的各种信息。同样，如果要看当前页面中的比如图片，FLASH等元素的信息等，也可以通过上图去点不同的选项卡去筛选查看，十分方便。

 

10、使用Firebug的Log功能

　　在设计页面时，经常要记录下页面的一些信息，这个时候，可以使用Firebug中的log日志功能，把一些信息输出到firebug的控制台中，这样就方便调试了。Firebug提供了一个console对象，在插件加载的时候就注册到Javascript的运行环境中去了，可以在程序中直接使用。console对象提供了一个log方法，举例说明如下：

 

 <script language="javascript" type="text/javascript">... console.log('This is log message'); console.debug('This is debug message'); console.error('This is error message'); console.info('This is info message'); console.warn('This is warning message'); </script> 

 

在Firefox中执行如下代码，会看到Firebug的控制台中出现如下信息：

可以看到，各个级别的日志输出，都带有一个彩色的图标，能给用户很醒目的提醒。同时，console。log 还支持格式化字符串的输出，你可以用类似C语言中printf的语法来调用这个函数：console.log(“%s is %d years old.”, “Bob”, 42)。

 

11、可以在Firebug中调试程序

在Firebug控制台的的Javascript控制面板中，可以对页面中的Javascript进行调试，方法很简单，只需要在要调试的行的左边单击，就会出现断点了，之后请记住下面常件的快捷键：

　　(1) F10 进入下一行；

　　(2) F8继续调试；

　　(3) F11进入Javascript中的函数体调试；

　　(4) Shift+F11跳出函数体。

 

12、在Firebug中可以设置带条件的断点

在Firebug中，还可以设置带条件判断的断点，如下图：