JS 代码调试经验总结（菜鸟必读）

名人名言：人的一生只有一次青春。——朗费罗 

本文转自JavaEye      作者：zTreeAPI     原文连接：http://www.iteye.com/topic/1124479

任何一个编 程者都少不了要去调试代码，不管你是高手还是菜鸟，调试法度都是一项必不成少的工作。一般来说调试法度是在编写代码之后或测试期批改Bug 时进行的，往往在调试代码时代加倍可以或许表现出编程者的程度凹凸以及解析题目的正确度。不少初学者在寻找错误原因时，老是不得方法，花费了多量时候却无法解 决一些终极证实是相当简单的Bug。

在长久解答 zTree 相干题目时，也的确发明很多的题目其实不算什么题目，仅仅是编程者不会调试造成的，经由过程本身日常工作调查，这里面有立场题目也有思虑题目的体式格式办法，故总 结一下本身经验，以供大师参考（尤其是菜鸟）， 对于高手来讲，若是你愿意看完这篇文章，也很是迎接拍砖和供给建议，我信赖如许可以络续让这篇文章充分并完美起来，必然也可以帮助到更多的伴侣。

试想一下：呈现了某个bug，有人用几分钟就搞定了，有人用了半天或者一天都找不到原因地点。你愿意当前者还是后者呢？想当前者的就请好都雅完本篇文章吧。

本篇文章主 如果帮助大师在调试代码时，如何建树解决题目的思路。所以并不会专门介绍不合浏览器的具体调试办法。（在网上关于 chrome、firefox、ie 等浏览器的具体调试办法已经有很多了，这里就不一一描述啦。）别的，俗话说的好——“js、html 和 css 是一家”，是以在讲述中也会稍带有html 和 css 的内容。

一、 碰到错误怎么办？

辛辛苦苦写 了一大段代码却无法运行，怎么办？……前两天还正常的代码怎么今天报错了，怎么办？……同样的代码在这个页面正常怎么到了另一页面就出题目了，怎么 办？……这些景象你都碰到过吗？是否被错误搞得焦头烂额、表情烦躁？（“不管路途有多么遥远，有几许艰苦险阻，都不成能阻挡我进步的法度！”——唐师傅）

 

1、 调剂心态

呈现题目很正常，其实不出题目反倒不太正常。所以当发明题目的时辰我们须要沉着。不要在乎身后站着的是谁，不要在乎间隔上线时候还有几个小时，让本身安静冷静僻静下来，深呼一口气——来吧，不就是个小题目嘛。所有的Bug都在我的掌控之中！

禁忌：出了题目就找人辅佐，如许会导致经常打搅别人，并且也晦气于本身的技能提拔。只有当本身经过一番尽力后，的确找不到解决办法时再去寻求帮助。并且提出题目时，也要尽量将题目描述清楚。

 

2、 寻找特点

解决错误的前提是要发明错误，发明错误的前提嘛…当然是要去“寻找”喽！对于简单的报错信息完全可以哄骗调试对象的提示：xxxx行呈现什么什么错误。若是这则信息100％有效，那么你就不须要再看这篇文章了。

我们碰见的错误表象一般分为以下几种

• 直接呈报 js 语法错误

这种一般最轻易解决，不须要我来空话了……

• js 报错，但报错地址不是出题目的根源

 

这种景象大项目组可以解决，但有时辰完全不知道是从哪里引用过来的，这种时辰会相当的头疼。

• js 无报错，但功能无效

 

这种景象更糟糕，完全没有头绪了……那我告诉你，往往这种时辰终极解决错误的办法更轻易。

按照特点，往往可以或许快速定位错误的可能地位，便于进一步查找题目。

3、 思疑一切

当有人告诉 你代码有题目时，我们的第一反响经常是：“不成能！”，“你是不是看错了？”，“我刚才运行还好好地呢！”若是你有以上设法，那么须要重视喽！这些设法很 危险，若是想解决题目，那么我们就要去思疑任何有可能的工作，要以特点为主，不要主观断定哪些处所必然不会失足。

 

二、 如何让错误现出本相？

前面主如果为了让我们能有一个杰出的心态来处理惩罚题目，情感对峙沉着可以让我们的思维加倍急迅，抓住特点可以让我们更快的找到线索，思疑一切可以让我们有更多的思路去发明错误。（“不把妖孽打得显出本相，就别想翻过这座山！”——猴哥）

1、 化繁为简

临床发挥解析：莫名其妙的报错，不便利调试，纯真看代码无法申明失足原因。

首要病因：js脚本冲突、Css冲突、DOM的ID冲突、DOM标签缺失等多种因为冲突产生的bug根源

排查办法：谙练应用 Delete / Backspace 键，对代码络续进行区域删除，直到症状消散，最后一次删除的区域很可能就是导致错误的根源。进一步查找根源可以在目标区域应用更小单位的区域定义反复应用此办法。

