必备的JS调试技巧汇总

前言:任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作。一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度。不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。

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

1、骨灰级调试大师Alert

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

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

2、新一代调试王者Console

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

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

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

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

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

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

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

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

3、JS断点调试

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

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

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

3.1、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面板,直接在控制台输入变量名称,回车查看变量信息。该部分比较简单,考虑篇幅问题,不在做图演示。

3.2、Debugger断点

所谓的Debugger断点,其实是我自己给它命名的,专业术语我也不知道怎么说。具体的说就是通过在代码中添加"debugger;"语句,当代码执行到该语句的时候就会自动断点。接下去的操作就跟在Sources面板添加断点调试几乎一模一样,唯一的区别在于调试完后需要删除该语句。

既然除了设置断点的方式不一样,功能和Sources面板添加断点效果一样,那么为什么还会存在这种方式呢?我想原因应该是这样的:我们在开发中偶尔会遇到异步加载html片段(包含内嵌JS代码)的情况,而这部分JS代码在Sources树种无法找到,因此无法直接在开发工具中直接添加断点,那么如果想给异步加载的脚本添加断点,此时"debugger;"就发挥作用了。我们直接通过gif图看看他的效果:

4、DOM断点调试

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

4.1、当节点内部子节点变化时断点(Break on subtree modifications)

在前端开发越来越复杂的今天,前端JS代码越来越多,逻辑越来越复杂,一个看似简单的Web页面,通常伴随着大段大段的JS代码,涉及诸多DOM节点增、删、改的操作。难免遇到直接通过JS代码很难定位代码段的情况,而我们却可以通过开发者工具的Elements面板,快速定位到相关DOM节点,这时候通过DOM断点定位脚本就显得尤其重要了。具体我们还是通过gif演示来看一下吧:

上图演示了对ul子节点(li)的增加、删除以及交换顺序操作触发断点的效果。但需要注意的是,对子节点进行属性修改和内容修改并不会触发断点。

4.2、当节点属性发生变化时断点(Break on attributes modifications)

另一方面,由于前端处理的业务逻辑越来越复杂,对一些数据的存储依赖越来越强烈,而将临时数据存储于DOM节点的(自定义)属性中,是很多情况下开发者优先选择的方式。特别是在HTML5标准增强自定义属性支持(例:dataset、data-*之类)之后,属性设置应用越来越多,因此Chrome开发者工具也提供了属性变化断点支持,其效果大致如下:

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

4.3、当节点被移除时断点(Break on node removal)

这个DOM断点设置很简单,触发方式很明确——当节点被删除时。所以通常情况应该是在执行"parentNode.removeChild(childNode)"语句的时候使用此方式。此方式使用不多。

前面介绍到的基本上是我们在日常开发中经常用到的调试手段,运用得当它们也几乎能应对我们日常开发中的几乎所有问题。但是,开发者工具还考虑到了更多的情况,提供更多的断点方式,如图:

5、XHR Breakpoints

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

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

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

6、Event Listener Breakpoints

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

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

调试,是在项目开发中非常重要的环节,不仅可以帮助我们快速定位问题,还能节省我们的开发时间。熟练掌握各种调试手段,定当为你的职业发展带来诸多利益,但是,在如此多的调试手段中,如何选择一个适合自己当前应用场景的,这需要经验,需要不断尝试积累。

写到这里,基本上可以说是倾囊而出了,希望能引起你的注意,希望能够让你感到一丝的触动,感到一些似曾相识。最主要的我还是希望你能够快速提高自己的技能,让自己成为技术牛人!

(0)

