fireBug使用指南

听说，对于网页开发人员来讲，Firebug是Firefox浏览器中最好的插件之一。

我最近就在学习怎么使用Firebug，网上找到一篇针对初学者的教程，感受比较有用，就翻译了出来。

=================

Firebug入门指南

做者：Estelle Weyl

原文网址：http://www.evotech.net/blog/2007/06/introduction-to-firebug/

译者：阮一峰

本文是Firebug的一个概览，并不对它的全部特性进行详尽解释。不过，本文的内容对一个新手来讲，应该是足够了。

目录

1、安装Firebug
2、打开和关闭Firebug
3、Firebug窗口概览
4、随时编辑页面
5、用Firebug处理CSS
6、盒状模型
7、评估下载速度
8、DOM
9、Javascript调试
10、AJAX
11、附注

1、安装Firebug

Firebug在Firefox浏览器中运行。另外有一个Firebug lite版本，能够经过javascript调用，包含在页面中，从而在其余非Firefox浏览器中使用。本文不涉及这个版本。

安装Firebug，请访问Firebug下载页面。点击该页面右边栏中部巨大的橙黄色按钮便可。你也能够在Mozilla的FireFox Add-ons站点下载它。安装后只要从新启动FireFox，就可使用了。

若是你已经安装过了，那么请检查是否更新到了最新版本。打开Firefox的"Tools"菜单，选择"Add-ons"命令，而后在弹出窗口中点击左下角的"Find Updates"按钮。

2、打开和关闭Firebug

在Firebug网站上，能够找到它的快捷键设置。我最常使用如下三种方法：

* 打开Firebug：按F12，或者点击浏览器状态栏右边的绿色标志。

* 关闭Firebug：按F12，或者点击浏览器状态栏右边的绿色标志，或者点击Firebug窗口右上角的红色关闭标志。

* 在单独窗口中打开Firebug：点击firebug窗口右上角的红色箭头标识，或者使用Ctrl+F12/⌘+F12按钮。

Firebug的相关设置：

* 固定Firebug在新窗口打开：先打开firebug，点击左上角的bug标志，选择options菜单中的"Always Open in New Window"设置。

* 增长/缩小字体大小：先打开firebug，点击左上角的bug标志，选择"Text Size"命令。每次字体变化的幅度很是小，你可能须要使用屡次。

* 限制只对某些站点使用Firebug：先右击浏览器状态上的green check mark标志，选择"disable Firebug"命令。而后，再右击这个已经变灰的标志，选择"Allowed Sites..."命令，增长容许Firebug生效的域名。

3、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调试颇有用。

4、随时编辑页面

在HTML标签中，点击窗口上方的"inspect"命令，而后再选择页面中的文本节点，你能够对其进行修改，修改结果会立刻反应在页面中。

Firebug同时是源码浏览器和编辑器。全部HTML、CSS和Javascript文件中的对象，均可以用单击或双击进行编辑。当你输入完毕，浏览器中的页面马上会发生相应变化，你能够获得瞬时反馈。DOM浏览器容许你对文档结构进行完全的编辑，不局限于文本节点。在HTML标签中，点击窗口上部"inspect"命令旁边的"edit"命令，下方的窗口就会马上变成一个黑白的文本编辑窗口，你能够对HTML源代码进行任意编辑。在CSS标签中，Firebug会自动补全你的输入。在DOM标签中，当你按Tab键时，Firebug会自动补全属性名。

5、用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规定的伪类，目前只有Safari 3支持）。可是，这也意味着，若是你恰巧发生了打字错误，致使某些规则没法显示，那么你只有使用其余编辑器显示所有CSS内容，找到你的错误。

Firebug容许你关闭CSS中的某些语句，页面会马上反映相应变化，你能够马上查看效果。"关闭"一条语句的方法是，在该语句的左边点击，会出现一个红色的禁止标志。该语句就会变灰。再次点击，该语句就会恢复。

Firebug容许你编辑CSS的属性和属性值。你只要对它们点击，就能编辑。修改后的效果会马上在浏览器窗口中显示出来。这个特性最好的运用，是在肯定准肯定位的padding和margin时，firebug容许你用方向键逐单位的增长。

Firebug容许你增长新的属性和属性值。增长方法是双击现有的selector，而后就会出现一个空白的属性名输入框，完成输入后则会出现一个空白的属性值。

6、盒状模型

当你在HTML标签中，点击一个元素时，左面窗口显示HTML代码，右面窗口显示该元素的CSS。在CSS窗口上方，有一个layout按钮，点击后会展现与该元素相关的方块模型，包括padding、margin和border的值。要查看每个元素的这三项值，只需点击"inspect"按钮，而后用鼠标悬停在页面中该元素的上方。

7、评估下载速度

Net标签中图形化了页面中全部http请求所用的时间。使用这个功能，必须打开Network monitoring，默认设置就是打开，可是你能够在"options"下拉菜单中关闭这个选项。你能够用这项功能评估javascript文件下载，占用整个页面显示的时间。

在每一个HTTP请求的左面点击，会显示该次请求的头信息。

在1.0.5版之后，你能够单独查看HTML文件、CSS文件、图像文件等各自下载的时间。

8、DOM