重视：

• 对于 js 代码建议分别以类库 ? 功能 ? 行 为单位进行删除测试
  
• 对于 HTML 代码建议遵守页面布局先删除最内部的 tag，由内及外，如许可以敏捷发明因为 tag 缺失造成的错误，同时也能包管每次删除的都是整段的代码，避免因为删除产生新的错误。
  
• 对于 css 代码建议遵守css文件 ? 定义的class系列 ? 行 为单位批量进行删除测试

忌：对于确认与相干功能有关的项目组不要随便删除。

副感化：应用此办法也可以很好的确认错误原因是js造成的还是css造成的。

 

2、 顺藤摸瓜

临床发挥解析：错误信息较正确，可以或许遵守提示的错误逐层跟踪，应用“化繁为简”可以或许根蒂根基定位的错误类型

首要病因：根蒂根基语法错误、逻辑错误、不严谨（最常见的有：数组下标越界，null空指针导致的对象找不到，undefined未初始化，NaN数字策画错误等）

排查办法：哄骗浏览器的调试对象（F12是个很好的功能键）：跟踪代码；哄骗console.log 输出监控对象（IE无效）；哄骗 alert监控（最无奈的办法，用于极端景象）；把调试代码加载报错号令行的前面，一般都邑有奇效！

重视：

• 对于无js 报错的景象，直接调试无效功能的代码即可。有时辰会发明之所以功能无效的原因居然是没有调用该代码！（是不是很好笑？我承认我犯过这种错误。）
  
• 逻辑错误往往不太轻易想清楚，这时辰可以恰当连络“化繁为简”的思路进行调试。
  
• 当你应用的是类似于 jQuery 这种js库时，若是报错信息处于js库内，起首要调换为未紧缩的js代码进行调试，然后解析是本身的哪段代码会调用相干功能。

忌：钻牛角尖！当遵守此办法仍无法找到错误根源时，申明这并不是一个正确的错误信息，必然有其他潜伏的身分在产生错误。立即更改切入点，不要在一个处所长时候浪费时候。（这种时辰，可以参考下一个办法：“反复对比”）

3、 反复对比

临床发挥解析： 应用通俗办法很难定位错误，前两种办法怎么用都还是找不到头绪。

首要病因： 逻辑错杂、功能互相绑定难以剥离、页面对象内容错杂、有的页面正常有的页面不正常、兼容题目等

排查办法： 对于这种错杂的麻烦，排查办法也会很繁琐，但并不是什么希罕高深的技巧，只是须要多做一些体力活儿罢了。

• 办法一：搜检可疑的代码，细化功能点，每次只批改一个处所，批改一次就测试一次，直到发明导致错误的关键代码。
  
• 办法二：建造最简单的Demo 只实现须要的功能，当功能正常后，与失足的正式代码进行斗劲（斗劲中可以恰当应用办法一）
  
• 办法三：以正常功能（或失足）的代码为原型，批改一个处所就生成一个测试的备份，每个测试的案例都只有一处与原始代码不合，编上号码，在特别景象下一一测试，搜检导致错误的根源（我曾经用这个办法解决了韩文体系下IE8加载公司内部flash 不克不及正常发声的bug）

 

重视：

• 应用此法必然要有耐烦
  
• 此办法技巧含量低，任何人都可以快速把握，解决某些疑难杂症根蒂根基上可以说是华陀再世！

忌： 浮躁、忽略

4、 堆集经验

临床发挥解析：项目组浏览器报错、事务响应异常、js操纵DOM无效、PC 和 触屏体系功能不一致等

首要病因：各类兼容题目

排查办法：对于某些有明显特点的报错要熟记于胸，看到这些景象能立即想到应当是哪些原因导致的。（最明显的例子：Json对象多了一个逗号的景象，只有ie报错）

重视：

• 有个很根蒂根基的题目，但有很多初学者失足——没有搞清楚页面 html、css、js 的加载次序，导致js 操纵失败。（去Google 或 Baidu 搜刮：“html css js 加载次序”）
  
• 日常工作要细心，勤调查。卖力对待每一次查找错误的工作，对于项目组很是特别的景象可以记下来。
  
• 谙练哄骗 Google、Baidu 等搜刮引擎，有时辰本身第一次碰到的景象，别人早都知道如何解决了。

忌：粗心大意、不求甚解

 

5、 细节决意成败

以上四种查找错误的办法全部都依附于一个核心——细节！细节往往比你的技巧程度更首要。说一句夸大点儿的话，能有几许那么高深的技巧等着你去做？好好把本身手上的工作卖力完成吧！但请记住了，当你看重细节今后，你间隔去做高深技巧的机会应当也就不远了。

 

三、 如何批改错误？

