JavaScript常见调试方法

编辑导语：javascript调试方法，常见使用alert和console来定位出错和输出的结果是不是想要的，在chrome中，还可使用断点来看运行的状况等，本文介绍了比较全面的调试方法，你知道console.table,console.log('%c前端开发博客','font-size:40px');一块儿看看。

前言：调试技巧，在任何一项技术研发中均可谓是必不可少的技能。掌握各类调试技巧，一定能在工做中起到事半功倍的效果。譬如，快速定位问题、下降故 障几率、帮助分析逻辑错误等等。而在互联网前端开发愈来愈重要的今天，如何在前端开发中下降开发成本，提高工做效率，掌握前端开发调试技巧尤其重要。

本文将一一讲解各类前端JS调试技巧，也许你已经熟练掌握，那让咱们一块儿来温习，也许有你没见过的方法，不妨一块儿来学习，也许你尚不知如何调试，赶忙趁此机会填补空白。

骨灰级调试大师Alert

那仍是互联网刚刚起步的时代，网页前端还主要之内容展现为主，浏览器脚本还只能为页面提供很是简单的辅助功能的时候。那个时候，网页主要运行在以IE6为主的浏览器中，js的调试功能还很是弱，只能经过内置于Window对象中的alert方法来调试，那时候看起来应该是这个样子：

须要说明一点，这里看到的效果，并不是当年的IE浏览器中看到的效果，而是在高版本IE中的效果。此外，当年貌似尚未这么高级的控制台，而alert的使用也是在真实的页面JS代码中。虽然，alert的调试方式很原始，但当时确实有它不可磨灭的价值，甚至到今天，已然有其用武之地。

新一代调试王者Console

随着JS在web前端中能作的事情愈来愈多，责任愈来愈大，而地位也愈来愈重要。传统的alert调试方式已经渐渐不能知足前端开发的种种场景。并且alert调试方式弹出的调试信息，那个窗口着实不太美观，并且会遮挡部分页面内容，着实有些不太友好。

另外一方面，alert的调试信息，必须在程序逻辑中添加相似”alert(xxxxx)”这样的语句，才能正常工做，而且alert会阻碍页面的继续渲染。这就意味着开发人员调试完成后，必须手动清除这些调试代码，实在有些麻烦。

因此，新一代的浏览器Firefox、Chrome，包括IE，都相继推出了JS调试控制台，支持使用相似”console.log(xxxx)”的形式，在控制台打印调试信息，而不直接影响页面显示。以IE为例，它看起来像这样：

好吧，再见丑陋的alert弹出框。而以Chrome浏览器为首的后起之秀，为Console扩展了更丰富的功能：

你觉得这样就知足了？Chrome开发团队的想象力实在不得不让人佩服：

好了，稍微多说了一点点题外话。总之，控制台以及浏览器内置Console对象的出现，给前端开发调试带来了极大的便利。

有人会问，这样的调试代码不同须要在调试完成后进行清理吗？

关于这个问题，若是在使用console对象以前先进性存在性验证，其实不删除也不会对业务逻辑形成破坏。固然，为了代码整洁，在调试完成后，仍是应尽量删除这些与业务逻辑无关的调试代码。

JS断点调试

断点，调试器的功能之一，可让程序中断在须要的地方，从而方便其分析。也能够在一次调试中设置断点，下一次只需让程序自动运行到设置断点位置，即可在上次设置断点的位置中断下来，极大的方便了操做，同时节省了时间。——百度百科

JS断点调试，便是在浏览器开发者工具中为JS代码添加断点，让JS执行到某一特定位置停住，方便开发者对该处代码段的分析与逻辑处理。为了可以观察到断点调试的效果，咱们预先随意准备一段JS代码：

代码很简单，就是定义一个函数，传入两个数，分别加上一个乱七八糟的随机整数后，再返回两个数的总和。以Chrome开发者工具为例，咱们来看一下JS断点调试的基本方法。

Sources断点

