FireBug使用指南文档格式.docx

FireBug使用指南文档格式.docx

《FireBug使用指南文档格式.docx》由会员分享，可在线阅读，更多相关《FireBug使用指南文档格式.docx（93页珍藏版）》请在冰点文库上搜索。

*关闭Firebug：

绿色标志，或者点击Firebug窗口右上角的

红色关闭标志。

*在单独窗口中打开Firebug：

点击firebug窗口右上角的

红色箭头标识，或者使用Ctrl+F12/⌘+F12按钮。

Firebug的相关设置：

*固定Firebug在新窗口打开：

先打开firebug，点击左上角的bug标志，选择options菜单中的“AlwaysOpeninNewWindow”设置。

*增加/缩小字体大小：

先打开firebug，点击左上角的bug标志，选择“TextSize”命令。

每次字体变化的幅度非常小，你可能需要使用多次。

*限制只对某些站点使用Firebug：

先右击浏览器状态上的greencheckmark标志，选择“disableFirebug”命令。

然后，再右击这个已经变灰的标志，选择“AllowedSites...”命令，增加允许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会自动补全属性名。

在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标签提供页面上所有物体的所有属性的信息。

Firebug最酷的功能之一是，它可以动态修改页面，反映在浏览器窗口，但是如果使用浏览器自带的查看源码功能，你会发现源码并没有改变。

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窗口，可以查看当前变量的值。

前面已经提到，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

增大信息区域显示文本的字号

Decreasetextsize

减少信息区域显示文本的字号

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"

html>

head>

title>

简单的例子<

/title>

metahttp-equiv="

content-type"

content="

text/html;

charset=utf-8"

style>

#div1{background:

red;

width:

100px;

height:

}

#div2{background:

blue;

margin:

10px;

padding:

border:

5pxsolidblack;

color:

white;

#div3{background:

yellow;

50px;

margin-left:

/style>

/head>

bodyscroll="

no"

divid="

div1"

方块一<

/div>

div2"

方块二<

script>

document.getElementById（'

div1'

）.innerHTML+='

div3"

方块三<

'

;

/script>

/body>

/html>

在例子中我们通过JavaScript在“div1”中加入了“div3”，在Firefox中查看源代码你是看不到“div1”中包含有代码“<

”的，但是Firebug中我们是可以看见的（图5-2选中部分）。

图5-2

从图5-1中我们可以看到，信息区被分成了两个部分，左边是显示源代码，右边是一个功能区，可以从这里查看到HTMLElement中的CSS定义、布局情况和DOM结构。

从图5-2中我们可以看到，源代码按DOM结构分层次显示的，通过层次折叠功能，我们就可以很方便分析代码。

在功能区的第一行还根据你的选择，清晰的按子、父、根列出了当前源代码的层次（图5-2红色部分），单击各部分，则会即刻转到该部分的源代码。

图5-3

在源代码上移动鼠标，页面就会出现一个半透明的方块，指示当前鼠标所指源代码的显示区域，当选择。

在图5-4中，鼠标正指向“div1”，而在页面中“div1”的显示区域上被一个半透明的方块遮盖了。

图5-4

如果你把“Inspect”按钮按下，功能正好相反，在页面中移动鼠标，则当前显示区域的源代码会被加亮显示出来。

在图5-5中，我们可以看到鼠标指针正指向“方块二”，而在源代码中可以看到，“方块二”的源代码“<

”已被加亮显示（红色部分）。

如果你单击某个显示区域，则该区域的源代码会被选中。

图5-5

是不是很方便？

方便是方便，但是我的源代码很多，而且有些区域在页面中不方便鼠标指定，怎么办？

没关系，我们还有一个厉害武器，搜索功能。

譬如我们知道某个HTMLElement的ID是“div2”，但在层层叠叠的源代码中不好找，在页面中鼠标也很难找到，那我们就在功能区的搜索框中输入“div2”，再看看源代码区域，“div2”被加亮显示出来了（图5-6红色部分）。

在这个简单的例子可能看不出很好的效果，大家可以尝试一下把“div1”先折叠起来，然后在搜索框输入“div3”，你可以看到“div1”会自动展开，并将“div3”加亮显示，如果还觉得不够理想，可以找一个源代码比较多的例子测试一下。

图5-6

除了通过按下“Inspect”按钮，单击显示区域选择源代码，我们还可以通过单击源代码中的HTML标记（开始或结束标记都可以）来选择。

我们尝试一下把鼠标移动到HTML标记，会发现鼠标指针变成了手的形状，这说明我们可以通过单击选择该源代码。

选择源代码后，我们就可以通过右边的功能区查看、编辑和调试它的CSS定义和盒子模型（CSS盒子模型请参阅相关说明，这里就不再赘述了），还有一个很好的功能就是当外部编辑器修改了源代码（没有删除该源代码，只是修改），我们在浏览器重新加载页面后，选择的源代码不会改变，我们可以很方便的观察源代码的变化与效果。

有没有经常为调试某个页面效果在源代码编辑器和浏览器之间切换，一次又一次的刷新而感到懊恼？

有了Firebug你就不用再懊恼了。

你可以直接在源代码中进行编辑，然后查看效果。

如果只是修改已经存在的属性，例如要修改“div2”的内部文本，则直接将鼠标移动到文本上面，等鼠标指针换成“I”，单击即可进行编辑了。

其它已存在的属性和属性值也可以这样直接进行编辑。

如果要为某Element添加属性，请将鼠标移动到该Element上，等光标变为“I”的时候，单击鼠标右键，从菜单中选择“NewAttribute..”，在显示的编辑框中输入你要添加的属性名称就可以了。

图5-7

图5-8

我们尝试一下为“div2”增加一个“onclick”属性，单击的结果是将“div2”的显示文本修改为“单击”。

把光标移动到“div2”上，然后单击鼠标右键，选择“NewAttribute..”（图5-7），在编辑框中输入“onclick”，最后按一下回车键（图5-8），出现属性值输入框后，输入“this.innerHTML=’单击’”，回车后我们可以继续添加下一个属性，这次测试不需要，所以按ESC结束我们的输入。

我们来检验一下修改结果，单击页面“div2”的区域（图5-9），“div