老法度员们应当已经深有领会，改Bug 最头疼的还是找错，一旦找到错误后，真正解决题目可能真的是只有几分钟。下面针对一些常见的错误原因与批改思路总结一下：

 

1、 根蒂根基语法、说话根蒂根基

逗号、分号、双引号、单引号 以及 各类括号 估计都曾导致过你的代码错误吧？这些器材记牢，必须知道什么时辰应当应用什么，不要为了简化代码而精简这些符号。

例如：if / for 等语句后面的 { } 最好还是带上吧。

补充，对于js中的Number 数字的局限欲望大师有必然的懂得，因为这个局限必然和后台说话中的Long不一样的。（已经有不止一个伴侣跟我说 zTree 会主动批改节点的id，当我看到案例后，本来是数字溢出了！）

 

2、 前提严谨

对 Array 或者操纵对象属性时，尽可能让前提断定语句写的完全、周全一些。

例如：断定 a.abc 的时辰，最好别忘了断定 a 是否存在；或者操纵Array时先断定一下Array 是否存在，要操纵的下标是否越界等。

 

3、 重视兼容（css & js）

警惕项目组浏览器不一致或者失足的景象，很多景象都是兼容造成的。若是本身经验不敷，直接去Google 或者 Baidu。慢慢的本身经常接触到的一些兼容题目就会紧记下来了。

补充，有时辰要重视页头 W3C的定义，曾经有伴侣问我 zTree 异常的题目，终极发明是 W3C只写了一半。

 

4、 逻辑陷阱

前提过于错杂；轮回、断定反复嵌套都是轻易导致逻辑陷阱的身分。碰到这种景象，若是本身其实无法解决那么请个身边的高手来吧，让他帮你讲解一下。我信赖，除了那些有点儿自闭的人来说，别人都邑愿意帮助你解决题目的（前提是你本身别太遭人恨了，呵呵）

补充：多去看看有关 重构 的技巧册本！会让你进步很多的。

 

5、 异步加载

其实异步加载呈现的题目往往属于逻辑陷阱，但我必必要提出来专门讲述，因为在这上方出错的人太多了！！！！这里专门具体讲述一遍处理惩罚办法：

• 对于异步加载呈现了异常，请遵守以下贱程进行一一排查：

1）页面是否有报错，是否履行到 ajax 项目组的代码？（若是正常请看下一条）

2）用浏览器的调试对象监控收集，ajax 加载的url 地址是否正确？（若是正常请看下一条）

 

3）用浏览器的调试对象监控收集，传递给url 的参数是否正确？（若是正常请看下一条）

 

4）用浏览器的调试对象监控收集，从url 返回的数据是否正确？（若是正常请看下一条）

5）在 ajax 的success中编写调试代码，调试异步加载后的处理惩罚办法是否正确

若是以上几步都正常，那么我可以告诉你异步加载本身是一切正常的，还有错怎么办？持续往下看

• 当异步加载断定正常后，就须要推敲另一个首要题目，也就是我在上一篇文章《这些年我们爱犯的弱智错误（菜鸟必看）》中专门讲述的易犯的错误——异步加载的忽视

1）切切不要在履行了 ajax 之后立即去履行应当在异步加载完成之后再运行的代码。因为你履行这段代码的时辰，ajax底子没有完成呢。（最明显的现象：运行不时好时坏，但若是我参加了alert 会发明每次都正常了）

这种景象，请将你的代码转移到 ajax的 success 或 error 里面去履行

2）当你设置了某些特别开关时，必然不要忘了在 ajax 的error 里面进行重置，不然很可能因为一次收集异常，就会造成你的页面js 功能失效。这种错误经常是地雷级此外，很难被发明。

6、 神奇的setTimeout

对于移动设备 或者 某些特别景象，可以恰当推敲应用 setTimeout 来解决题目。

我碰到斗劲特例的景象：有两个js的事务因为不合的功能在同时对同一个DOM操纵时会导致IE8溃散，显然这是IE的bug，但我无法去请求微软做什么…终极应用 setTimeout 让此中一个功能延迟100-200毫秒再履行，轻松搞定！

 

7、 别在一棵树上吊死

做前真小我 都很愁闷要适配n多的浏览器，往往会碰到一些本身无法解决的题目（因为是浏览器bug 造成的），碰到这种景象怎么办？一般来说寻找一下有没有 hacker的办法，若是没有，那么就换一种思路，看看是否可以有其他规划来实现类似的功能。若是各类尽力都做了…还有人不合意的话，那么告诉他浏览器的 bug，让项目经管者来决意到底如何处理惩罚吧——这种景象死而无憾了！

写到这里，根蒂根基上可以说是倾囊而出了，欲望能有一点点引起你的重视，欲望可以或许让你感觉一丝的触动，感觉一些似曾了解。最首要的我还是欲望你可以或许快速进步本身的技能，拿到多多的工资，让本身成为技巧牛人！