对于大部分开发者来说，chrome和firefox用的是最多的。其中chrome应该占大多数，因为它的功能确实很好，其中包括它的控制台。

其实很多人在调试代码的过程中都是除了alert就是console，当这两种方法都不能解决问题的时候就迷茫了。还不如来断点调试，好像很多人不知道，我也不知道为啥。。。下面以chrome为例

一、格式化压缩代码

F12打开resources面板

二、快速跳转到某断点的位置

右侧的Breakpoints会汇总你在JS文件所有打过的断点，点击跟checkbox同一行的会暂时取消这个断点，若是点击checkbox下一行的会直接跳转到该断点的位置

三、查看断点内部的作用范围【很实用】

右侧的scope可以看到相当多实用的信息，比如this的指向，是否有值，断点是对象还是其他等。。

四、监听事件断点

右侧的Event Listener Breakpoints可以选择性的监听某类行为事件，比如键盘输入，拖拉等。。勾选前面的checkbox就可以生效，当你触发改行为的时候就会跳转到触发的JS

五、DOM及 XHR监听跳转

DOM Breakpoints : 是你Elements页，感觉要监听某段dom的可能有一些行为，但是又不具体知道确切位置就可以用了

六、单步执行、单步进入、强制进入、单步退出

这个东东是调试中必不可少的，其实用过firebug的小伙伴，对这个就有一个清晰的认识你。基本一样；先上图；