相关推荐

  • 使用Chrome调试JavaScript的断点设置和调试技巧

    你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各

  • 灵活应用js调试技巧解决样式问题的步骤分享

    由于种种原因,例如:代码逻辑复杂.时间久了遗忘处理细节.或者根本就是接手修改别人遗留的bug,在这种情况下,debug就会变成一件头疼的事情. 在此分享一些JS调试方面的技巧,针对各种疑难杂症,往往能起到较好的效果. Step 1:检查服务器直接render出来的内容 使用查看源文件的方式,这一步首先明确,页面HTML片段是否在服务器端就已经不正常了. Step 2:比较实际的HTML内容和服务器render出来的原始内容之间的差异 可以使用一些前端工具(例如:IE下的开发人员工具.Firebu

  • JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • JavaScript的兼容性与调试技巧

    关于JavaSctipt的兼容性,最懒的办法就是用jQuery的工具函数.尽量不要用那些什么ECMAScript之类的函数,因为很多浏览器都会报找不到函数的错误.下面列出一些在开发过程中碰到过的javascript问题. 1.参数列表多个逗号. $.ajax({})方法,非常熟悉了吧,但是在IE中有个小地方要注意,如果你在拼接参数列表的时候最后一个也加了逗号,那么毫无疑问,IE下全部JS失效. 调试时报如下错误: 缺少标识符.字符串或数字 data: { S_Id: Subject_Id, le

  • JS高级调试技巧:捕获和分析 JavaScript Error详解

    反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就刷新啊?之前的操作岂不要完全重做?所以我们还是有必要捕获和分析这些异常信息的,然后我们就可以修改代码避免影响用户体验. 捕获异常的方式 我们自己写的 throw new Error() 想要捕获当然可以捕获

  • 分享一则javascript 调试技巧

    不用alert,用console.log() 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function showLog(message){     console.log(message); } function test(name){     showLog(name); } test("hello"); <

  • 推荐5 个常用的JavaScript调试技巧

    我之前使用过用printf debugging,自此之后我用这种方法似乎总能更快地解决bug. 在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处: 1. debugger; 你可以使用"debugger;"语句在代码中加入强制断点. 需要断点条件吗?只需将它包装它在IF子句中: 复制代码 代码如下: if (somethingHappens) { debugger; } 只需记住在上线前移除. 2. 当节点变化时断开 有时DOM像有了自己的想法.当不可

  • 概述javascript在Google IE中的调试技巧

    今天,发现了一个之前从未注意的角落,相信能够大大提高自己写JS的速度.能够迅速发现错误. 例如,今天的加班中调试一个js错误发现的一个例子. 1.Google浏览器报的错 以上是google浏览器报的错误,只报一个错误文件,相信是什么地方由null调用了length属性导致的.由于这是一个已经维护了几年的系统,人来人往,不知道经历了几个人之手.而且业务逻辑极其复杂,js文件都上千行.要一个length一个length的排除,显然是不切实际的. 2014.3.18 今天才知道,唉,原来google

  • 必备的JS调试技巧汇总

    前言:任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度.不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,

  • JavaScript必备的断点调试技巧总结(推荐)

    目录 为什么要使用 debugger Chrome debugger 基本用法 VS Code 调试 SPA 应用 Chrome 调试 Nodejs 使用 VS Code 调试 Nodejs Conditional Breakpoint 条件断点 总结 为什么要使用 debugger 这篇文章将介绍如何使用断点来进行 JavaScript 调试.在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试? 我们需要了解使用断点的必要性,否则下文介绍的所有断点调试方法都会是废话.console.

  • Visual Studio调试技巧汇总

    调试是软件开发周期中很重要的一部分.它具有挑战性,同时也很让人疑惑和烦恼.总的来说,对于稍大一点的程序,调试是不可避免的.最近几年,调试工具的发展让很多调试任务变的越来越简单和省时. 1 悬停鼠标查看表达式值 调试是很有挑战性的.比如在函数内逐步运行可以看出哪里出错,查看堆栈信息可以知道函数被谁调用等等. 但是无论哪种情况下,查看表达式和局部变量的值都是很麻烦的(把表达式和局部变量放到watch窗口里). 一种更简单的方法,把鼠标停在所需查看的数据上.如果是类或结构,那么点击展开可以很方便快速地

  • JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

    本文实例总结了JS数组排序技巧.分享给大家供大家参考,具体如下: ① 冒泡排序 bubbleSort:function(array){ var i = 0, len = array.length, j, d; for(; i<len; i++){ for(j=0; j<len; j++){ if(array[i] < array[j]){ d = array[j]; array[j] = array[i]; array[i] = d; } } } return array; } ② js

  • Chrome调试折腾记之JS断点调试技巧

    JS调试技巧技巧 一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置 技巧三:查看断点内部的作用范围[很实用] 右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等.. 技巧4:监听事件断点 右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘

  • JS 模态对话框和非模态对话框操作技巧汇总

    模态窗口 javascript 技巧汇总(传值.打开.刷新) 1.要弹出的页面中,一定要保证<head></head>标签间有<base target="_self">,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面. 2.被弹出页面的按钮的事件处理中,应该有Response.Write(new Function().ClosePage());语句,用以关闭当前的模态窗口. 3.因为幽默的缓存原因,如果你在模态窗口中修改了数据,你会发现,父

  • js经验分享 JavaScript反调试技巧

    在此之前,我一直都在研究JavaScript相关的反调试技巧.但是当我在网上搜索相关资料时,我发现网上并没有多少关于这方面的文章,而且就算有也是非常不完整的那种.所以在这篇文章中,我打算跟大家总结一下关于JavaScript反调试技巧方面的内容.值得一提的是,其中有些方法已经被网络犯罪分子广泛应用到恶意软件之中了. 对于JavaScript来说,你只需要花一点时间进行调试和分析,你就能够了解到JavaScript代码段的功能逻辑.而我们所要讨论的内容,可以给那些想要分析你JavaScript代码

  • JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)

    本文实例讲述了JS实用技巧.分享给大家供大家参考,具体如下: js屏蔽错误 把下面的代码放在JS脚本中 <script type="text/javascript"> window.onerror = function(){ alert("出现脚本错误"); return true; } alert(b); </script> 注意:定义onerror事件应该在出错之前,否则任然会出现脚本错误 如何防止设置DIV出现滚动条? style=&q

  • 静态页面html中跳转传值的JS处理技巧

    本文实例讲述了静态页面html中跳转传值的JS处理技巧.分享给大家供大家参考,具体如下: 在html中通过"?"传值: <a href="index2.html?name=caoy">静态传值</a> 在跳转到的页面index2.html中接收: var name=UrlParm.parm("name"); 代码如下: index.html: <script type="text/javascript&qu

随机推荐