JS firebug小技巧

实际上前端的发展与进步也离不开浏览器的支持，而对于开发者来讲，浏览器最好的支持，就是对于debug的良好支持，甚至在某些兴许接手的项目中，前端的debug甚至能够解决好多问题……不说了，都是泪啊！还是说下firefox下的firebug吧。尽管ff内置一个调试的功能，可是，感觉不完好，对于开发者来讲，根本不够用，于是ff下还是推荐firebug，老牌的前端debug工具，好用！而IE、Chrome都有非常不错的工具支持，基本够用，可是用惯了ff的我，还是坚挺在firebug下。

1、使用“debugger”keyword高速断点调试

正常假设我们想debugger下js代码，先进入“脚本”面板，然后找到要调试的js文件，最后在你须要调试的行，打上断点，最后刷新页面，例如以下图：

有没有更高速的断点方式呢？那就是使用“debugger”keyword高速断点调试，接着往下看。

在你要调试的代码行前面，加一行”debugger;”，

然后刷新下页面。断到点了！是不是非常方便，你无须再切换到脚本，再花心思找相应的调试脚本，这里我们仅仅须要加个debugger;就可以，放心，脚本不会报错，当然你正式公布脚本的时候，务必把debugger;keyword去掉哦。

2、高速定位指定行的代码

比方我要高速定位到第122行的代码，你能够例如以下操作。

在搜索框上输入“#122”，就能够找到指定行的代码了！在我所使用的firebug1.12.8中，右上角的搜索栏有灰色的文字描写叙述说明哦。

3、仅仅显示起作用的css属性

这功能说实话，怎么说呢，有时候看起来不那么痛苦吧！

要不然右側一堆删除号，感觉有点乱。

当勾选第一项“仅显示应用的样式”时，仅仅显示起作用的样式，未起作用的样式会被忽略掉，不再显示的（对于debug这个选项各有利弊，看个人情况）。



4、怎样查看hover的css属性

加了hover属性的容器，鼠标滑过，在HTML面板右側会出现hover属性，但你移开就没有了，假设你希望在面板中保留hover属性，看下图：

选中“:hover”就可以。

5、循环体内的特例调试

调试循环体，有个非常杯具的地方，在循环内部打个断点，循环20次，会触发20次断点……这非常愁人，影响调试效率，事实上我们仅仅须要调试循环第2次的情况。

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

6、向控制台输出日记消息

在你的代码上输出个“36ria.com”，例如以下：

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

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

使用console.log的效率，个人认为还是比原始的alert()来的高的，关键是console.log()不会中断程序运行。



7、利用命名行工具，高速定位对象

个人感觉这是最实用的功能之中的一个。好多时候，通过这东西，立刻就能看到想看的内容。

直接在命令行输入某个变量的变量名，能够在控制台看到当中具体的信息。