共计 1293 个字符，预计需要花费 4 分钟才能阅读完成。
调试能力是一个程序员的生存基本，可是很多初学者却漠视调试。明天咱们就来讨究一下 JS 的调试技巧。本文章将会具体列举 JS 相干的各种实用调试技巧。
如果您是 JS 的初学者，那么这篇文章将对您有很大的帮忙。为什么要调试？程序就是函数堆砌起来的，程序的运行就是函数的执行过程。而通过 JS 调试，咱们能够更为直观的追踪到在程序运行中，函数的执行程序，以及各个参数的变动。这样咱们就能够疾速的定位到问题所在。
- 什么是 JS 调试？在程序运行中，咱们总会遇到各种 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． 断点调试在理论我的项目代码量是很大的，应用单步调试就过于的浪费时间。而且有时咱们是想要定位某一处的代码是否有错，所以就没有必要调试所有的代码。所以咱们就能够应用断点调试，那么什么是断点调试呢？
首先，在想要定位问题的代码处，打断点，也就是代码进行执行的地位。如图所示点击红框处打该行的断点。（因为谷歌版本的不同，断点图标略有不同）
而后刷新页面（F5），就能够进入断点调试页面。点击 Resume script execution 按钮就能够调到下一个断点。（留神：当调到断点处时，此行代码为蓝色背景，示意此行代码行将执行但并未执行）
5． 事件调试首先咱们要来明确一个概念，就是同步与异步，当代码执行时，自上而下运行的为同步代码，而异步代码其中一类就是须要事件来触发。所以在代码调试中，事件体内的函数，须要在打断点后，通过该事件的行为，能力进入函数体。如以下代码：打断点后在刷新，其实没有成果
必须动过事件能力触发调试