如何在浏览器对代码进行断点调试

如何在浏览器对代码进行断点调试

断点调试：断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量的值，出错的话，调试到出错的代码即显示错误，停下。

断点调试可以帮助我们观察程序的运行过程。

1. 在前端页面按F12或者右击鼠标选择检查，进入开发者模式；
2. 点击Source，找到需要调试的代码；
3. 在所需要打断点的行点击一下它的行号，刷新一下页面；
4. 点击右侧step into next function call进行下一步操作；
5. 在调试过程中可以实时查看变量的值的变化和代码执行结果。

Watch：监视，通过watch可以监视变量的值的变化，非常常用。

F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。