如果你在WEB开发过程中还没听说过firebug,那么恭喜您,你今天真是走运,将得到一个宝贝了.  好,直入主题.

什么是firebug?
Firebug是网页浏览器Mozilla Firefox的一个扩展，是一个完美的WEB调试工具,它就像一只页面显微镜,用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM、与 JavaScript 代码。Firebug是哈维（Joe Hewitt）与 Rob Campbell撰写的。Joe Hewit是原始 Firefox 创作者之一。

获得firebug
先得有一个Firefox,简称FF(什么,你没有firefox??下载最新版),
打开FF,菜单->工具->附加组件->获取附加组件,输入firebug,回车,同意自动安装,重启Firefox,OK.
如果觉得上面还是麻烦的话,可以直接在这里下载.

firebug - 小家碧玉 - 界面由上到下,由左而右功能学习步步为营:

打开FF,打开令你有偷窥欲的网站后,按F12或点击FF右下角的昆虫firebug标志.
查看(Inspect):
看到网页上哪个效果,哪幅图片是喜欢的,很好,先点击查看(Inspect)按钮,再把鼠标移到网页上,此时页面上各个HTML元素的大小就出来了,这对于观察页面产生的HTML元素是否符合理想是非常好的,当确定要观察的元素后,再点击鼠标,很好,顺利的进入了第二步!

查看DOM元素属性

利用firebug动态查看元素属性是一件很颇有收获的事,因为结点所有属性和值一览无余,慢慢解剖,很多平时看书都不理解的意思,学不到的知识都可在这里找到,相信一番观察后,对浏览器底层处理HTML元素机制更加了解了.

假如在运行了一段JS中,查看某个DOM结点元素的属性值动态的变化,如width, height, offsetHeight, offsetWidth, scrollTop, scrollLeft这些,在事情不明朗的情况下,对于问题的查找与解决起到重要的促进作用.

添加,编辑DOM元素属性

有时在开发时忘记添加元素的某个属生,如class, width, src等,可不用重新编译或刷新网页,直接在firebug上改,直接满意为止,如上图,选中属性后点击右键,选择添加或编辑属性,直接在文本框编辑,可按TAB键切换到下一个编辑位置,firebug会自动更新页面视图,十分方便.如果想改变该结点的HTML内容,添加或减少里面的一些结点,可右击选择编辑HTML,在编辑时firebug也是即时更新页面的,随时可看到效果,改好就点击上面的编辑(Edit)按钮返回.

复制单个元素HTML,innerHTML

对着DOM结点选择复制HTML,innerHTML,这个功能挺有用,可以复制查看元素的HTML下来慢慢研究,并作为HTML模板加以利用.

查看，编辑，禁用CSS属性

点击HTML标签，在右边出现应用到该元素的所有CSS样式，并显示CSS样式的层次和优先级关系，被覆盖的样式会直线划掉,由上到下,看到元素哪个不顺眼的CSS属性就可禁用它，或在上面直接修改,或删除,并即时就能看到效果.充分利用这功能,可以调试,优化页面CSS,直至最佳方案.

查看元素布局

选择右边出现布局标签,可清楚看到元素基于W3C盒模型的边框图,鼠标放到上面,在页面上元素周围就有标尺显示,精确定位.
值得注意的是,IE与W3C对盒模型的解释不一致,具体可查看www.shuihan.com.

JavaScript调试

能在其它IDE上找到的代码调试方法,firebug几乎都有,功能强大而齐全.
查看页面上所有的JavaScrip源代码,包括动态eval执行的
一些网站出于某种原因,不希望给别人看到源代码,使用了屏蔽方法,但这在firebug下并没有用,firebug能把JS代码一点不漏的挖出来,
选择左边的脚本标签,上面就出现了页面的所有JavaScript源文件,选择文件既可查看.
断点调试JavaScript
如果没玩过代码调试的,那就得试试,在firebug下调试代码非常简单,打开JS源代码,在要断点的行号旁点击一下鼠标,再刷新一下页面即可,如果代码有运行到该行的,就会在此行暂停执行,并可查看各个变量值(并可即时更改),方法调用栈信息等等.
JavaScript控制台

如果你还是用alert来调试JavaScript的话,那么就有必要考虑换换方法了,firebug自带了控制台,支持日志,消息,对象的格式化输出.
console.log(object[, object, ...])
在控制台输出一条消息.如果有多个参数,输出时会用空格隔开这些参数.
例如:console.log(”The”, animal, “jumped over”, count, “tall buildings”);
console.log(”I am %s and I have:”, myName, thing1, thing2, thing3);
如果参数是一个Javascript对象，那么在控制台输出的就不是静态文字，而是一个可交互的超链接，点击超链接可以查看该对象的HTML, CSS.
console.debug(object[, object, ...]);
在控制台输出一条消息,和log一样.
console.warn(object[, object, ...]);
在控制台输出一条带有“警告”图标的消息和一个指向代码调用位置的超链接.
console.error(object[, object, ...]);
在控制台输出一条带有“错误”图标的消息和一个指向代码调用位置的超链接.
console.assert(expression[, object, ...]);
测试表达式expression是否为真.如果不是真,会在控制台写一条消息并抛出异常.
onsole.dir(object);
以列表形式输出一个对象的所有属性,有点和你查看DOM窗口相类似.
console.dirxml(node)
输出一个HTML或者XML元素的XML源代码.和你在HTML窗口看到的相似.
console.trace();
输出当前函数调用栈信息.
console.group(object[, object, ...]);
输出一条消息,并打开一个嵌套块,块中的内容都会缩进.调用console.groupEnd()关闭块,该命令可以嵌套使用.
console.groupEnd();
关闭最近一个由console.group打开的块.
console.time(name);
创建一个名字为name的计时器，调用console.timeEnd(name)停止计时器并输出所耗时间(毫秒).
console.timeEnd(name);
停止同名的计时器并输出所耗时间(毫秒).
console.profile([title]);
打开Javascript性能测试开关.可选参数title会在打印性能测试报告时在报告的开头输出.
console.profileEnd();
关闭Javascript性能测试开关并输出报告.
console.count([title]);
输出当前行调用次数.

在非Firefox浏览器下调用控制台
当在非firfox浏览器下,例如IE,没有console这对象时,显然就会出错了,如果删除调试代码又麻烦,这里有个方法,可以保留调试代码并在没有控制台的浏览器上顺利执行,如果不存在否忽略.

• 相关函数:extendIf

if(!window.console){
  window.console = {};
}
//空调用
function fGo(){}
extendIf(window.console, 
      {debug : fGo,
        info : fGo,
        trace : fGo,
        log    : fGo,
        warn  : fGo,
        error  :fGo,
        assert:fGo,
        dir:fGo,
        count:fGo,
        group:fGo,
        groupEnd:fGo,
        time:fGo,
        timeEnd:fGo
       }
);

用了firebug后,是不是觉得JavaScript开发WEB应用并不是想像中的那么麻烦?^-^