FireBug使用指南.docx
- 文档编号：8052598
- 上传时间：2023-05-12
- 格式：DOCX
- 页数：93
- 大小：1.35MB
FireBug使用指南.docx
《FireBug使用指南.docx》由会员分享，可在线阅读，更多相关《FireBug使用指南.docx（93页珍藏版）》请在冰点文库上搜索。
FireBug使用指南
Firebug入门指南
作者：
EstelleWeyl
原文网址：
译者：
阮一峰
本文是Firebug的一个概览，并不对它的所有特性进行详尽解释。
不过，本文的内容对一个新手来说，应该是足够了。
目录
一、安装Firebug
二、打开和关闭Firebug
三、Firebug窗口概览
四、随时编辑页面
五、用Firebug处理CSS
六、盒状模型
七、评估下载速度
八、DOM
九、Javascript调试
十、AJAX
十一、附注
一、安装Firebug
Firebug在Firefox浏览器中运行。
另外有一个Firebuglite版本，可以通过javascript调用，包含在页面中，从而在其他非Firefox浏览器中使用。
本文不涉及这个版本。
安装Firebug，请访问Firebug下载页面。
点击该页面右边栏中部巨大的橙黄色按钮即可。
你也可以在Mozilla的FireFoxAdd-ons站点下载它。
安装后只要重新启动FireFox，就可以使用了。
如果你已经安装过了，那么请检查是否更新到了最新版本。
打开Firefox的“Tools”菜单，选择“Add-ons”命令，然后在弹出窗口中点击左下角的“FindUpdates”按钮。
二、打开和关闭Firebug
在Firebug网站上，可以找到它的快捷键设置。
我最常使用以下三种方法：
*打开Firebug：
按F12，或者点击浏览器状态栏右边的
绿色标志。
*关闭Firebug：
按F12，或者点击浏览器状态栏右边的
绿色标志，或者点击Firebug窗口右上角的
红色关闭标志。
*在单独窗口中打开Firebug：
点击firebug窗口右上角的
红色箭头标识，或者使用Ctrl+F12/⌘+F12按钮。
Firebug的相关设置：
*固定Firebug在新窗口打开：
先打开firebug，点击左上角的bug标志，选择options菜单中的“AlwaysOpeninNewWindow”设置。
*增加/缩小字体大小：
先打开firebug，点击左上角的bug标志，选择“TextSize”命令。
每次字体变化的幅度非常小，你可能需要使用多次。
*限制只对某些站点使用Firebug：
先右击浏览器状态上的greencheckmark标志，选择“disableFirebug”命令。
然后，再右击这个已经变灰的标志，选择“AllowedSites...”命令，增加允许Firebug生效的域名。
三、Firebug窗口概览
*Console标签：
主要使用javascript命令行操作，显示javascript错误信息，在底部的>>>提示符后，你可以自己键入javascript命令。
*HTML标签：
显示HTML源码，并且像DOM等级结构那样，每行之前有缩进。
你可以选择显示或不显示某个子节点。
*CSS标签：
浏览所有已经装入的样式表，可以当场对其修改。
在Firebug窗口上部，“edit”命令的旁边，有一个本页面中所有样式表的下拉列表，你可以选择一个样式表进行浏览。
*Script标签：
显示javascript文件及其所在页面。
在Firebug窗口上部，“inspect”命令的旁边，有一个本页面中所有Javascript文件的下拉列表，你可以选择一个进行浏览。
你可以在javascript命令中，设置断点（breakpoint）及其出现的条件。
*DOM标签：
显示所有的页面对象和window物体的属性。
因为在javascript中，所有变量都是window物体的属性，所以Firebug会显示所有变量和它们的值。
*Net标签：
显示本页面涉及的所有下载，以及它们各自花费的时间，各自的HTTP请求头信息和服务器响应的头信息。
XHR标签对AJAX调试很有用。
四、随时编辑页面
在HTML标签中，点击窗口上方的“inspect”命令，然后再选择页面中的文本节点，你可以对其进行修改，修改结果会马上反应在页面中。
Firebug同时是源码浏览器和编辑器。
所有HTML、CSS和Javascript文件中的对象，都可以用单击或双击进行编辑。
当你输入完毕，浏览器中的页面立刻会发生相应变化，你可以得到瞬时反馈。
DOM浏览器允许你对文档结构进行彻底的编辑，不局限于文本节点。
在HTML标签中，点击窗口上部“inspect”命令旁边的“edit”命令，下方的窗口就会立刻变成一个黑白的文本编辑窗口，你可以对HTML源代码进行任意编辑。
在CSS标签中，Firebug会自动补全你的输入。
在DOM标签中，当你按Tab键时，Firebug会自动补全属性名。
五、用Firebug处理CSS
在DOM标签中，每个HTML元素的style属性揭示了该元素的所有CSS设置。
你可以双击对这些设置进行编辑。
对于那些Firefox不支持的CSS规则，Firebug会自动隐藏。
比如，Firebug会隐藏针对某些浏览器的CSS特定设置，以及一些它不支持的CSS3规则。
所以，它会隐藏_height:
25px;（下划线是一个针对IE6的设置）和p:
first-of-type{color:
#ff0000;}（:
first-of-type是一个CSS3规定的伪类，目前只有Safari3支持）。
但是，这也意味着，如果你恰巧发生了打字错误，导致某些规则无法显示，那么你只有使用其他编辑器显示全部CSS内容，找到你的错误。
Firebug允许你关闭CSS中的某些语句，页面会立刻反映相应变化，你可以立刻查看效果。
“关闭”一条语句的方法是，在该语句的左边点击，会出现一个红色的
禁止标志。
该语句就会变灰。
再次点击，该语句就会恢复。
Firebug允许你编辑CSS的属性和属性值。
你只要对它们点击，就能编辑。
修改后的效果会立刻在浏览器窗口中显示出来。
这个特性最好的运用，是在确定准确定位的padding和margin时，firebug允许你用方向键逐单位的增加。
Firebug允许你增加新的属性和属性值。
增加方法是双击现有的selector，然后就会出现一个空白的属性名输入框，完成输入后则会出现一个空白的属性值。
六、盒状模型
当你在HTML标签中，点击一个元素时，左面窗口显示HTML代码，右面窗口显示该元素的CSS。
在CSS窗口上方，有一个layout按钮，点击后会展示与该元素相关的方块模型，包括padding、margin和border的值。
要查看每一个元素的这三项值，只需点击“inspect”按钮，然后用鼠标悬停在页面中该元素的上方。
七、评估下载速度
Net标签中图形化了页面中所有http请求所用的时间。
使用这个功能，必须打开Networkmonitoring，默认设置就是打开，但是你可以在“options”下拉菜单中关闭这个选项。
你可以用这项功能评估javascript文件下载，占用整个页面显示的时间。
在每个HTTP请求的左面点击，会显示该次请求的头信息。
在1.0.5版以后，你可以单独查看HTML文件、CSS文件、图像文件等各自下载的时间。
八、DOM
DOM标签提供页面上所有物体的所有属性的信息。
Firebug最酷的功能之一是，它可以动态修改页面，反映在浏览器窗口，但是如果使用浏览器自带的查看源码功能，你会发现源码并没有改变。
九、Javascript调试
JavaScriptprofiler可以报告你的Javascript函数执行所花的时间，因此你可以查看不同函数对速度的影响。
使用这个功能的方法是，打开console标签，然后点击上面的Profile按钮（上部的按钮顺序是“Inspect|Clear|Profile”）。
Firebug列出调用的所有函数，及其所花的时间。
你可以针对要测试的某个函数，在其前部加上console.profile（[title]），在其后部加上console.profileEnd（）。
console标签的底部是命令行输入，它以“>>>”开头。
如果命令行输入有结果输出，那么它会展示在上部的窗口。
有一个详细的命令行输入API值得看一下。
Firebug内置console对象有几种有用的方法可供调用，包括console.debug、console.info、console.warning、console.error等。
如果这些方法产生了输出结果，Firebug会提供一个链接，让你查看相应的代码。
调试的另一个方法是设置断点。
Script标签允许你在任意行暂停执行。
单击行号，就会设置一个断点。
右击行号，就可以设置一个断点出现的条件，只有当条件为真时，程序才会暂停执行。
右面还有一个watch窗口，可以查看当前变量的值。
十、AJAX
前面已经提到，Firebug可以捕捉页面的动态内容和其他DOM变化。
如果你打开这个示例文件，点击页面上的链接后，在浏览器中查看源码，你会发现什么也没有改变，源码中依然包含那个链接。
但是，如果你在Firebug中查看源码，你会发现DOM已经发生了变化，“HelloWorld”已经被包括在内了。
这就是Firebug的核心功能之一，没有它，AJAX的请求和回应就是不可见的。
有了它，你可以看到送出的和收到的文本，已经相应的头信息。
在Net标签中，你还能监控每个请求/回应各自所花费的时间。
Net标签中的XHR功能，对查看AJAX操作特别有用。
如果你点击每个服务器端回应前的加号，你就会看到服务器端回应的头信息和内容。
当通过XMLHttpRequest对象向服务器端发出一个请求时，Firebug会记录请求的POST或GET内容，以及回应的头信息和内容。
使用Net标签中的XHR功能，就可以看到这些内容。
它会列出所有服务器的回应，以及所花费的时间。
点击前面的+号，如果是GET请求，会显示三个标签；如果是POST请求，会显示4个标签：
Params:
显示请求URL中所包含的name/value对。
Headers:
显示请求和回应的头信息。
Response:
显示实际从服务器收到的信息。
Post：
显示从通过POST请求，送到服务器的信息。
（此项GET请求不包括。
）
这四个标签对编写和调试程序很有用。
检查POST和Params标签，确定你的请求被正确地发出了。
检查Response标签查看返回的格式，确定相应的Javascript处理函数应该如何编写。
十一、附注
*Firebug1.05及以前版本，与Firefox3.0不兼容。
*Firebug的作者JoeHewitt免费提供了这个软件，为了显示我们对他的爱，你可以考虑对他进行捐助。
*Firebug的一些高级应用，请看JoeHewitt的这段演示视频。
（完）
javascript的调试利器：
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">