Firebug控制台鲜为人知的几种用法

一直以来,由于缺乏规范的调试环境和强大的开发平台。在HTML、CSS和JavaScript等技术上,人们要所投入大量的时间和精力进行枯燥的测试。然而,Firebug的出现极大地节约了Web开发者的开发时间。尤其是其JavaScript控制台(Console)让开发者手中的HTML页面活了起来。

我们平时接触最多的,就是console.log、console.info和console.error了:无论是直接输出JavaScript的运行结果,还是和ActionScript配合进行HTML中的ActionScript-JavaScript连调,这些方法都十分好用。只需要一个简单的console.log(someVariable);或者在ActionScript中一行com.flash.external.ExternalInterface.call("console.log",someVariable);就能看到变量(表达式)的结果。

然而,Console其实还提供许多强大的API接口。许多朋友似乎还不知道。下面就分享几个我所知道的,欢迎补充。

console.dir(anyObject) – 直接输出对象的结构,范例如图:

console.dirxml(anyDOMNode) – 类似上例,按缩进格式输出一段HTML结点的内容,如图:

console.time(slugName) – console.timeEnd(slugName) – 记录某一个时间戳的执行时间,可用于优化循环语句,如图:

console.group() – console.groupEnd() – 分组输出内容,看图就明白了:

Firebug 1.2正式版“低调”发布

Firebug一直是我最喜欢的调试工具。我可以肯定,DOM Inspector、Console和Net面板的出现节约了许多Web开发者数年的生命。

不过,Firebug这样一款受人欢迎的扩展应用,自己也老闹一些“毛病”,比如,前段时间连主站域名getfirebug.com都被“劫持”了,时间长达几周……

今天又发现官方首页的blog打不开了,我之前没怎么看过这个blog,Google PR为0可以看出,这个blog估计页面也是长期“罢工”了:

不过,这些“瑕疵”都无所谓,Firebug本身正在不断的更新。今天,发现Firebug 1.2也如期在Mozilla发布了。John Barton在Firebug的Group说过周一(北京时间周二)会发布这个版本。

1.2版在JavaScript调试和操作界面上都比1.0有了极大的进步。正式版更是比beta更加稳定、可靠。赶紧下载吧:https://addons.mozilla.org/en-US/firefox/addon/1843

请升级到Firefox 3.01和Firebug1.20b6

Firefox3.01似乎是刚刚发布的。

  • 修正了一些安全漏洞.
  • 更加稳定
  • 修正了反间谍数据库初次启动不更新的问题
  • 更新了内部顶级域名后缀列表
  • 更多见此(遗憾的是,我们看到Adobe Flash仍然是一个bug制造户,可以看看这篇文章我提到的一些)

此外,Firebug已经升级到1.2Beta6(Firefox3才可使用),据我个人观察,修正了许多奇怪的Bug,例如HTML Inspector失效(直接导致我的www.awflasher.com/blog/主题TES晚发布了几周)、无法编辑具体DOM,以及net监控丢包,等等。另外,个人感觉速度更快了。

因此,请不要犹豫,立即升级你的Firebug!

Firebug 1.2的替代下载地址以及一些更新简介

最近,getfirebug.com这个域名DNS出了问题。

起初,我以为是我这糟糕的网通ADSL出了问题,后来,我又以为是这个Firebug被GFW了,我还怀疑为了闹孕肺的胜利召开,要让所有国内的Web Developer都放假休息休息呢。用美国的主机ping了之后才发现这个倒霉的Firebug确实出问题了。

现在,大量的Web Developer开始升级到Firefox3,原先的Firebug由于版本的问题,很可能已经不兼容了。而网站又上不去,实在是郁闷。不过我在Google的Firebug Group里面找到了一个下载1.2的地址,分享如下:

npire.de/firebug(这个页面难道是国内垃圾站高手做的?广告真多)

如果你知道如何封装xpi(就是打个包,改个名儿。。。),用这个吧:http://fbug.googlecode.com/svn/branches/firebug1.2/

我在Firefox3下面已经安装了。小图标变成了一个小昆虫……

注意,看到了传说中牛逼的FBTrace,太强大了。注意,这个配置有点麻烦,你得先安装一个叫做“trace-console”的插件,在这里(这篇文章最下面的一个链接)。

FBTrace:

把Firebug的native console hook过去一个GUI?这是否意味着开发插件今后也基于Firebug了:)