FireBug使用方法.docx
《FireBug使用方法.docx》由会员分享,可在线阅读,更多相关《FireBug使用方法.docx(43页珍藏版)》请在冰豆网上搜索。
FireBug使用方法
FireBug使用方法
Javascript的调试,是开发Web应用尤其是AJAX应用很重要的一环,目前对Javascript进行调试的工具很多,我比较喜欢使用的是Firebug。
Firebug是JoeHewitt开发的一套与Firefox集成在一起的功能强大的web开发工具,可以实时编辑、调试和监测任何页面的CSS、HTML和JavaScript。
本文主要是为初学者介绍一下Firebug的基本功能与如何使用Firebug。
由于本人水平与能力有限,在文章中的可能会有很多错误与遗漏,希望大家能谅解和指正!
1、 安装
Firebug是与Firefox集成的,所以我们首先要安装的事Firefox浏览器。
安装好浏览器后,打开浏览器,选择菜单栏上的“工具”菜单,选择“附加软件”,在弹出窗口中点击右下角的“获取扩展”链接。
在打开的页面的search输入框中输入“firebug”。
等搜索结果出来后点击Firbug链接(图1-1红色圈住部分)进入Firebug的下载安装页面。
图1-1
在页面中点击InstallNow(图1-2)按钮。
图1-2
在弹出窗口(图1-3)中等待3秒后单击“立即安装”按钮。
图1-3
等待安装完成后会单击窗口(图1-4)中的“重启 Firefox”按钮重新启动Firefox。
图1-4
当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标(
),这就表示Firebug已经安装好了。
灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。
而绿色(
)则表示Firebug已开启对当前网站进行编辑、调试和监测的功能。
而红色图标(
)表示已开启对当前网站进行编辑、调试和监测的功能,而且检查到当前页面有错误,当前图标表示有5个错误。
2、 开启或关闭Firebug
单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分,上半部分是浏览的页面,下半部分则是Firebug的控制窗口(图2-1)。
如果你不喜欢这样,可以按CTRL+F12或在前面操作后单击右上角的上箭头按钮,弹出一个新窗口作为Firebug的控制窗口。
图2-1
从图2-1中我们可以看到,因为我们开启Firebug的编辑、调试和监测功能,所以目前只有两个可以选择的链接:
“EnableFirebug”与“EnableFirebugforthiswebsite”。
如果你想对所有的网站进行编辑、调试和检测,你可以点击“EnableFirebug”开启Firebug,则以后无论浏览任何网站,Firebug都处于活动状态,随时可以进行编辑、调试和检测。
不过一般的习惯我们只是对自己开发的网站进行编辑、调试和检测,所以我们只单击“EnableFirebugforthiswebsite”开启Firebug就行了。
开启Firebug窗口(图2-2)后,我们可以看到窗口主要有两个区域,一个是功能区,一个是信息区。
选择功能区第二行的不同标签,信息区的显示会有不同,Options的选项也会不同,搜索框的搜索方式也会不同。
图2-2
要关闭Firebug控制窗口单击功能区最右边的关闭图标或按F12键就行了。
如果要关闭Firebug的编辑、调试和监测功能,则需要单击功能区最左边的臭虫图标,打开主菜单,选择“DisableFirebug”或“DisableFirebugforxxxxx”。
3、 Firebug主菜单
单击功能区最左边的臭虫图标可打开主菜单(图3-1),其主要功能描述请看表1。
图3-1
菜单选项
说明
DisableFirebug
关闭/开启Firebug对所有网页的编辑、调试和检测功能
DisableFirebugforxxxxx
关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能
AllowedSites
设置允许编辑、调试和检测的网站
TextSize:
Increasetextsize
增大信息区域显示文本的字号
TextSize:
Decreasetextsize
减少信息区域显示文本的字号
TextSize:
Normaltextsize
信息区域以正常字体显示
Options:
AlwaysOpeninNewWindow
设置Firebug控制窗口永远在新窗口打开
ShowPreviewtooltips
设置是否显示预览提示。
ShadeBoxModel
当前查看状态为HTML,鼠标在HTMLelement标签上移动时,页面会相应在当前标签显示位置显示一个边框表示该标签范围。
这个选项的作用是设置是否用不同颜色背景表示标签范围。
FirebugWebsite..
打开Firebug主页。
Documentation..
打开Firebug文档页。
DiscussionGroup
打开Firebug讨论组。
Contribute
打开捐助Firebug 页面。
表1
4、 控制台(Console)
单击功能区第二栏的“Console”标签可切换到控制台(图4-1)。
控制台的作用是显示各种错误信息(可在Options里定义),显示脚本代码中内嵌的控制台调试信息,通过命令行对脚本进行调试,通过单击Profile对脚本进行性能测试。
控制台分两个区域,一个是信息区,一个是命令行,通过Options菜单的“LargerCommandLine”可改变命令行位置。
图4-1
Options菜单的选项请看表2。
菜单选项
说明
ShowJavaScriptErrors
显示脚本错误。
ShowJavaScriptWarnings
显示脚本警告。
ShowCSSErrors
显示CSS错误。
ShowXMLErrors
显示XML错误。
ShowXMLHttpRequests
显示XMLHttpRequests。
LargerCommandLine
将命令行显示从控制窗口底部移动右边,扩大输入区域。
表2
单击“Clear”按钮可清除控制台的控制信息。
5、 页面源代码查看功能
单击功能区第二栏的“HTML”标签可切换到源代码查看功能(图5-1)。
虽然Firefox也提供了查看页面源代码的功能,但它显示的只是页面文件本身的源代码,通过脚本输出的HTML源码是看不到。
而Firebug则是所见即所得,是最终的源代码。
图5-1
我们来看一个例子,文件源代码如下:
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http:
//www.w3.org/TR/html4/strict.dtd">
简单的例子
#div1{background:
red;width:
100px;height:
100px;}
#div2{background:
blue;width:
100px;height:
100px;margin:
10px;padding:
10px;border:
5pxsolidblack;color:
white;}
#div3{background:
yellow;width:
50px;height:
50px;margin-left:
25px;}
方块一