必要的JS调试技巧总结

前言：任何程序员都不能调试代码，无论你是新手还是新手，调试程序都是必要的工作。它往往反映了程序员和分析问题的精度水平在调试过程中，很多初学者总是错过点寻找错误的原因，花了很多时间，但是不能解决一些最终证明是很简单的错误。掌握各种调试技巧，可以肯定的是，我们可以在工作事半功倍。例如，快速定位问题，降低故障概率，对逻辑错误的分析，等等。和互联网前端的发展越来越重要的今天。如何降低开发成本，提高前端开发的工作效率，掌握前端开发调试技能尤为重要。

本文将讲解各种前端JS调试技巧。也许你已经掌握了它。让我们一起复习。也许有一些你以前没见过的方法。你不妨一起学习。也许你还不知道如何调试，并利用这个机会填补空白。

1。骨灰大师调试警报

那就是互联网刚刚起步的时代。web前端主要是基于内容表示。浏览器脚本只能为页面提供一种非常简单的辅助功能。当时，网页在IE6浏览器主要运行为主。js的调试功能仍然很弱。它可以通过内置于窗口对象的警报方法进行调试。
需要说明的是，你看到的效果，这是不是在今年的IE浏览器看到的效果，但效果之一。此外，高版本，似乎是在同一年没有这样的先进主机和报警的使用也在真实的页面JS代码。虽然调试警报的方式非常原始，它在当时有其不可磨灭的价值，即使在今天，它有它的用途。

2。新一代调试器控制台

随着越来越多的东西，JS可以在Web前端，责任越来越大，而地位越来越重要。传统的报警调试方法已经逐渐不能满足前端开发的各种场景，调试信息，提醒调试模式弹出窗口，这不是很美丽的，它会阻止一些页面的内容，它并不是很友好。

另一方面，警惕的调试信息必须添加到程序逻辑如警报（xxxxx），它能正常工作，报警将阻碍继续渲染的页面。这意味着开发人员必须手动清理调试代码，经过调试，这真的有点一个麻烦。

因此，新一代的浏览器，Firefox和Chrome浏览器，包括IE，推出了JS调试控制台，它支持的console.log形式使用（XXXX）来打印，而不是直接影响页面的显示控制台信息调试。以IE为例，它看起来像这样：
嗯，看到丑陋的警报pop-up.and Chrome浏览器，为首的后起之秀，控制台扩展更丰富的功能：
你认为那是你满意的吗Chrome开发团队的想象力真的值得钦佩。
嗯，稍微有点跑题。总之，控制台的出现和浏览器内置的控制台对象带来了很大的方便和前端开发调试。

有人会问，调试代码完成后需要清理吗

在这个问题上，如果在使用控制台对象之前存在验证，它实际上不会对业务逻辑造成损害，而不会删除。当然，对于干净的代码，在调试之后，应该尽可能地删除与业务逻辑无关的调试代码。

3、js断点调试

断点是调试器的功能之一，它允许程序在需要时中断，以便于分析。断点也可以在调试中设置。下一次，只需要程序自动运行到断点的位置，这样就可以在断点设置的最后一个位置中断，大大方便了操作，节省了时间。百度百科

js断点调试是在浏览器开发工具中为js代码添加断点，并让js执行到某个特定的位置停止。开发人员对代码段进行分析和处理非常方便，为了能够观察断点调试的效果，我们准备提前编写一个js代码：
代码非常简单，它是定义一个函数，传入两个数，添加一个随机数的随机整数，然后返回两个数字的和，以Chrome开发工具为例，让我们来看看JS断点调试的基本方法。

3.1，源断点

首先，在测试代码中，我们可以看到代码应该通过上控制台的输出正常运行，但为什么要这样做呢因为一个随机数被添加到函数中，最终结果是真的吗这是一个毫无意义的猜想，但是假设我现在试着验证这两个数字，加上的随机数，以及函数的最终总和，那么该怎么办呢

首先，最常用的一种，不管是使用警报还是控制台，我们都可以验证：
从以上发现，我们在代码中添加了三行控制台代码，我们用来打印有关变量的数据，最后我们从控制台（控制台面板）中输出，可以清楚地验证整个计算过程是正常的，从而验证了问题集的要求。

方法二：在方法1的验证过程中存在明显的缺陷，即添加了大量冗余代码。接下来我们将看看使用断点来验证是否更方便，首先我们将看看如何添加断点，断点后的效果如何。
例如，添加断点的一块代码的过程是F12键（Ctrl + Shift + I）来打开开发工具——单击菜单--来源发现左树对应的文件——单击行号列后添加时，执行刷新网页JS断点位置停在源接口将所有的变量和值的范围，只需要验证每个问题设置的值，我们可以完成验证的要求。

这就是问题所在。一个亲密的朋友会发现，当代码被执行到断点时，变量a和b的值已经添加。在调用和函数时，我们不能看到初始的10和20，那么我应该怎么做呢这是回去学习断点调试的一些基本知识：
从左到右，每个图标的功能如下所示：
暂停/恢复脚本执行：暂停/恢复脚本执行（程序执行到下一个断点停止）。
单步执行下一个函数调用：执行下一步的函数调用（跳转到下一行）。
进入下一个函数调用：输入当前函数。
跳出当前函数：跳出当前执行函数。
停止/活跃的所有断点：关闭/打开所有断点（不是取消）。
关于异常的暂停：异常的自动断点设置。

