前端js调试的一些小技巧

页面导航:首页 > 网络编程 > JavaScript > 前端js调试的一些小技巧

前端js调试的一些小技巧

来源: 作者: 时间:2016-02-20 09:49 【

此文根据本人长期js开发以及团队协作中遇到的一些问题的汇总。本文强调调试技巧,具体的代码逻辑实现本文不做深入讲解。本文所有场景均使用chrome作为开发浏览器。 掌握这些小技
此文根据本人长期js开发以及团队协作中遇到的一些问题的汇总。本文强调调试技巧,具体的代码逻辑实现本文不做深入讲解。本文所有场景均使用chrome作为开发。
 
  掌握这些小技巧能有效的提高你的工作效率或降低低级错误出现的的几率。任何读者如果发现本文的任何错误请及时指出,也可以通过评论进行问题补充。
 
  ===场景===
 
  A、表单提交
 
  许多前端习惯按照以下流程编写表单程序。
 
  1、编写。
 
  2、绑定form的submit事件,验证各表单项。
 
  3、表单验证成功则提交表单,失败则提示错误。
 
  接下来同学就开始调试。每修改一次代码后就刷新页面,重填表单,点击提交。从开发流程上来说,上述步骤完全没问题。但在调试阶段如果出现错误处理起来就稍微有些繁琐。可以使用以下步骤来减轻调试繁琐度。
 
  1、编写html。
 
  2、为所有表单项设置正确合法的默认值。
 
  3、点击提交,确保后端逻辑(或者ajax接口)无误之后去掉默认值。
 
  4、绑定form的submit事件,验证各表单项。
 
  5、表单验证成功则提交表单,失败则提示错误。
 
  B、本地时间
 
  应该大多数同学都编写过基于本地时间的程序。比如页面秒表、倒计时、日历等等。调试阶段很多同学应该也是通过修改本地时间来达到不同情况的模拟。
 
  
 
  上图是典型的用户修改本地时间的界面。好的,一切是那么的熟悉,虽然这个方法是最直接也是最有效的方法。这里我还是给大家介绍个更加便捷的方案。
 
复制代码
 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 })();
复制代码
  这样代码中的new Date()替换为getNow(),在需要模拟修改时间的时候,设置DEBUG为true,然后指定模拟的时间。切记,调试完毕将DEBUG设置为false。
 
  C、设置chrome跨域
 
  当你在本地开发js且需要跨域调用远程接口的时候。可按照下列步骤设置你的chrome。
 
  1、创建chrome快捷方式。
 
  
 
  2、右键属性新的快捷方式,在目标一栏后面追加 "--args --disable-web-security"。
 
  
 
  3、关闭所有chrome,从新的快捷方式启动。当出现以下黄条则说明设置成功。
 
  
 
  D、正则表达式
 
  如果你的正则不是非常好,那么在编写正则的时候不妨先在正则测试工具中测试你的正则,确保无误后再带入代码中。尽量避免在你的代码中反复调试正则表达式。
 
  在线正则测试工具:http://tool.oschina.net/regex
 
  
 
  ===总结===
 
  本文所提到的任何点都非常的基础,也没有写的太全面。有独到见解或者好的调试技巧可以回复我。
 
  任何程序员的时间都是非常宝贵的,平均一个程序员一天中的有效编码时间也就2-4小时。不要让调试浪费你过多的时间。
 
  我曾亲眼目睹,同学在表单验证-》表单提交入库的功能上反复填写表单,提交表单,这样来回几十个回合后找到错误源头,我看的也是醉了。
 
  我曾亲眼目睹,同学为了配合后端开发调试后端ajax接口本地搭建了20多个php、java的代码环境。
 
  因此,这也是我为什么写下这篇文章的目的。
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<