firebug怎么使用?

一、安装Firebug

Firebug在Firefox浏览器中运行。另外有一个Firebuglite版本，可以通过javascript调用，包含在页面中，从而在其他非Firefox浏览器中使用。本文不涉及这个版本。

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

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

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

Console标签：主要使用javascript命令行操作，显示javascript错误信息，在底部的>>>提示符后，你可以自己键入javascript命令。

HTML标签：显示HTML源码，并且像DOM等级结构那样，每行之前有缩进。你可以选择显示或不显示某个子节点。

CSS标签：浏览所有已经装入的样式表，可以当场对其修改。在Firebug窗口上部，edit命令的旁边，有一个本页面中所有样式表的下拉列表，你可以选择一个样式表进行浏览。

在HTML标签中，点击窗口上方的inspect命令，然后再选择页面中的文本节点，你可以对其进行修改，修改结果会马上反应在页面中。

在DOM标签中，每个HTML元素的style属性揭示了该元素的所有CSS设置。你可以双击对这些设置进行编辑。

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

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

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

前面已经提到，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处理函数应该如何编写。