首先，测试代码中咱们经过上图console的输出结果能够看出代码应该是正常运行了，可是为何是应该呢？由于函数中加了一个随机数，而最终结果 是否真的是正确的呢？这是毫无心义的猜测，可是假设我如今就是要验证一下：函数传入的两个数、被加的随机数，以及最终的总和。那么该怎么操做呢？

方法一，前面讲过最普通的，不管使用alert仍是console，咱们能够这么来验证：

从上图发现，咱们在代码中新增了三行console代码，用以打印咱们关心的数据变量，而最终咱们从控制台（Console面板）中的输出结果，能够很清楚的验证整个计算过程是否正常，进而达到咱们题设的验证要求。

方法二，方法一的验证过程存在很明显的弊端就是，添加了不少冗余代码，接下来咱们看一下使用断点进行验证，是否更加方便，先看一个如何加断点，以及断点后是什么效果：

如图，给一段代码添加断点的流程是“F12（Ctrl + Shift + I）打开开发工具”——“点击Sources菜单”——“左侧树中找到相应文件”——“点击行号列”即完成在当前行添加/删除断点操做。当断点添加完毕 后，刷新页面JS执行到断点位置停住，在Sources界面会看到当前做用域中全部变量和值，只需对每一个值进行验证便可完成咱们题设验证要求。

那问题来了，仔细的朋友会发现当个人代码执行到断点的时候，显示的变量a和b的值是已经进行过加法运算后的，咱们看不到调用sum函数时初始传入的 10和20。那么该怎么办呢？这就要回过头来先学习一下断点调试的一些基础知识了。咱们打开Sources面板后其实会在界面中看到以下内容，咱们跟着鼠 标轨迹逐一看看都是什么意思：

从左到右，各个图标表示的功能分别为：

• Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点中止）。
• Step over next function call：执行到下一步的函数调用（跳到下一行）。
• Step into next function call：进入当前函数。
• Step out of current function：跳出当前执行函数。
• Deactive/Active all breakpoints：关闭/开启全部断点（不会取消）。
• Pause on exceptions：异常状况自动断点设置。

到此，断点调试的功能键介绍得差很少了，接下来咱们就能够一行一行去看咱们的程序代码，查看每一行执行完毕以后，咱们各个变量的变化状况了，以下图所示：

如上，咱们能够看到a、b变量从最初值，到中间加上随机值，再到最后计算总和并输出最终结果的整个过程，完成题设验证要求不在话下。

其他几个功能键，咱们稍微改动一下咱们的测试代码，用一张gif图来演示他们的使用方法：

这里须要注意一点，直接在代码区打印变量值的功能是在较新版本的Chrome浏览器中才新增的功能，若是你还在使用较老版本的Chrome浏览器， 可能没法直接在断点的状况下查看变量信息，此时你能够将鼠标移动到变量名上短暂停顿则会出现变量值。也能够用鼠标选中变量名称，而后右键“Add to watch”在Watch面板查看，此方法一样适用于表达式。此外，你还能够在断点状况下，切换到Console面板，直接在控制台输入变量名称，回车查 看变量信息。该部分比较简单，考虑篇幅问题，不在作图演示。

Debugger断点

所谓的Debugger断点，实际上是我本身给它命名的，专业术语我也不知道怎么说。具体的说就是经过在代码中添加”debugger;”语句，当代 码执行到该语句的时候就会自动断点。接下去的操做就跟在Sources面板添加断点调试几乎如出一辙，惟一的区别在于调试完后须要删除该语句。

既然除了设置断点的方式不同，功能和Sources面板添加断点效果同样，那么为何还会存在这种方式呢？我想缘由应该是这样的：咱们在开发中偶尔会遇到异步加载html片断（包含内嵌JS代码）的状况，而这部分JS代码在Sources树种没法找到，所以没法直接在开发工具中直接添加断点，那么若是想给异步加载的脚本添加断点，此时”debugger;”就发挥做用了。咱们直接经过gif图看看他的效果：

DOM断点调试

