js断点调试心得（以chrome浏览器为例）

原文转载自这里js断点调试心得,我是勤劳的搬运工，嗯！
这里相对原文有删减，想看原文的请移步。

一、断点调试是啥？难不难？

用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下

二、断点怎么打才合适？

打断点操做很简单，核心的问题在于，断点怎么打才可以排查出代码的问题所在呢？下面我继续举个例子方便你们理解，废话很少说，上图：

假设咱们如今正在实现一个加载更多的功能，如上图，可是如今加载更多功能出现了问题，点击之后数据没有加载出来，这时候咱们第一时间想到的应该是啥？（换一行写答案，你们能够看看本身的第一反应是啥）

我最早想到的是，我点击到底有没有成功？点击事件里的方法有没有运行？好，要想知道这个问题的答案，咱们立马去打个断点试试看，断点打在哪？本身先琢磨一下。

继续上图：

各位想到没？没错，既然想知道点击是否成功，咱们固然是在代码中的点击事件处添加一个断点，切记不要添加在226行，由于被执行的是click方法内的函数，而不是226行的选择器。断点如今已经打上了，而后回去点击加载更多按钮，结果以下图：

继续正题，上面的图就是点击加载更多按钮后的状况，咱们能够看到左侧的页面被一个半透明的层给盖住了，页面上方还有一串英文和两个按钮，右侧代码227行被添加上了背景色，出现这个状况，先无论那些按钮英文是啥意思有啥做用，你从这个图获得了什么信息？继续琢磨琢磨~

若是出现了上图这个状况，说明一点，click事件中的函数被调用了，进一步说明了点击事件生效。那么咱们对于这个问题产生的第一个“犯罪嫌疑人”就被排除了。

补充一下

若是没有出现上面的状况咋办？那是否是说明点击事件没有生效呢？那是什么致使点击事件没有生效？你们本身思考思考~
可能致使点击事件没生效的缘由不少，比多选择器错误，语法错误，被选择的元素是后生成的等。怎么解决呢？
选择器错误，你们能够继续日后看到console部分的内容，我想你们就知道怎么处理了
语法错误，细心排查一下，不熟悉的语法能够百度对比一下
被选择的元素是后生成的，最简单的处理就是使用.on()方法去处理，这个东东带有事件委托处理，详情能够自行百度。

那么接下来”犯罪嫌疑人“的身份锁定在哪里呢？
click事件触发了，那么接下来的问题就是它内部的函数问题了。接着咱们分析下点击事件里面的内容，里面包含三句话，第一句话是变量i自增加，第二句话是给按钮添加一个i标签，第三句话是调用请求数据的方法。

就经过这三句话的自己做用，咱们能够将较大一部分嫌疑放在第三句话，一小部分放在第一句和第二句话上，有人可能会疑惑，第二句话怎么会有嫌疑呢？他的做用只不过是添加一个标签，对于数据彻底没有影响啊，确实，这句话对于数据没有影响，可是出于严谨考虑，它仍然有可能出错，例如它要是少了一个分号呢？或者句子内部某个符号错误呢？每每就是这种小问题浪费咱们不少时间。

好，为了进一步锁定”犯罪嫌疑人“，给你们介绍一个工具，也是上图出现两个图标之一，见下图：

这个小图标的功能叫“逐语句执行”或者叫“逐步执行”，每点击它一次，js语句就会日后执行一句，它还有一个快捷键，F10。下图示范一下它被点击之后的效果：

我单击了两次这个按钮（或者使用F10快捷键），js代码从227行执行到了229行。这个功能很是的实用，大部分的调试都会使用到它。

单击了两次“逐语句执行”按钮，代码从227行运行到229行，你们以为这意味着啥？是否是说明从语法上来讲，前两句是没有问题的，那么是否是也同时意味着前两句就排除嫌疑了呢？我看否则。

你们都知道，加载更多就是一个下一页的功能，而其中最核心的一个就是传给后台的页码数值，每当我点击加载更多按钮一次，页码的数值就要加1，因此若是下一页的数据没出来，是否是有多是由于页码数值也就是[i变量]（下面统一称呼i）有问题？那么如何排查页码是否存在问题呢？你们本身先思考思考。

下面教你们两种查看页码数值i]实际输出值的方法，上图：
方法一：1.仍然是在227行打上断点 → 2. 点击加载更多按钮 → 3. 单击一次“逐语句执行“按钮，js代码执行到228行 → 4.用鼠标选中i++ → 5. 选中之后，鼠标悬浮在目标上方，你就看到上图的结果。

