友情提示：文中涉及较多Gif演示动画，移动端请尽量在Wifi情况中浏览

媒介：调试技能，在任何一项技巧研发中都可谓是必弗成少的技能。控制各类调试技能，必定能在工作中起到事半功倍的效不雅。譬如，快速定位问题、降低故障概率、赞助分析逻辑缺点等等。而在互联网前端开辟越来越重要的今天，如安在前端开辟中降低开辟成本，晋升工作效力，控制前端开辟调试技能尤为重要。

本文将一一讲解各类前端JS调试技能，也许你已经闇练控制，那让我们一路来复习，也许有你没见过的办法，不妨一路来进修，也许你尚不知若何调试，赶紧趁此机会弥补空白。

骨灰级底时倔年夜师Alert

其余几个功能键，我们稍微修改一下我们的测试代码，用一张gif图来演示他们的应用办法：

那照样互联网方才起步的时代，网页前端还重要以内容展示为主，浏览器脚本还只能为页面供给异常简单的帮助功能的时刻。那个时刻，网页重要运行在以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代码：

起首，测试代码中我们经由过程上图console的输出结不雅可以看出代码应当是正常运行了，然则为什么是应当呢?因为函数中加了一个随机数，而最终结不雅是否真的是精确的呢?这是毫无意义的猜想，然则假设我如今就是要验证一下：函数传入的两个数、被加的随机数，以及最终的总和。那么该怎么操作呢?

代码很简单，就是定义一个函数，传入两个数，分别加上一个混乱无章的随机整数后，再返回两个数的总和。以Chrome开辟者对象为例，我们来看一下JS断点调试的根本办法。

Sources断点

如图，给一段代码添加断点的流程是“F12(Ctrl + Shift + I)打开开辟对象”——“点击Sources菜单”——“捉崾调中找到响应文件”——“点击行号列”即完成在当前行添加/删除断点操作。当断点添加完毕后，刷新页面JS履行到断点地位停住，在Sources界面会看到当缁?用域中所有变量和值，只需对每个值进行验证即可完成我们题设验证请求。

　　推荐阅读

　　从机器学习谈起

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

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

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

 1/2    1