本文介绍了前端开发中JavaScript调试的几种方法，包括Sources断点、Debugger断点和DOM断点调试，详细阐述了如何设置和使用这些断点来跟踪代码执行过程，以提高开发效率。同时提到了事件监听器断点在处理事件相关问题时的作用。文章还提及了前端工程师的学习路径和提升建议。
Sources断点
假设我现在就是要验证一下：函数传入的两个数、被加的随机数，以及最终的总和。那么该怎么操作呢？
方法一
从上图发现，我们在代码中新增了三行console代码，用以打印我们关心的数据变量，而最终我们从控制台（Console面板）中的输出结果，可以很清楚的验证整个计算过程是否正常，进而达到我们题设的验证要求。
方法二，方法一的验证过程存在很明显的弊端就是，添加了很多冗余代码，接下来我们看一下使用断点进行验证，是否更加方便，先看一个如何加断点，以及断点后是什么效果：
如图，给一段代码添加断点的流程是
“F12（Ctrl + Shift + I）打开开发工具”——“点击Sources菜单”——“左侧树中找到相应文件”——“点击行号列”即完成在当前行添加/删除断点操作。当断点添加完毕后，刷新页面JS执行到断点位置停住，在Sources界面会看到当前作用域中所有变量和值，只需对每个值进行验证即可完成我们题设验证要求。
那问题来了，仔细的朋友会发现当我的代码执行到断点的时候，显示的变量a和b的值是已经进行过加法运算后
最低0.47元/天 解锁文章
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
