前端js调试的一些小技巧

浏览数：26 / 时间：2015年06月09日

　　===前言===

　　此文根据本人长期js开发以及团队协作中遇到的一些问题的汇总。本文强调调试技巧，具体的代码逻辑实现本文不做深入讲解。本文所有场景均使用chrome作为开发浏览器。

　　掌握这些小技巧能有效的提高你的工作效率或降低低级错误出现的的几率。任何读者如果发现本文的任何错误请及时指出，也可以通过评论进行问题补充。

　　===场景===

　　A、表单提交

　　许多前端习惯按照以下流程编写表单程序。

　　1、编写html。

　　2、绑定form的submit事件，验证各表单项。

　　3、表单验证成功则提交表单，失败则提示错误。

　　接下来同学就开始调试。每修改一次代码后就刷新页面，重填表单，点击提交。从开发流程上来说，上述步骤完全没问题。但在调试阶段如果出现错误处理起来就稍微有些繁琐。可以使用以下步骤来减轻调试繁琐度。

　　1、编写html。

　　2、为所有表单项设置正确合法的默认值。

　　3、点击提交，确保后端逻辑（或者ajax接口）无误之后去掉默认值。

　　4、绑定form的submit事件，验证各表单项。

　　5、表单验证成功则提交表单，失败则提示错误。

　　B、本地时间

　　应该大多数同学都编写过基于本地时间的程序。比如页面秒表、倒计时、日历等等。调试阶段很多同学应该也是通过修改本地时间来达到不同情况的模拟。

　　上图是典型的windows用户修改本地时间的界面。好的，一切是那么的熟悉，虽然这个方法是最直接也是最有效的方法。这里我还是给大家介绍个更加便捷的方案。

 1 var getNow = (function () {
 2     //DEBUG 为false则返回真实时间，ture 则返回模拟时间。
 3     var DEBUG = true;
 4 
 5     //通过修改年、月、日 时 分 秒 毫秒 来达到某个时间的模拟。
 6     var now = new Date(2014, 10, 24, 0, 0, 0, 0).getTime();
 7     var begin = new Date();
 8     return function () {
 9         if (DEBUG) {
10             var t = new Date().getTime();
11             now += t - begin;
12             begin = t;
13             return new Date(now);
14         }
15         return new Date();
16     };
17 })();