firebug是前端最具盛名的调试器,功能非常强悍。firebug1.7正式版现在已经发布了,完美兼容firefox4.0(无法兼容 firefox4.0以下的版本),由于firebug非常易用,这里明河不一一介绍firebug的功能,只给大家介绍一些firebug的实用技巧, 有些技巧是firebug1.7才有的,有些是通用的。

1.使用“debugger”关键字快速断点调试

正常如果我们想debugger下js代码,先进入“脚本”面板,然后找到要调试的js文件,最后在你需要调试的行,打上断点,最后刷新页面,如下图:


有没有更快速的断点方式呢?那就是使用“debugger”关键字快速断点调试,接着往下看。

在你要调试的代码行前面,加一行”debugger;”,比如下面的

  1. debugger;
  2. if(steps.length == 0) return false;
  3. self.isRender = true;

然后刷新下页面,如下图:


断到点了!是不是很方便,你无须再切换到脚本,再花心思找对应的调试脚本,这里我们只需要加个debugger;即可,放心,脚本不会报错,当然你正式发布脚本的时候,务必把debugger;关键字去掉哦。

2.快速定位指定行的代码

比如我要快速定位到第122行的代码,你可以如下操作。

在搜索框上输入“#122”,就可以找到指定行的代码了!

3.只显示起作用的css属性

firebug1.7是默认开启的,如下图:

当勾选第一项“Only Show Applied Style”时,只显示起作用的样式,如果我们把这项去掉,看下效果。


被覆盖,不起作用的css属性就会出现了。

4.如何查看hover的css属性

加了hover属性的容器,鼠标滑过,在HTML面板右侧会出现hover属性,但你移开就没有了,如果你希望在面板中保留hover属性,看下面:


勾选最后一项hover即可。

5.如何理解脚本面板中的“堆栈”

堆栈,可以理解为执行顺序总揽,“监控”起到微观作用,让我们知道变量的赋值情况,而监控起到宏观作用,让我们知道,脚本的运行流程。

是不是用的很少?其实堆栈信息已经第一时间出现在面板了,只是很少人留意,截个图给大家瞧瞧:


高亮部分就是堆栈信息!

6.循环体内的特例调试

调试循环体,有个很杯具的地方,在循环内部打个断点,循环20次,会触发20次断点……这很愁人,影响调试效率,其实我们只需要调试循环第2次的情况。


右击断点处,会出现一个蓝色的弹出层,让你输入监控表达式,这时候输入i == 2,再按“F8”,你就会发现直接跳到第二次循环了。

(图截不下来,无法奉上图片见谅。)

7.以独立窗口的形式打开firebug

1.7firebug的面板可以变成独立窗口了,快捷键:“ctrl+F12”,也可以点击如下图的位置。

8.向控制台输出日记消息

在你的代码上输出个“36ria.com”,如下:


  1. console.log('36ria.com');
  2. console.error('36ria.com');


使用console.log的效率,个人觉得还是比原始的alert()来的高的,关键是console.log()不会中断程序执行。

9.利用命名行工具,快速定位对象


step1这个对象,是KISSY.Step()的实例,明河想要知道这个对象内部的赋值情况,只要在命令行上键入”step1″,就会在控制台上出现相关信息,然后我再点击该信息,就进入了DOM详细信息界面。