js调试技巧

前端工作中，不仅编码很重要，重现bug，解决bug的能力同样重要。而这些都离不开代码调试。现就一些调试技巧做出总结。

• 1 alert() 方法。
  用法：在你觉得有问题的代码处，加上一句alert(xxx)，就好了。
  适用场景：任何时候。
• 2 console.log()
  用法：在你觉得有问题的代码处，加上一句console.log()，就好了。然后在开发者工具控制台就可以看到你打印出来的东西了。
  适用场景：任何时候。
• 3 断点调试

用法：打开开发者工具的source面板，在左侧目录树中找到对应的JS文件，在右侧对应文件的行号上单击即可实现断点的添加和删除。在添加断点之后，代码就会在断点处停止执行。此时页面是这样的

我们需要关注上图红色方框内的六个按钮。从左到右依次标记为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文件时，该方法可以快速帮助我们进行定位，节约时间。

以上就是我们前端开发中经常用到的调试技巧。