js断点调试经验分享(必看)

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行，所以我称之为“分步执行”或者“分步执行”。这个功能非常实用，大部分调试都会用到。

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

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

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

第一种：

操作步骤如下：

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

第二种类型：

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

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

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

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

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

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

这应该是初学者常见的问题。为什么不能在控制台直接输出变量值而不中断？个人认为，此时我只是一个局部变量。如果你不打断这一点，浏览器将解析所有的js。console不能访问局部变量，只能访问全局变量。因此，控制台将报告我此时未定义。但是，当js突破这一点时，console解析局部变量I所在的函数，此时可以访问我。

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

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

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

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

上图：

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

这些都是zepto库文件的内容，没什么好看的。在里面跑是很复杂的。我们不能总是使用“按语句执行”按钮，所以你会发现你仍然按了很长时间。这个时候该怎么办？那就该玩“一步一步”按钮了。

上图：

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

最后总结一下：

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

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

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

以上js断点调试经验分享(必看文章)是边肖分享的全部内容。希望能给大家一个参考，支持我们。