h5首页网站模板:前端开发中JS调试技巧,你知道几种?用过几种?
本文摘要: 调试技巧,在任何一项技能研发中都可谓是必不可少的技能。把握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、下降故障概率、协助分析逻辑过错等等。而在互联网前端开发愈来愈重要的今天,怎么在前端开发
调试技巧,在任何一项技能研发中都可谓是必不可少的技能。把握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、下降故障概率、协助分析逻辑过错等等。而在互联网前端开发愈来愈重要的今天,怎么在前端开发中下降开发本钱,提高工作功率,把握前端开发调试技巧尤为重要。


本文将逐个说明各种前端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)的添加、删除以及交换顺序操作触发断点的效果。但需要留意的是,对子节点进行属性修正和内容修正其实不会触发断点。

当节点属性发生变化时断点


另外一方面,因为前端处理的事务逻辑愈来愈杂乱,对一些数据的存储依赖愈来愈强烈,而将暂时数据存储于DOM节点的(自界说)属性中,是很多状况下开发者优先选择的方式。特别是在HTML5规范增强自界说属性支撑(例:dataset、data-*之类)之后,属性设置应用愈来愈多,因此Chrome开发者东西也提供了属性变化断点支撑,其效果大致如下:


此方式相同需要留意,对子节点的属性进行任何操作也不会触发节点本身的断点。

当节点被移除时断点


这个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”断点被触发。


多年开发老码农福利赠送:网页制造,网站开发,web前端开发,从最零基础开始的的HTML+CSS+JavaScript。jQuery,Vue、React、Ajax,node,angular框架等到移动端小程序项目实战【视频+东西+电子书+体系道路图】都有整理,需要的同伴可以私信我,发送“前端”等3秒后就能够获取收取地点,送给每一位对编程感爱好的小同伴


【免责声明】本文仅代表作者或发布者个人观念,不代表(www.lmnkf.cn)及其所属公司官方发声,对文章观念有疑义请先联络作者或发布者自己修正,若内容触及侵权或违法信息,请先联络发布者或作者删除,若需我们协助请联络平台管理员,Emailcxb5918(本平台不支撑其他投诉反馈渠道,谢谢合作)。若需要学习以上相关常识请到巨推学院观看视频教程,网站地址www.tsllg.cn。

相关内容