1.什么是断点调试？它困难吗？断点调试其实并不是什么复杂的事情。简单理解就是打开浏览器，打开sources找到js文件，点击行号即可。操作起来似乎很简单。其实很多人纠结的是，断点在哪里？（先截个断点截图，以chrome浏览器的断点为例）还记得步骤吗？用chrome浏览器打开页面→按f12打开开发者工具→打开Sources→打开你要调试的js代码文件→点击行号，OK！恭喜你处女断点，哈哈~~2。怎么下断点才合适？断点操作很简单。核心问题是，如何下断点找出代码的问题？下面我继续举个例子，方便大家理解。废话不多说，上图：假设我们现在实现了一个加载更多的功能，如上图所示，但是现在加载更多的功能出现了问题。单击后，数据未加载。我们第一时间应该想到什么？第一反应是什么）我的第一反应是，我点击成功了吗？点击事件中的方法是否运行？好吧，如果我们想知道这个问题的答案，我们马上打个断点试试看。断点在哪里？你自己想想吧。然后就是上图：你有没有想过？是的，既然我们想知道点击是否成功，当然我们在代码中的点击事件处加断点。记得不要在226行加上，因为执行的是click方法。函数，而不是第226行的选择器。现在已经设置了断点，接下来我们应该做什么？你自己想想吧~继续上图：那我们当然回去点击loadmore按钮了，为什么呢？呃。..如果你问，请允许我使用这个表情，如何在不点击加载更多按钮的情况下触发点击事件？如何在不触发点击事件的情况下执行点击事件中的函数？咆哮。.不过我相信大家肯定不会问这么low的问题~废话少说~继续正题，上图是点击loadmore按钮后的情况，我们可以看到左边的页面被半透明的覆盖了layer是的，页面顶部有一串英文和两个按钮，右边代码的第227行添加了背景色。遇到这种情况，我们先不管那些英文按钮的含义和作用。你从这张图片中得到什么信息？继续琢磨琢磨~如果出现上图的情况，说明调用了点击事件中的函数，进一步说明点击事件生效了。那么我们对这个问题的第一个“怀疑”就排除了。补充一下：如果没有出现上述情况怎么办？那是不是说点击事件没有生效呢？点击事件没有生效的原因是什么？自己想一想~点击事件不生效的原因可能有很多，比如多选择器错误、语法错误、选中的元素是后生成的等等，如何解决呢？选择器错误，后面可以继续看console部分的内容，语法错误我想你就知道怎么处理了，仔细检查，如果不熟悉语法，可以将选中的元素与百度可以，最简单的处理方式就是使用.on()方法来处理。这东东有事件委托处理，具体可以百度。那么接下来“犯罪嫌疑人”的身份被锁定在哪里呢？我们把目光转向事件内部，触发了点击事件，那么接下来的问题就是它的内部函数问题了。如果你想问为什么？请给我一块豆腐。..比如给你一支笔写字，然后你在纸上写了一个字，字却出不来，为什么？你说是我写的，可是纸上还有划痕。有没有可能是钢笔没有墨水或者笔尖坏了？这个例子更类似于点击加载。书写的动作是点击操作，内部函数是墨水或者笔尖。知道了？然后我们分析一下点击事件的内容，里面包含了三句话。第一句是变量i的自增长，第二句是给按钮添加一个i标签，第三句是调用请求数据的方法。仅仅通过这三句的作用，我们就可以把较大的一部分怀疑放在第三句上，把一小部分放在第一句和第二句上。可能有人会疑惑，第二句怎么会是Suspicious呢？他的作用只是加了个标签，对数据完全没有影响。确实，这句话对数据没有影响，但出于严谨的考虑，可能还是错的。比如少了一个点数呢？还是句子中的某个符号错误？往往就是这种小问题，浪费了我们很多时间。好了，为了进一步锁定“犯罪嫌疑人”，我给大家介绍一个工具，也是上图中的两个图标之一，见下图：这个小图标的功能叫做“行刑”按语句”或“逐步执行”。是我个人理解的一个名字，意思是每点击一次，js语句就会后一句执行，而且它还有一个快捷键，F10。下图演示了点击后的效果：我点击这个按钮两次（或者用F10快捷键），js代码从227行执行到229行，所以我称之为“逐条执行”或者“一步步“落实”。这个函数很好用，大部分调试都会用到。上面提到我点了两次“Executestatementbystatement”按钮，代码从第227行跑到第229行，你觉得这是什么意思？是不是说明前两句在语法上是正确的，那么是不是也说明前两句已经排除了嫌疑呢？我不这么认为。大家都知道加载更多是下一页的一个功能，最核心的是传给后台的页码值。每当我点击加载更多按钮时，页码的值就会增加1，所以如果你下载了一页的数据就没有出来。会不会是页码的值，即[i变量]（以下统称i）有问题？那么如何查看页码是否有问题呢？你自己想想吧。这里有两种查看页码值i]实际输出值的方法，如上图所示：loadmore按钮→3.点击“Executestatementbystatement”按钮后，js代码执行到228行→4.鼠标选择i++（大家不明白什么是selection？意思是要复制something,doyouwanttoselectit?Yes,isthisselection)→5.选中后，将鼠标悬停在目标上，会看到上图的结果。第二种方法：这种方法其实和第一种方法类似，只是在控制台输出了i的值。只需按照第一种方法进行到第三步即可→4.打开与sources同级的控制台→5。在控制台下方的输入字段中输入i→6.按Enter键。在上面的第二种方法中，提到了控制台。我们可以称它为控制台或其他任何东西，都无所谓~控制台很强大。在调试的过程中，我们经常需要知道一些变量的值输出的是什么，或者我们是否使用选择器[$".div")来选择我们想要的元素等等，都可以在控制台打印出来.当然也可以直接使用第一种方法。让我向您展示如何在控制台中打印我们要选择的元素。上图~在控制台输入$(this)得到选中的元素，没错，就是我们点击的对象——加载更多的按钮元素。这里给大家说说我对console控制台的理解：这个东东是一个js解析器，浏览器本身就是用来解析运行js的，但是浏览器允许我们开发者通过console进行调试，可以控制运行和js的输出。通过以上两种方法，你可能会觉得使用起来很简单，但是我要提醒你的是，还是一些新手比较容易遇到的困惑。困惑一：在没有断点的情况下，在控制台输入i，但是控制台报错。这对于新手来说应该是一个很常见的问题。为什么不打断点就不能在控制台直接输出变量的值呢？我个人理解此时i只是一个局部变量。如果不设置断点，浏览器会保存所有js完全解析，控制台无法访问局部变量，只能访问全局变量，所以此时控制台会报错iisundefined，但是当js被标记打了个断点，控制台解析到局部变量i所在的函数，也就是Timei可以访问了。困惑2：为什么直接在控制台输入$(“.xxx”)就能打印出东西？很简单，console本身就是一个js解析器，而$(“.xxx”)就是一个js语句，那么console自然就可以解析这个语句并输出结果。介绍完“executestatementbystatement”按钮的用法和console控制台，最后再介绍一个按钮，如上图所示：我称这个按钮为“executebyprocess”按钮，区别于“executebyprocess”按钮statement"button,"executebyprocess"按钮经常在一个方法调用多个js文件时使用，涉及的js代码比较长，所以会用到这个按钮。上图：假设我只在上图中的第227行设置了断点，然后点击“Executestatementbystatement”按钮到第229行，如果此时再点击“Executestatementbystatement”按钮会怎样呢？会进入下图中的jsLi:这些是zepto库文件的内容，没什么花哨的，里面的操作很复杂。我们不能一直使用“Executestatementbystatement”按钮，所以你会发现按了半天还是在库文件中。.这个时候怎么办？然后是时候“按进程执行”按钮了。上图：除了在227行下了断点，我还在237行下了断点，当我们运行到229行的时候，直接点击“Executestepbystep”按钮，会发现js直接跳转过去了library文件，运行到第237行，大家可以自行体会。最后总结：本文主要介绍了“按语句执行语句”、“按进程执行”按钮、console控制台这三个工具，以及调试bug时的一些思路。工具的使用方法我就不细说了，只要你知道怎么用就可以了，如何更合理的使用还需要你通过大量的实践去总结和完善~其实我想说的就是本文讲的是一种调试bug的方式，但是因为所选的例子涉及的东西太多了。..怕把所有的内容都写下来太长，大家也没有兴趣看，所以就简单的挑了一部分给大家讲解一下，不知道大家有没有收获。别看我调试一堆三句话写的东西。如果你在实际项目中真的像我这样去做，估计你调试一个bug的时间会比写一个脚本的时间长得多。..在实际情况中，我们应该一拿到问题就去修炼，在自己的脑海里检查这个问题，找到最有可能出现问题的点。如果没有办法快速找出最重要的点，那就用最重要的点。麻烦但很靠谱的方法，使用“Executestatementbystatement”按钮依次执行与问题相关的整个js。在执行过程中，你也会理清思路，注意每个变量的取值和选择，浏览器选择的元素是否正确。一般来说，这样做一次，bug就解决的差不多了。所以我个人认为我们调试bug的方式应该是这样的：第一，js是否执行成功；第二，js是否存在逻辑问题、变量问题、参数问题等；最后，如果以上都没有问题，请仔细检查各种符号。..OK~断点就到这里了~有不懂的同学可以在下方留言哦~另外，如果你有什么不懂的知识点或者对前端感到迷茫的，也可以在下方留言。我会继续写一些文档来回应大家的意见~
