1.什么是断点调试？很难吗？调试其实并不是一件复杂的事情。简单地知道没有出站调用就是打开浏览器，打开源代码找到js文件，然后单击行号。 操作起来好像很简单。其实很多人纠结的是，中断点在哪里？(先来看一张断点截图，以chrome浏览器的断点为例。)还记得步骤吗？用chrome浏览器打开页面→按f12打开开发者工具→打开源代码→打开要调试的js代码文件→点击行号，确定！恭喜你处女断点，哈哈~~2。如何正确命中断点？中断操作很简单，核心问题是，如何打到断点才能查出代码的问题？我继续举个例子给你理解，不多废话。上图:假设我们现在正在实现一个加载更多工作的功能，如上图所示，但是现在加载更多工作的时候出现了问题。单击后，不会加载数据。第一时间应该想到什么？(把答案写在新的一行，你可以看到你的第一反应是什么。)我的第一个想法是，我是不是点击成功了？click事件中的方法是否正在运行？好了，如果你想知道这个问题的答案，我们就试着一下子做一个断点。断点在哪里？先为自己考虑。 上图:你想到了吗？没错，既然我们想知道点击是否能成功，当然在代码中的click事件处添加一个断点。切记不要添加226行，因为执行的是click方法中的函数，而不是226行的选择器。 现在断点已经打到，下一步该怎么做？你自己想想吧~继续上图:然后当然我们会回去点击加载更多按钮。为什么？额 如何在不点击加载更多按钮的情况下触发click事件？如何在不触发click事件的情况下执行click事件中的函数？咆哮 不过，我相信你不会问这么低级的问题~别瞎说~我们继续正题吧。上图是点击加载更多按钮后的情况。我们可以看到左侧页面被半透明层覆盖，页面上方有一串英文和两个按钮。右边的227行代码已经添加了背景色。出现这种情况。不考虑那些按钮的英文意思和用法，你从这张图片中得到了什么信息？继续琢磨~如果出现上图所示的情况，说明click事件中的函数已经被调用，进一步说明click事件生效了。 那么我们对于这个问题的第一个“犯罪嫌疑人”已经排除了。 补充:不出现以上情况怎么办？这是否意味着点击事件没有生效？是什么原因导致点击事件没有生效？大家自己想想吧~导致click事件无法生效的原因有很多，比如不止一个选择器的错误，语法的错误，选中元素的后期生成等等。 怎么处理？选择器错误，您可以继续查看控制台的内容。我想你会知道如何解决语法错误。仔细检查。如果你不熟悉语法，那就和所选的元素对比一下。最简单的解决方案是使用。on()方法来解决。这个东西是委托事件解析的，介绍可以自己做。 那么接下来“犯罪嫌疑人”的身份锁定在哪里呢？我们看事件内部，click事件被触发，然后下一个问题就是它的内部函数。 如果要问为什么？请给我一块豆腐。 比如我给你一支笔让你写，然后你在纸上写了一个字，但是没有出来。为什么？你说是我写的，纸上有划痕。 有没有可能是钢笔没墨水或者笔尖坏了？这个例子比点击加载更合理。书写的动作是点击操作，内部功能是墨水或笔尖。 你明白吗？接下来我们来分析一下click事件的内容，包含三句话。第一句是变量I自增，第二句是给按钮加一个I标签，第三句是如何使用请求的数据。 利用这三句话本身，我们可以把怀疑的很大一部分放在第三句，小部分放在第一句和第二句。可能有人会疑惑，第二句怎么会有嫌疑？他的作品的用途只是加了一个标签，对数据完全没有影响。的确，这句话对数据没什么影响，但严谨考虑，还是会出错的。比如少了一个分号怎么办？还是句子有符号错误？往往就是这种小问题浪费了我们很多时间。 好了，为了进一步针对“犯罪嫌疑人”，我给你一个工具进行详解，也是上图所示的两个图标之一。见下图:这个小图标的功能可以叫做“逐句执行”或者“分步执行”。这是我个人知道的一个名字，意思是你每点击一次，js语句就会晚执行一句，而且它还有一个快捷键，F10。 下图演示了点击后的效果:我两次点击这个按钮(或者用F10快捷键)，js代码从227行执行到229行，所以我称之为“按语句执行”或者“逐步执行” 这项工作可以实际使用，大多数调试都会用到。 太晚了，明天继续写，好戏还在后头呢~——————————————————————————————————————————————————————————————————————————————————————————你认为这意味着什么？是不是说明前两句语法正确，那么是不是也说明前两句排除了嫌疑？我想并非如此 众所周知，加载更多的是下一页的一个功能，最核心的一个是传递给后端的页码。我每点击一次加载更多按钮，页码就会增加1，那么如果下一页的数据没有出来，有没有可能是页码有问题，也就是【I变量】(以下统称为I)？那么如何检查页码是否有问题呢？我们自己想想吧。 这里有两种方法可以检查页码i]的实际输出值。上图:第一种方式:操作步骤如下:1。还是在227 → 2行做一个断点。单击加载更多按钮→ 3。点击一次“逐句执行”按钮，js代码会执行到第228 → 4行。用鼠标选择i++(什么意思，你不知道选择？就是你要复制一个东西，你要选择它吗？对，就是这个选择)→ 5。选择后，将鼠标悬停在目标上，您将看到上面的结果。 第二种方法:这种方法和第一种类似，只是在控制台上输出I的值。你要做的就是按照第一种方法进行第3 → 4步。在与sources → 5相同的列中打开控制台。在控制台下方的输入字段中输入i → 6。只要按下回车键。 在上面的第二种方法中，提到了控制台。我们可以称之为控制台或任何其他可以做的事情。没关系~主机可以很强大。在调试的过程中，我们经常需要知道一些变量的值实际输出的是什么，或者我们是否可以用选择器[$ "选择想要的元素。div”)等。，可以打印在控制台上。 当然，第一种方法可以直接使用。 向您展示如何打印我们想要在控制台中选择的元素。 Above ~在控制台输入$(this)获取选中的元素。没错，就是我们点击的对象——加载更多的按钮元素。 在这里，我来说说我对console的理解:这个东西是一个js解析器，是浏览器自己用来解析和运行js的，但是浏览器允许我们开发者通过console来控制调试过程中js的运行和输出。 通过以上两种方法，你可以感觉到使用起来很简单，但是我想给你一个提示，或者有人说是小部分新手比较容易遇到的困惑。 困惑1:我被不间断的输入到控制台，控制台报错。 这应该是新手很常见的问题。为什么我不能不中断直接输出控制台中变量的值？就我个人而言，此时我只是一个局部变量。如果不破点，浏览器会解析所有的js。控制台不能访问局部变量，只能访问全局变量，所以控制台会报告I未定义。但是js破点的时候控制台解析成局部变量I的函数，这个时候就可以访问I了。 惑儒:为什么打$("就能打印出东西。xxx”)直接在控制台？很简单，console本身就是一个js解析器，而$(“。xxx”)是一个js语句，因此console自然可以解析这个语句，然后输出结果。 详细介绍了"分步执行"按钮以及如何使用控制台控制台，最后详细介绍了一个按钮。上图:我把这个按钮叫做“分步执行”按钮。与“分步执行”按钮不同，“分步执行”按钮经常在一个方法中使用多个js文件时使用，当涉及的js代码较长时会用到。 上图:假设我在上图第227行只做了一个断点，然后点击“逐句执行”按钮，直到第229行。如果我再次点击“逐句执行”按钮会怎么样？它会进入下图的js:这些都是zepto库文件的内容，没什么好看的，里面的操作很复杂。我们不能总是使用“逐句执行”按钮，这样你会发现按了一天的大部分时间，你还是在库文件里打转。 这时候我该怎么办？然后就是“一步一步”按钮发挥的时候了。 上图:我在227行做了一个断点，也在237行。当我们运行到第229行时，点击“逐步”按钮，你会发现js直接跳过了库文件，运行到了第237行。可以自己体会。 最后，本文主要详细介绍了三个工具，即“一步一步”按钮、“一步一步”按钮和控制台控制台，以及调试bug时的几点想法。 工具的用法我就不赘述了，只要你会用就行，而如何更恰当的使用需要你通过大量的实践来总结和完善~其实这篇文章我主要是想说一个调试bug的思路，但是因为选取的例子涉及的东西太多了。 我怕写下来的内容都太长了，大家都没兴趣看，所以干脆选了一部分给大家讲解一下，不知道大家有没有收获。 虽然我在调试三句中写过很多东西，但是如果你在实际项目中也这样做，预计调试一个bug的时间会比写一个脚本的时间长很多。 实际情况下，我们应该在第一时间得到问题的时候进行培养，自己在头脑中检查问题，找出最可能和最有可能的点。如果我们不能快速检查出最重要的点，那么你可以用最麻烦但可靠的方法，使用“逐句执行”按钮，依次执行与问题相关的整个js。在执行的过程中，还要理清思路，注意每个变量的值和选择器选择的元素是否正确。 所以个人认为，我们调试bug的思路应该是:第一，js能否成功实现；其次，js能不能有逻辑问题、变量问题、参数问题等等；最后，如果以上没有问题，请仔细检查符号。