456lives.com - 舒适慢生活

专享优惠券-淘宝天猫最热门优惠券清单 阿里旅行-前往世界的尽头 【聚名品】奢品潮流风向标 省钱优惠圈 精品女装 靓丽全场
文字广告45元/月 聚划算专享优惠 文字广告45元/月 文字广告45元/月 文字广告45元/月
京东居家生活 日用精品 抽免单+抽红包,福利抽不停 天猫超市-今日疯抢 多款好货任你抢 全球精选-享品质生活 广告合作客服QQ:253482037

前端JS开发中的调试与技巧

时间:2017-06-30 09:41:06 | 作者:本站编辑 | 来源:网络 | 查看:315 | 评论:0

摘要: 调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,...

        调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。

        慢生活的小编将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白。

        骨灰级调试大师Alert

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

前端JS开发中的调试与技巧

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

        新一代调试王者Console

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

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

        所以,新一代的浏览器Firefox、Chrome,包括IE,都相继推出了JS调试控制台,支持使用类似”console.log(xxxx)”的形式,在控制台打印调试信息,而不直接影响页面显示。好吧,再见丑陋的alert弹出框。而以Chrome浏览器为首的后起之秀,为Console扩展了更丰富的功能:

前端JS开发中的调试与技巧

        你以为这样就满足了?Chrome开发团队的想象力实在不得不让人佩服:

前端JS开发中的调试与技巧

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

        有人会问,这样的调试代码不一样需要在调试完成后进行清理吗?

        关于这个问题,如果在使用console对象之前先进性存在性验证,其实不删除也不会对业务逻辑造成破坏。当然,为了代码整洁,在调试完成后,还是应尽可能删除这些与业务逻辑无关的调试代码。

        JS断点调试

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

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

前端JS开发中的调试与技巧

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

        Sources断点

        首先,测试代码中我们通过上图console的输出结果可以看出代码应该是正常运行了,但是为什么是应该呢?因为函数中加了一个随机数,而最终结果是否真的是正确的呢?这是毫无意义的猜想,但是假设我现在就是要验证一下:函数传入的两个数、被加的随机数,以及最终的总和。那么该怎么操作呢?

        方法一,前面讲过最普通的,无论使用alert还是console,我们可以这么来验证:

前端JS开发中的调试与技巧

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

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

前端JS开发中的调试与技巧

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

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

前端JS开发中的调试与技巧

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

        1.Pause/Resume script execution:暂停/恢复脚本执行(程序执行到下一断点停止)。

        2.Step over next function call:执行到下一步的函数调用(跳到下一行)。

        3.Step into next function call:进入当前函数。

        4.Step out of current function:跳出当前执行函数。

        5.Deactive/Active all breakpoints:关闭/开启所有断点(不会取消)。

        6.Pause on exceptions:异常情况自动断点设置。

        到此,断点调试的功能键介绍得差不多了,接下来我们就可以一行一行去看我们的程序代码,查看每一行执行完毕之后,我们各个变量的变化情况了,如下图所示:

前端JS开发中的调试与技巧

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

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

前端JS开发中的调试与技巧

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

上一页 1 2 下一页
  • 0
    惊讶
  • 0
    欠揍
  • 0
    支持
  • 0
    很棒
  • 0
    愤怒
  • 0
    搞笑
  • 0
    恶心
  • 0
    不解
此篇文章已有0人参与评论

请发表评论

热门评论

精选资讯


免责申明:本站部份内容来源自互联网,如果侵害了您的合法权益,请您及时与我们联系,我们会在第一时间给予改正和删除。

Powered by 舒适慢生活 Copyright © 2013-2023, All Rights Reserved京ICP备13024987号-4京公网安备11010602030047号京公网安备11010602030047号

工作时间:7x24小时联系QQ:253482037服务热线:188****4459活动洽谈:188****4459联系邮箱:253482037@qq.com