DOM标签提供页面上全部物体的全部属性的信息。Firebug最酷的功能之一是，它能够动态修改页面，反映在浏览器窗口，可是若是使用浏览器自带的查看源码功能，你会发现源码并无改变。

9、Javascript调试

JavaScript profiler能够报告你的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窗口，能够查看当前变量的值。

10、AJAX

前面已经提到，Firebug能够捕捉页面的动态内容和其余DOM变化。若是你打开这个示例文件，点击页面上的连接后，在浏览器中查看源码，你会发现什么也没有改变，源码中依然包含那个连接。可是，若是你在Firebug中查看源码，你会发现DOM已经发生了变化，"Hello World"已经被包括在内了。这就是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处理函数应该如何编写。

 

---

 

 

 

控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要做用是显示网页加载过程当中产生各种信息。

1、显示信息的命令

Firebug内置一个console对象，提供5种方法，用来显示信息。

最简单的方法是console.log()，能够用来取代alert()或document.write()。好比，在网页脚本中使用console.log("Hello World")，加载时控制台就会自动显示以下内容。

另外，根据信息的不一样性质，console对象还有4种显示信息的方法，分别是通常信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

好比，在网页脚本中插入下面四行：

　　console.info("这是info");

　　console.debug("这是debug");

　　console.warn("这是warn");

　　console.error("这是error");

加载时，控制台会显示以下内容。

能够看到，不一样性质的信息前面有不一样的图标，而且每条信息后面都有超级连接，点击后跳转到网页源码的相应行。

2、占位符

console对象的上面5种方法，均可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

好比，

　　console.log("%d年%d月%d日",2011,3,26);

　　console.log("圆周率是%f",3.1415926);

%o占位符，能够用来查看一个对象内部状况。好比，有这样一个对象：

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黄色";

而后，对它使用o%占位符。

　　console.log("%o",dog);

3、分组显示

若是信息太多，能够分组显示，用到的方法是console.group()和console.groupEnd()。

　　console.group("第一组信息");

　　　　console.log("第一组第一条");

　　　　console.log("第一组第二条");

　　console.groupEnd();

　　console.group("第二组信息");

　　　　console.log("第二组第一条");

　　　　console.log("第二组第二条");

　　console.groupEnd();

点击组标题，该组信息会折叠或展开。

4、console.dir()

console.dir()能够显示一个对象全部的属性和方法。

好比，如今为第二节的dog对象，添加一个bark()方法。

　　dog.bark = function(){alert("汪汪汪");};

而后，显示该对象的内容，

　　console.dir(dog);

5、console.dirxml()

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

好比，先获取一个表格节点，

　　var table = document.getElementById("table1");

而后，显示该节点包含的代码。

　　console.dirxml(table);

6、console.assert()

console.assert()用来判断一个表达式或变量是否为真。若是结果为否，则在控制台输出一条相应信息，而且抛出一个异常。

好比，下面两个判断的结果都为否。

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

7、console.trace()

console.trace()用来追踪函数的调用轨迹。

好比，有一个加法器函数。

　　function add(a,b){

　　　　return a+b;

　　}

我想知道这个函数是如何被调用的，在其中加入console.trace()方法就能够了。

　　function add(a,b){

　　　　console.trace();

　　　　return a+b;

　　}

假定这个函数的调用代码以下：

　　var x = add3(1,1);

　　function add3(a,b){return add2(a,b);}

　　function add2(a,b){return add1(a,b);}

　　function add1(a,b){return add(a,b);}

运行后，会显示add()的调用轨迹，从上到下依次为add()、add1()、add2()、add3()。

8、计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

　　console.time("计时器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("计时器一");

9、性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

假定有一个函数Foo()，里面调用了另外两个函数funcA()和funcB()，其中funcA()调用10次，funcB()调用1次。

　　function Foo(){

　　　　for(var i=0;i<10;i++){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

　　　　for(var i=0;i<count;i++){}

　　}

　　function funcB(count){

　　　　for(var i=0;i<count;i++){}

　　}

而后，就能够分析Foo()的运行性能了。

　　console.profile('性能分析器一');

　　Foo();

　　console.profileEnd();

控制台会显示一张性能分析表，以下图。

标题栏提示，一共运行了12个函数，共耗时2.656毫秒。其中funcA()运行10次，耗时1.391毫秒，最短运行时间0.123毫秒，最长0.284毫秒，平均0.139毫秒；funcB()运行1次，耗时1.229ms毫秒。

除了使用console.profile()方法，firebug还提供了一个"概况"（Profiler）按钮。第一次点击该按钮，"性能分析" 开始，你能够对网页进行某种操做（好比ajax操做），而后第二次点击该按钮，"性能分析"结束，该操做引起的全部运算就会进行性能分析。

10、属性菜单

控制台面板的名称后面，有一个倒三角，点击后会显示属性菜单。

默认状况下，控制台只显示Javascript错误。若是选中Javascript警告、CSS错误、XML错误都送上，则相关的提示信息都会显示。

这里比较有用的是"显示XMLHttpRequests"，也就是显示ajax请求。选中之后，网页的全部ajax请求，都会在控制台面板显示出来。

好比，点击一个YUI示例，控制台就会告诉咱们，它用ajax方式发出了一个GET请求，http请求和响应的头信息和内容主体，也均可以看到。