Firebug简介

一、什么是Firebug ？

    Firebug是firefox下的一个插件,能够调试所有网站语言，可以轻松调试JS代码，可以查看和动态查看、调试网页的css、html代码，也可以查看DOM与网络状态……等等。使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari）。总之就是一整套完整而强大的 WEB 开发工具，最重要的是这货还开源，免费又好用，谁不爱？

二、如何安装？

    接下来我们就以firefox游览器为例，来安装firebug插件。

1、选择附加组件，游览器安装插件的方式都大同小异。

2、在右上方的搜索框内输入firebug,然后在“可用组件”选择安装，因为本机游览器已经装过，所以就会显示“我的附加组件”中。

3、安装好后，关闭游览器重新启动。右上角中会出现个小虫的标识图，这就表示已成功安装。

下拉的同时，还可以设置些基础参数。启动firebug的快件键位F12。

四、如何使用firebug ？

1、控制台

控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。更屌的是它还可以输入命令语句来执行打印日志等作用，类似于js中的alert。

具体console使用详见：http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

2、HTML

一目了然，HTML菜单栏下，左半边是当前网页的html代码，右半部分是对应的css代码。如果你需要调试当前网页，那大可直接双击修改这两个控制面板上的代码，而当前网页也将实时刷新最新样式。这远比你用别的编辑器来调试要轻松的多，不用再频繁的切换与保存。

如果说，当你想迅速找到网页上某一按钮或某一区域的代码的话，你可以用左上角“小虫”图标叛变的箭头，单击它后就可以在网页上选择区域，区域会突出显示边框，对应的html控制面板也会显示出该区域的代码。

3、脚本

要说firebug最好用的还是它的JS调试功能，跟你平常用的编辑器中的debug操作一样，可以打断点，然后再一步一步的操作，查看变量参数……实在是太实用了有没有！

4、网络

网络菜单，这个是来做什么的呢？你点击下就知道了……恩，没错。它就是来查看当前网页的所有网络请求情况。很多的开发这需要分析这个网页它分别发送了什么请求，然后得到了什么响应，以及每个请求所耗时间等等数据，都可以从这里分析得到。

    firebug的强大之处不仅于此，有很多功能还需自己亲自去试用下才知道，我在这里也只是粗略介绍了些基本常用的功能。你可以多试着点击下来调，或者鼠标右击后都能显示出些你意想不到的东西。

五、结语

    也许你知道，也许你懂，但你不一定掌握！慢慢的成长，慢慢的掌握，贵在踏实。天空才是菜鸟的极限，坚持是种精神，分享是种快乐。