1 .断点的调试是什么？ 很难吗？
调试实际上并不那么复杂。 要容易理解，只需要打开浏览器，打开sources，找到js文件，然后按行号单击。 虽然操作似乎很简单，但其实很多人烦恼的是，在哪里中断积分呢？ (首先，让我们以chrome浏览器的断点为例来查看断点的截图。)
还记得步骤吗？
在chrome浏览器中打开页面按f12键打开开发人员工具打开Sources 打开要调试的js代码文件单击行号确定！ 处女断点了，恭喜你，哈哈~~~
2 .断点怎么打比较合适？
虽然断点的操作很简单，但核心问题是断点如何命中才能解决代码问题。 在这里继续举个例子，以便于理解。 不言而喻。 上图：
我们现在实现了加载更多的功能，就像上面的照片一样，但是现在加载更多的功能有问题，点击后没有加载数据，那么最初想到的是什么呢？ (如果换一行写答案，大家就会看到自己最初的反应是什么) ) )。
我首先想到的是我点击后是否成功。 在事件中点击的方法正在实施吗？ 是的，要知道这个问题的答案，我们马上做个断点吧。 断点在哪里？ 先自己想想。
上面的照片：
大家想到了吗？ 是的。 因为想知道点击是否成功，所以当然要在代码中的点击事件中添加断点。 请不要添加到226行中哦。 因为click方法中的函数将执行，而不是26行选择器。 断点现在已经被放进去了，你要做什么？ 自己想想~
继续上图：
然后当然回去，点击更多的加载按钮。 为什么？ 额头。 不点击更多按钮进行加载，怎么触发点击事件呢？ 在不触发点击事件的情况下，如何执行点击事件的函数？ 就像咆哮一样。 但是，我想大家一定不会问这么low的问题。 请不要胡说。
进入正题。 上图是点击更多按钮加载后的样子。 左边的页面被半透明的层覆盖着。 页面上方有英文字符串和两个按钮，右侧的代码227行添加了背景色。 如果发生这种情况，不管那些按钮是英语的意思是如何起作用的，从这张图中得到了什么信息？ 继续思考~
如果发生如上图所示的情况，则会调用click事件的函数，进一步说明点击事件是有效的。 我们排除了第一个关于这个问题的“嫌疑犯”。
补充：
如果不出现上述情况怎么办？ 那是否表明点击事件无效？ 那是什么让点击事件没有生效？ 大家一起想想~
点击事件无效的原因大多是多选择器的错误、语法错误、所选择的要素以后生成等。 怎么解决？
选择器错误。 稍后可以查看控制台部分的内容。 我想我知道处理方法
语法错了。 请仔细检查。 不熟悉的语法请百度比较一下
所选元素随后生成，最简单的处理是. on (使用方法进行处理。 这个bzdjqm附有事件委托处理，详情可以自己百度查看。
那么，下一个“嫌疑人”的身份被锁定在哪里呢？
我们着眼于事件内部，触发了click事件。 那么，下一个问题是其内部的函数问题。 为什么？ 请给我一块豆腐。
比如，给你钢笔，让你写字，在纸上写字，你发现字不出来，为什么？ 你说是我写的吧。 纸上还有伤口。 那是钢笔没有墨水还是笔尖坏了？ 这个例子等同于点击加载，写字这个动作是点击操作，内部函数是墨水或者笔尖。 明白了吗~
然后，分析事件的内容并单击。 其中包含三个词。 第一个词是变量I的自我增加，第二个词是在按钮上添加I标签，第三个词是调用请求数据的方法。
通过这三个词的作用，我们可以把大部分嫌疑放在第三个词上，一小部分放在第一个词和第二个词上。 有人可能会怀疑第二句话为什么会有嫌疑。 他的作用只不过是添加标签，完全不影响数据啊。 确实，这句话不会影响数据，但是严格来说，有可能会出错，例如少了一个分号。 还是句子内部的符号错了？ 很多时候，这样的小问题会浪费我们很多时间。
是的，为了进一步确定“嫌疑人”，我介绍一下工具。 上图中出现了两个图标之一。 请参照下图。
这个小图标的功能称为“逐语句执行”或“分阶段执行”。 这是我个人理解的叫法，每次点击这个，js语句都会在后面执行一句，还有快捷键。 是F10。 下图显示了单击后的效果。
ps://p6.toutiaoimg.com/origin/52d00029acd0aaa0617?from=pc">我单击了两次这个按钮（或者使用F10快捷键），js代码从227行执行到了229行，所以我管它叫”逐语句执行“或者”逐步执行“。这个功能非常的实用，大部分的调试都会使用到它。
太晚了，明天继续写，好戏还在后头~
——————————————————————分割线————————————————————
OK，接着写！
上面介绍到我单击了两次“逐语句执行”按钮，代码从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这个控制台的理解：这个bzdjqm就是一个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是否存在逻辑问题，变量问题，参数问题等等；最后，如果上述都没有问题，请仔细查看各种符号。