1.什么是断点调试？难吗？

调试断点并不是一件复杂的事情。简单地理解没有呼出就意味着打开浏览器，打开源代码找到js文件，点击行号。操作起来似乎很简单。事实上，很多人都不知道该从哪里打断。(先看一个断点截图，以chrome浏览器的断点为例。)

还记得步骤吗？

用chrome浏览器打开页面按f12打开开发者工具打开Sources 打开要调试的js代码文件点击一次行号，OK！恭喜命中处女断点，哈哈~ ~

2.如何命中断点？

断点的操作很简单，核心问题是，如何在发现代码问题之前进行断点？让我继续给你举个例子，方便你理解，不多废话，如上图：

假设我们现在正在实现一个函数来加载更多的函数，如上图所示，但是加载更多的函数有一个问题，点击后数据没有加载。第一时间应该想到什么？把答案写在新的一行，你就能看出你的第一反应是什么。

我首先想到的是，我点击成功了吗？click事件中的方法运行了吗？好吧，如果你想知道这个问题的答案，让我们试着马上命中一个断点。断点在哪里？先为自己考虑。

然后上图：

你想过吗？没错，既然我们想知道click是否成功，那么我们肯定会在代码中的click事件处添加一个断点，记住不要在第226行添加，因为执行的是click方法中的函数，而不是第226行的选择器。既然断点已经命中，我们该怎么办？再想想~

继续上图：

然后，当然，我们返回并点击加载更多按钮。为什么呢？呃。如果你问，请允许我用这个表达。

，不点击加载更多按钮，如何触发点击事件？如何在点击事件中执行功能而不触发点击事件？咆哮。但我相信你不会问这么低级的问题~别废话了~

言归正传，上图是点击加载更多按钮后的情况。我们可以看到左侧页面被一个半透明层覆盖，页面顶部有一串英文和两个按钮，右侧代码行227增加了背景色。在这种情况下，不考虑那些按钮在英语中的含义和功能，你从这个图中得到什么信息？继续思考~

如果出现上面显示的情况，说明点击事件中的函数已经被调用，进一步说明点击事件生效。那么我们对于这个问题的第一个“犯罪嫌疑人”就会被排除。

添加：

如果上述情况没有出现怎么办？这是否意味着点击事件没有生效？是什么导致点击事件没有生效？自己想想~

可能导致click事件无法生效的原因有很多，比如选择器错误、语法错误、所选元素是后期生成的。怎么解决？

选择器错误，你可以继续看控制台的内容，我想你会知道如何处理。

语法错误，仔细检查，不熟悉的语法可以和百度对比。

所选元素是后期生成的，最简单的处理是使用。on()方法来处理它。此项有事件委托处理，详情可百度获取。

那么“犯罪嫌疑人”的身份接下来锁定在哪里？

我们关注事件内部，点击事件被触发，那么下一个问题就是它的内部功能。如果你想问为什么？请给我一块豆腐。

比如我给你一支笔写，然后你在纸上写了一个字，但是没有出来。为什么呢？你说是我写的。纸上有划痕。有没有可能是笔没有墨水或者笔尖断了？这个例子比点击加载更合理。书写的动作是点击操作，内部功能是墨迹或笔尖。明白了吗？~

然后我们分析点击事件的内容，包含三句话，第一句话是变量I自行增长，第二句话是给按钮加一个I标签，第三句话是调用请求数据的方法。

根据这三句的功能，我们可以把嫌疑人的大部分放在第三句，小部分放在第一句和第二句。有些人可能想知道第二句话怎么会被怀疑。他的功能只是添加一个标签，对数据完全没有影响。的确，这句话对数据没有影响，但由于严谨的考虑，还是可能出错。例如，它是否缺少分号？还是句子里面的一个符号错了？浪费我们大量时间的往往是这个小问题。

好了，为了进一步锁定“犯罪嫌疑人”，我再介绍一个工具，也是上图的两个图标之一，如下图所示：

这个小图标的功能叫做“一步一步执行”或者“一步一步执行”，这是我个人理解的一个术语，意思是每次点击它，一句话之后就会执行js语句，它还有一个快捷键，F10。下图演示了单击后的效果：

我两次点击这个按钮(或者使用F10快捷键)，js代码从第227行执行到第229行，所以我称之为“逐步执行”或者“逐步执行”。这个功能非常实用，大部分调试都会用到。

太晚了，明天继续写，好戏还在后头~

3354——3——————3——————33——————33333愚人节33——3333——3 ——3 33543, 33543, 3543, 3543, 3543, 3543, 3543, 3543, 333, 343, 343.

好，继续写！

我已经点击了两次“按语句执行”按钮，代码从227行运行到229行。你认为这意味着什么？是不是说前两句语法正确？是不是也意味着前两句就没有嫌疑了？我不这么认为。