这里，断点调试的功能键几乎相同。接下来，我们可以一次一次地看到我们的程序代码，并看到每行执行后每个变量的变化。
如上所述，我们可以看到a和b的变量从初始值到中间加上一个随机值，然后最后求和和计算结果的最终输出，完成验证要求是没有什么困难的问题。

剩下的函数键，我们稍微更改一下测试代码，并使用GIF图来演示它们的用法：
这里注意一点，直接在代码区打印变量的函数是在一个新的Chrome浏览器功能的版本，如果你还在使用老版本的Chrome浏览器，不得直接在断点查看变量信息的情况下，你可以移动鼠标到变量名上短暂的一个变量的值就会出现。你也可以用鼠标选择的变量的名称，然后右键添加表在表面板的角度看，这也适用于表达。此外，你还可以切换到控制台面板在断点处，进入变量名直接在控制台，并返回到变量的信息。这部分比较简单，考虑到空间问题而不做插图。

3.2、调试器断点

所谓调试器断点实际上是我自己的名字，我不知道该怎么说，具体地说，通过在代码中添加调试器语句，当代码被执行到语句时，代码就会自动崩溃，下一个操作几乎与在源面板上添加断点一样。唯一的区别是调试后，需要删除它。

由于设置断点的方式不同，该函数与添加到源面板的断点效果相同，那么为什么它会以这种方式存在呢我认为原因是这样的：我们偶尔会在发展中遇到的异步加载HTML片段（包括嵌入式JS代码），这是在源树不能的js代码的一部分被发现，因此不能直接在开发工具直接添加断点，所以如果你想添加一个断点异步加载脚本，这个时候调试器将发挥作用；。我们看GIF图的直接影响。
4、DOM断点调试

DOM断点，顾名思义，是在DOM元素上添加断点，以达到调试的目的。中断的实际使用效果最终在JS逻辑中。

4.1。当节点内部节点发生变化时断点（在子树修改上中断）

随着前端开发越来越复杂，前端JS代码越来越多，逻辑也越来越复杂。一个看似简单的网页，通常伴随着大量的js代码，涉及到许多DOM节点的添加、删除和修改操作，很难遇到直接通过JS代码定位代码段的困难，但我们可以通过开发人员的工具面板快速找到相关的DOM节点。此时，通过DOM断点定位脚本尤为重要。
上面的图演示了添加、删除和切换顺序操作来触发UL子节点（LI）的效果。不过，重要的是要注意，对子节点的属性修改和内容修改不会触发断点。

4.2。当节点属性更改时断点（中断属性修改）

另一方面，由于前端处理业务逻辑越来越复杂，也越来越强烈地依赖于一些数据的存储，并在DOM节点的自定义属性存储临时数据在许多情况下是开发商的首选方式。尤其是当HTML5标准提高自定义属性支持（例如：数据集、数据等），属性设置应用越来越多。因此，Chrome开发工具也提供属性更改断点支持。
还需要注意的是，子节点属性的任何操作都不会触发节点本身的断点。

4.3，当节点被移除时，断点（断开节点删除）

这个DOM断点设置很简单，和触发方式是明确的-当节点删除。所以通常情况下应该使用这种方法时，执行parentnode.removechild（子结点）的说法。这种方式用的不多。

我们以前介绍的基本上是我们日常开发中经常使用的调试方法。当应用得当时，它们几乎可以处理我们日常开发中的几乎所有问题。然而，开发工具也考虑到更多的情况，提供更多断点，如图表：
5、XHR Breakpoints

翻天覆地的变化，这些年的前端开发发生了，从原来的未知今天流行的AJAX驱动的Web应用的丰富，移动WebApp的单页应用快。这一切都不可能从XMLHttpRequest对象分离，和XHR断点只是一个断点调试异步。
我们可以通过+号在XHR断点右边的异步断点添加断点条件。当异步请求触发的URL来满足这一条件，JS逻辑会自动生成断点，断点的位置不是在演示动画，因为演示使用jQuery的Ajax方法封装，代码已经被压缩，也可以看到效果，但事实上，XHR断点的位置是xhr.send（）语句。

XHR断点的强度，我们可以自定义规则的断点。这意味着我们可以为一个批处理设置断点，一个甚至所有的异步请求，这是非常强大的。但是，看来这个功能不是在日常的开发使用，至少我不用多考虑两点原因：第一，这种类型的断点调试的需要日常业务本身涉及不多；其次，前端开发阶段主要是基于JS框架，基本的jQuery已经对Ajax封装好了，很少人拥有Ajax方法包，和项目为了减少代码大小通常选择压缩的代码库，使得XHR断点跟踪相对不那么容易。

6、事件侦听器断点

事件侦听器的断点，这是基于断点的事件的名称。当事件被触发时，断点是对事件绑定的位置，侦听事件爆发，列出所有的网页和脚本事件，包括鼠标，键盘，动画，定时器，XHR，等等。这就大大降低了调试事件的业务逻辑困难。
示范演示了断点的效果时，单击事件被触发时，setTimeout设置。实例表明，当单击事件断点选择断点触发时，两按钮点击，当setTimeout设置，设置定时器触发断点。

调试是项目开发中非常重要的一个环节。它不仅能帮助我们快速找到问题，而且还能节省我们的开发时间。精通调试手段，将给你的职业发展带来很多好处，但是，在这么多的调试方法中，如何在当前的应用中选择合适的场景，这需要经验，需要不断的积累。

在这里，基本上可以说是Qingnangerchu，希望能引起你的注意，希望能够让你感到丝毫的触摸，感觉有些似曾相识的感觉。最重要的我还是希望你能很快地提高你的技能，使自己的技术牛仔！