前端工作中，不仅编码很重要，重现bug，解决bug的能力同样重要。而这些都离不开代码调试。现就一些调试技巧做出总结。
- 1 alert() 方法。
用法：在你觉得有问题的代码处，加上一句alert(xxx)，就好了。
适用场景：任何时候。 - 2 console.log()
用法：在你觉得有问题的代码处，加上一句console.log()，就好了。然后在开发者工具控制台就可以看到你打印出来的东西了。
适用场景：任何时候。 - 3 断点调试
我们需要关注上图红色方框内的六个按钮。从左到右依次标记为a,b,c,d,e,f。
- a: Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止），快捷键F8。
- b: Step over next function call：逐语句执行（跳到下一行），快捷键F10。
- c: Step into next function call：进入当前函数。快捷键F11。
- d: Step out of current function：跳出当前执行函数，快捷键F11+Shift。
- e: Deactive/Active all breakpoints：关闭/开启所有断点。
- f: Pause on exceptions：异常情况自动断点设置。
我们可根据自己的需要进行断点的调试，排查问题。
适用场景：大多数情况。
- 4 Debugger断点
用法：在代码中添加”debugger”语句，当代码执行到该语句的时候就会自动断点。剩下的操作就跟在Sources面板添加断点调试一模一样。
适用场景：当我们在source面板找不到对应的js文件时，或者source面板的js文件已经经过压缩与混淆，我们不知道该在哪一行打断点时，我们可以使用该方法。 - 5 事件断点
用法： 在上图中点击Event Listener Breakpoints，然后选择我们需要监听的事件。之后当该事件被触发时，浏览器会帮我们自动在相应的js文件代码处打上断点。
适用场景：当我们忘记代码写在哪个js文件时，该方法可以快速帮助我们进行定位，节约时间。
以上就是我们前端开发中经常用到的调试技巧。