众所周知，加载更多是下一页的功能，核心一个是传到后台的页码。每次单击“加载更多”按钮，页码都会增加1。所以，如果下一页的数据没有出来，有没有可能是页码有问题，也就是[i变量](以下简称I)？那么如何检查页码是否有问题呢？先为自己考虑。

这里有两种方法可以检查页码i]的实际输出值，如上图所示：

第一种：

操作步骤如下：

1.仍然在第227 2行放一个断点。单击加载更多按钮 3。单击“按语句执行语句”按钮一次，js代码将执行到第228 4行。用鼠标选择I(你选择的时候不明白是什么意思？是你想复制什么东西，你想选择它吗？是的，这是选择) 5。选择后，将鼠标悬停在目标上，您将看到上面的结果。

第二种：

实际上，这个方法与第一个方法类似，只是I的值是在控制台上输出的。你只需要按照第一种方法进行第三步 4。在与信号源相同的级别栏中打开控制台 5。在控制台下面的输入栏输入I6。按回车键。

在上面的第二种方法中，提到了控制台。我们可以称之为控制台或其他任何东西，这并不重要。~控制台非常强大。在调试过程中，我们经常需要知道一些变量的值是输出什么，或者我们是否已经使用选择器[$]选择了我们想要的元素。div)等。可以打印在控制台上。当然，第一种方法可以直接使用。

向我们展示如何在控制台中打印我们想要选择的元素。上图~

在控制台中输入$(this)以获取所选元素。是的，是我们点击的对象——加载更多的按钮元素。

在这里，我将告诉大家我对console的理解：这个东西是一个js解析器，浏览器本身使用它来解析和运行js，但是浏览器允许我们的开发人员在调试过程中通过console来控制js的运行和输出。通过以上两种方法，你可能会觉得很好用，但我想提醒你，还是有些初学者更容易遇到困惑。

困惑1:我被不间断地输入控制台，控制台报告了一个错误。

对于新手来说，这应该是一个非常常见的问题。为什么不能在控制台直接输出变量值而不中断？个人认为，此时我只是一个局部变量。如果不在上面设置断点，浏览器会解析所有js，控制台不能访问局部变量，只能访问全局变量。因此，控制台将报告我此时未定义。但是，当JS在上面放一个断点时，控制台解析成局部变量I所在的函数，此时就可以访问我了。

困惑2:为什么我可以通过键入$(”来打印一些东西。xxx”)直接在控制台？

很简单，控制台本身就是一个js解析器。xxx”)是一个js语句，所以自然控制台可以解析这个语句并输出结果。

在介绍了“按语句执行”按钮和控制台的使用之后，我们将最后介绍一个按钮，如上图所示：

我把这个按钮叫做“逐步执行”，它不同于“逐步执行”按钮。当一个方法调用多个js文件时，经常会用到“逐步执行”按钮，涉及到的js代码比较长，所以会用到这个按钮。

上图：

假设我只在上图第227行命中一个断点，然后一直点击“按语句执行”按钮到第229行。如果我再次单击“按语句执行”按钮会怎么样？将进入下面的js:

这些都是zepto库文件的内容，没什么好看的。里面的操作非常复杂，所以我们不能一直使用“按语句执行”按钮，这样长时间按下去你会发现你还在库文件里绕圈子。这个时候该怎么办？然后是“逐步”按钮播放的时间。

上图：

我同时在第227行和第237行遇到了一个断点。当我们运行到第229行时，直接点击“逐步”按钮，你会发现js直接跳过了库文件，运行到了第237行，你可以自己体验一下。

最后总结：

主要介绍了三个工具：“按语句执行”按钮、“按进程执行”按钮和控制台，以及调试bug时的一些思路。工具的用法我就不赘述了，只要你知道用法，知道如何更合理的使用，需要通过大量的实践来总结和完善~

其实本文我想讲的是调试bug的一个想法，但是选出来的例子涉及的东西太多了。写的内容恐怕都太长了，大家都没兴趣看，我就简单选了一些给大家讲解一下，不知道大家有没有收获。虽然我用三句话调试了很多东西，但是如果你在实际项目中也像我这样做，估计你调试一个Bug的时间会比写一个脚本的时间长很多。在实际情况中，我们应该培养第一时间得到问题，在脑海中检查问题，找到最有可能的点。如果我们不能快速检查出最重要的一点，那么你可以使用最麻烦但可靠的方法，使用“逐句执行”按钮依次执行与问题相关的整个js。在执行的过程中，也要理清思路，注意每个变量的值以及选择器选择的元素是否正确。

所以，个人认为，我们调试bug的思路应该是这样的：第一，js是否实现成功；其次，js是否存在逻辑问题、变量问题、参数问题等等；最后，如果以上没有问题，请仔细检查符号。

好了~断点就到这里~不懂的同学可以在下面留言~如果有不懂的知识点或者对前端比较迷茫的，也可以在下面留言。你有空的时候，我会继续为你的留言写一些文档~