一探前端开发中的JS调试技巧

办法一，前面讲过最通俗的，无论应用alert照样console，我们可以这么来验证：

XHR断点的强大年夜之处是可以自定义断点规矩，这就意味着我们可以针对某一批、某一个，甚至所有异步请求进行断点设置，异常强大年夜。然则，似乎这个功能在日常开辟顶用抱病不多，至少我用得不多。想想原因大年夜概有两点：其一，这类型的断点调试需求在日常营业中本身涉及不多;其二，现阶段的前端开辟大年夜多基于JS框架进行，最根本的jQuery也已经对Ajax进行了优胜封装，极少有人本身封装Ajax办法，而项目为了削减代码体积，平日选择紧缩后的代码库，使得XHR断点跟踪相对不那么轻易了。

大年夜上图发明，我们在代码中新增了三行console代码，用以打印我们关怀的数据变量，而最终我们大年夜控制台(Console面板)中的输出结不雅，可以很清跋扈的验证全部计算过程是否正常，进而达到我们题设的验证请求。

办法二，办法一的验证过程存在很明显的弊病就是，添加了很多冗余代码，接下来我们看一下应用断点进行验证，是否加倍便利，先看一个若何加断点，以及断点后是什么效不雅：

那问题来了，细心的同伙会发明当我的代码履行到断点的时刻，显示的变量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>
如上，我们可以看到a、b变量大年夜最初值，到中心加上随机值，再到最后计算总和并输出最终结不雅的┞符个过程，完成题设验证请求不在话下。
这里须要留意一点，直接在代码区打印变量值的功能是在较新版本的Chrome浏览器中才新增的功能，如不雅你还在应用较老版本的Chrome浏览器，可能无法直接在断点的情况下查看变量信息，此时你可以将鼠标移动到变量名上短暂逗留则会出现变量值。也可以用鼠标选中变量名称，然后右键“Add to watch”在Watch面板查看，此办法同样实用于表达式。此外，你还可以在断点情况下，切换到Console面板，直接在控制台输入变量名称，回车查看变量信息。该部分比较简单，推敲篇幅问题，不在做图演示。
Debugger断点
所谓的Debugger断点，其实是我本身给它定名的，专业术语我也不知道怎么说。具体的说就是经由过程在代码中添加”debugger;”语句，现代码履行到该语句的时刻就会主动断点。接下去的操作就跟在Sources面板添加断点调试几乎一模一样，独一的差别在于调试完后须要删除该语句。
DOM断点调试
DOM断点，顾名思义就是在DOM元素上添加断点，进而达到调试的目标。而在实际应用中断点的效不雅最终照样落地到JS逻辑之内。我们依次来看一下每一种DOM断点的具体效不雅。
当节点内部子节点变更时断点(Break>
上图演示了对ul子节点(li)的增长、删除以及交换次序操作触发断点的效不雅。但须要留意的是，对子节点进行属性修改和内容修改并不会触发断点。
当节点属性产生变更时断点(Break>
当节点被移除时断点(Break>
XHR Breakpoints
这几年前端开辟产生了翻禀赋地的变更，大年夜当初的名不见经传到如今的盛极一时，Ajax驱动Web富应用，移动WebApp单页应用风生水起。这一切都离不开XMLHttpRequest对象，而“XHR Breakpoints”恰是专为异步而生的断点调试功能。
我们可以经由过程“XHR Breakpoints”右侧的“+”号为异步断点添加断点前提，当异步请求触发时的URL知足此前提，JS逻辑则会主动产生断点。演示动画中并没有演示到断点地位，这是因为，演示应用的是jQuery封装好的ajax办法，代码已经由紧缩，看不到什么效不雅，而事实上XHR断点的产生地位是”xhr.send()”语句。
2/3 首页上一页 1 2 3 下一页尾页

　　推荐阅读

　　从机器学习谈起

下图是机械进修所牵扯的一些相干范围的学科与研究范畴。在本篇文┞仿中，我将对机械进修做个概要的介绍。本文的目标是能让即便完全不懂得机械进修的人也能懂得机械进修，并且上手相干的实>>>详细阅读

本文标题：一探前端开发中的JS调试技巧

地址：http://www.17bianji.com/lsqh/34960.html

1/2 1