网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
在程序运行中，我们总会遇到各种bug，而通过代码的追踪代码的运行顺序从而定位到问题的过程就叫做JS调试。
首先我们需要知道如何进入调试的界面，此处我们以谷歌为例，通过F12和右键检查，找到Sources就可以进入调试界面。具体界面显示如下：
红框所标示的就是我们调试常用的按键。下面我们会在实际应用场景中详细讲述每一个按键的作用。
2． 单步调试
首先是普通调试，又叫单步调试。F12找到Sources后，在左侧文件夹中找到你想运行的文件，然后点击pause script execution按钮再刷新页面（F5），就可以进入单步调试
点击Step over next function call就是程序逐步调试，每点击一次，就会按照代码执行顺序，向下执行一句代码。
3． 函数调试
如果亲手尝试过单步调试的小伙伴就会发现，单步调试其实并不能满足我们找bug的需求，因为单步调试是不能进入函数体内，我们也就不能跟踪函数体内变量的变化。
所以我们接下来就来学习下第三个按钮，step into next function call按钮
使用Step into按钮，我们就可以进入函数体内，在单步调试过程中，当经过函数调用时，点击Step into就可以进入该函数体内。
进入函数体内之后，继续点击Step over按钮，就可以进行函数体内的单步调试。如图所示，函数体内的变量变化就一目了然了。
但是在我们已经追踪到想要的变量变化时，函数体内的内容又很多，单步调试到函数结束就很浪费时间。这里就可以使用我们今天学习的第四个按钮，step out of current function call跳出当前函数体，跳出到之前进入函数体的代码位置。
4． 断点调试
在实际项目代码量是很大的，使用单步调试就过于的浪费时间。而且有时我们是想要定位某一处的代码是否有错，所以就没有必要调试所有的代码。所以我们就可以使用断点调试，那么什么是断点调试呢？
首先，在想要定位问题的代码处，打断点，也就是代码停止执行的位置。如图所示点击红框处打该行的断点。（由于谷歌版本的不同，断点图标略有不同）
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
扫一扫
940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
