在实际软件开发过程中，通过浏览器进行前端断点调试操作要点

一、背景：在软件开发过程中，特别是需要排查前端报错问题时，一般我们都是通过浏览器断点调试，查出报错问题根源并解决。

二、适合用户：

开发人员：基础技能，包括前后端人员

项目/实施人员：协助排查问题，特别是在生产环境，定位问题（找开发）

三、操作：

1.编辑工具运行项目（或生产环境中），在浏览器中鼠标右击，点击[检查]或[开发者工具]

• 报错原因及js文件

2.定位js报错位置，打上断点，然后点击相应操作功能。

3.调试

• 第一个按钮：【resume script execution】继续脚本执行，若有多个断点时，即依次执行下一个断点，直到结束。
• 第二个按钮：【step over next function】顾名思义over有跳过的意思。即如果遇到一个函数，它会直接执行完这个函数（注意是直接执行结束返回结果)，然后进入下一步，中间不显示细节。
• 第三个按钮：【step into next function】顾名思义into是进入的意思，即如果遇到一个函数，它不会一下运行完这个函数，而是进入函数内部，一步一步地执行，这样我们可以更清楚地观察执行过程。
• 第四个按钮：【step ouf of current function】顾名思义out是出来的意思，即跳出当前函数，利用step into已经进入了函数内部，我们可以通过此功能来一下执行完函数内部剩下的代码。
• 第五个按钮：【step】执行下一步，一行一行执行。
• 第六个按钮：【deactivate breakpoints】屏蔽断点，执行下一步即解决断点调试。

4.在调试过程中，执行到该断点时，查看各个变量的值。右侧的状态栏中scope