方法二：这个方法其实和第一种差很少，只不过是在控制台输出i的值，你们只须要按照第一种方法执行到第三步 → 4. 打开和sources同一级栏目的console → 5. 在console下方的输入栏里输入i → 6. 按enter回车键便可。

上面的第二种方法里，提到了console这个东西，咱们能够称呼它为控制台或者其余什么均可以，这不重要~console的功能很强大，在调试的过程当中，咱们每每须要知道某些变量的值到底输出了什么，或者咱们使用选择器[$”.div”)这种]是否选中了咱们想要的元素等，均可以在控制台打印出来。固然直接用第一种方法也能够。

给你们示范一下在console里打印咱们想要选中的元素。以下图：

在控制台中输入$(this)，便可获得选择的元素，没错，正是咱们所点击的对象——加载更多按钮元素。

在这里给你们说说我对console这个控制台的理解：这个东东就是一个js解析器，是浏览器自己用来解析运行js的家伙，只不过浏览器经过console让咱们开发者在调试过程当中，能够控制js的运行以及输出。经过上面的两种方法，你们可能以为使用起来很简单，可是我要给你们提醒一下，或者说是一些新手比较容易遇到的困惑。

困惑一：在没有打断点的状况下，在console输入i，结果console报错了。
这应该是新手很常见的问题，为何不打断点我就没有办法在控制台直接输出变量的值呢？我的理解这时候i只是一个局部变量，若是不打上断点，浏览器会把全部的js所有解析完成，console并不能访问到局部变量，只能访问到全局变量，因此这时候console会报错i未定义，可是当js打上断点时，console解析到了局部变量i所在的函数内，这时候i是可以被访问的。

困惑二：为何我直接在console里输入$(“.xxx”)能打印出东西来呢？
很简单，console自己就是一个js解析器，$(“.xxx”)就是一个js语句，因此天然console可以解析这个语句而后输出结果。

介绍完“逐语句执行”按钮和console控制台的用法，最后再介绍一个按钮，上图：

这个按钮我称呼它为“逐过程执行”按钮，和“逐语句执行”按钮不一样，“逐过程执行”按钮经常使用在一个方法调用多个js文件时，涉及到的js代码比较长，则会使用到这个按钮。

上图：

假设上图我只在227行打了个断点，而后一直点击逐语句执行”按钮到229行，这时候若是再点击一次“逐语句执行”按钮呢？则会进入下图的js里：

这些都是zepto库文件的内容，没啥好看的，里面运行很复杂，咱们不可能一直使用“逐语句执行”按钮，这样你会发现你按了大半天还在库文件里面绕。。。这时候咋办？那就该“逐过程执行”按钮上场了。

我除了在227行打了一个断点，同时还在237行打了一个断点，当咱们运行到229行时，直接单击“逐过程执行”按钮，你会发现，js直接跳过了库文件，运行到了237行，你们能够本身使用体验一下。

总结

本文主要介绍了“逐语句执行”按钮、“逐过程执行”按钮、console控制台这三个工具，以及调试bug时的一些思路。工具的用法我就再也不赘述了，你们知道用法就行，具体怎么去更合理的使用，还须要你们经过大量的实践去总结提高~

我其实在本文主要想讲的是调试bug的一个思路，可是因为选的例子涉及东西太多。。。怕所有写下来内容太长，你们也没兴趣看，因此我就简单的选了一部分给你们讲解，不知道你们有没有收获。别看我调试三句话写了一堆的东西，若是真的在实际项目中你也像我这样去作，估计你调试一个Bug的时间会比写一个脚本的时间还长不少。。。在实际状况下，咱们应该养成拿到问题的第一时间，自行在脑海中排查问题，找到最有可能出现问题的点，若是没办法迅速的排查出最重要的点，那么你可使用最麻烦可是很靠谱的方法，利用“逐语句执行”按钮将整个和问题相关的js依次去执行一遍，在执行的过程当中，本身也跟着理清思路，同时注意下每一个变量的值以及选择器选中的元素是否正确，通常来讲，这样作一遍下来，bug都解决的差很少了。

因此我的认为，咱们调试bug的思路应该是这样的：首先，js是否成功的执行进来；其次，js是否存在逻辑问题，变量问题，参数问题等等；最后，若是上述都没有问题，请仔细查看各类符号。。。