Mikel
.
武器档案
- 名称：firebug
- 最新版本：1.7
- 用途：前端调试器
- 必备指数：
- 使用难度：
firebug是前端最具盛名的调试器，功能非常强悍。firebug1.7正式版现在已经发布了，完美兼容firefox4.0（无法兼容 firefox4.0以下的版本），由于firebug非常易用，这里明河不一一介绍firebug的功能，只给大家介绍一些firebug的实用技巧， 有些技巧是firebug1.7才有的，有些是通用的。
1.使用“Debugger”关键字快速断点调试
正常如果我们想Debugger下js代码，先进入“脚本”面板，然后找到要调试的js文件，最后在你需要调试的行，打上断点，最后刷新页面，如下图：
有没有更快速的断点方式呢？那就是使用“debugger”关键字快速断点调试，接着往下看。
在你要调试的代码行前面，加一行”debugger;”，比如下面的
- debugger;
- if(steps.length == 0) returnfalse;
- 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详细信息界面。
明河结语
先写到这里，firebug还有其他技巧，日后补上，欢迎前端朋友补充，感激不尽。
