firebug是前端最具盛名的调试器,功能非常强悍。firebug1.7正式版现在已经发布了,完美兼容firefox4.0(无法兼容 firefox4.0以下的版本),由于firebug非常易用,这里明河不一一介绍firebug的功能,只给大家介绍一些firebug的实用技巧, 有些技巧是firebug1.7才有的,有些是通用的。
1.使用“debugger”关键字快速断点调试
正常如果我们想debugger下js代码,先进入“脚本”面板,然后找到要调试的js文件,最后在你需要调试的行,打上断点,最后刷新页面,如下图:
有没有更快速的断点方式呢?那就是使用“debugger”关键字快速断点调试,接着往下看。
在你要调试的代码行前面,加一行”debugger;”,比如下面的
- debugger;
- if(steps.length == 0) return false;
- 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”,如下:
- console.log('36ria.com');
- console.error('36ria.com');
使用console.log的效率,个人觉得还是比原始的alert()来的高的,关键是console.log()不会中断程序执行。
9.利用命名行工具,快速定位对象
step1这个对象,是KISSY.Step()的实例,明河想要知道这个对象内部的赋值情况,只要在命令行上键入”step1″,就会在控制台上出现相关信息,然后我再点击该信息,就进入了DOM详细信息界面。