DOM断点，顾名思义就是在DOM元素上添加断点，进而达到调试的目的。而在实际使用中断点的效果最终仍是落地到JS逻辑以内。咱们依次来看一下每一种DOM断点的具体效果。

当节点内部子节点变化时断点（Break on subtree modifications）

在前端开发愈来愈复杂的今天，前端JS代码愈来愈多，逻辑愈来愈复杂，一个看似简单的Web页面，一般伴随着大段大段的JS代码，涉及诸多DOM节 点增、删、改的操做。不免遇到直接经过JS代码很难定位代码段的状况，而咱们却能够经过开发者工具的Elements面板，快速定位到相关DOM节点，这 时候经过DOM断点定位脚本就显得尤为重要了。具体咱们仍是经过gif演示来看一下吧：

上图演示了对ul子节点（li）的增长、删除以及交换顺序操做触发断点的效果。但须要注意的是，对子节点进行属性修改和内容修改并不会触发断点。

当节点属性发生变化时断点（Break on attributes modifications）

另外一方面，因为前端处理的业务逻辑愈来愈复杂，对一些数据的存储依赖愈来愈强烈，而将临时数据存储于DOM节点的（自定义）属性中，是不少状况下开发者优先选择的方式。特别是在HTML5标准加强自定义属性支持（例：dataset、data-*之类）以后，属性设置应用愈来愈多，所以Chrome开发者工具也提供了属性变化断点支持，其效果大体以下：

此方式一样须要注意，对子节点的属性进行任何操做也不会触发节点自己的断点。

当节点被移除时断点（Break on node removal）

这个DOM断点设置很简单，触发方式很明确——当节点被删除时。因此一般状况应该是在执行”parentNode.removeChild(childNode)”语句的时候使用此方式。此方式使用很少。

前面介绍到的基本上是咱们在平常开发中常常用到的调试手段，运用得当它们也几乎能应对咱们平常开发中的几乎全部问题。可是，开发者工具还考虑到了更多的状况，提供更多的断点方式，如图：

XHR Breakpoints

这几年前端开发发生了翻天覆地的变化，从当初的名不见经传到现在的盛极一时，ajax驱动Web富应用，移动WebApp单页应用风生水起。这一切都离不开XMLHttpRequest对象，而“XHR Breakpoints”正是专为异步而生的断点调试功能。

咱们能够经过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件，当异步请求触发时的URL知足此条件，JS逻辑则会自动产生断点。演示动画中并无演示到断点位置，这是由于，演示使用的是jQuery封装好的ajax方法，代码已通过压缩，看不到什么效果，而事实上XHR断点的产生位置是”xhr.send()”语句。

XHR断点的强大之处是能够自定义断点规则，这就意味着咱们能够针对某一批、某一个，乃至全部异步请求进行断点设置，很是强大。可是，彷佛这个功能 在平常开发中用得并很少，至少我用得很少。想一想缘由大概有两点：其一，这类型的断点调试需求在平常业务中自己涉及很少；其二，现阶段的前端开发大多基于 JS框架进行，最基本的jQuery也已经对Ajax进行了良好封装，极少有人本身封装Ajax方法，而项目为了减小代码体积，一般选择压缩后的代码库， 使得XHR断点跟踪相对不那么容易了。

Event Listener Breakpoints

事件监听器断点，即根据事件名称进行断点设置。当事件被触发时，断点到事件绑定的位置。事件监听器断点，列出了全部页面及脚本事件，包括：鼠标、键盘、动画、定时器、XHR等等。极大的下降了事件方面业务逻辑的调试难度。

演示实例演示了当click事件被触发时和当setTimeout被设置时的断点效果。实例显示，当选中click事件断点以后，两个按钮的被点击时都触发了断点，而当setTimeout被设置时，“Set Timer”断点被触发。

调试，是在项目开发中很是重要的环节，不只能够帮助咱们快速定位问题，还能节省咱们的开发时间。熟练掌握各类调试手段，定当为你的职业发展带来诸多利益，可是，在如此多的调试手段中，如何选择一个适合本身当前应用场景的，这须要经验，须要不断尝试积累。