firebug1.7调试实用技巧指南

武器档案

• 名称：firebug

• 最新版本：1.7

• 用途：前端调试器

• 必备指数：

• 使用难度：

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详细信息界面。

明河结语

先写到这里，firebug还有其他技巧，日后补上，欢迎前端朋友补充，感激不尽。