前端js调试的一些小技巧

  ===前言===

  此文根据本人长期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 })();

  这样代码中的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的代码环境。

  此次,这也是我为什么写下这篇文章的目的。

时间: 2024-10-05 05:32:03

前端js调试的一些小技巧的相关文章

【转】js调试信息输出小技巧

原文地址:http://blog.csdn.net/jom_ch/article/details/864574 通常我们在做简单的js调试输出的时候习惯用 alert  函数,这个函数也能解决大多数问题,但遇到如循环输出,滚动条状态监控,鼠标位置等场景的时候,alert就相当的不方便了,下面这个函数可以解决这个问题: [javascript] view plaincopy <script type="text/javascript"> function __js_debug

Chrome控制台 JS调试的一些小技巧

$ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择过的DOM节点.在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined. Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选

python 设计及调试的一些小技巧

在"笨办法学习python"中介绍了一些设计函数以及调试技巧: 参考网址:http://www.jb51.net/shouce/Pythonbbf/latest/ex36.html If 语句的规则? 每一个"if 语句"必须包含一个 else. 如果这个 else 永远都不应该被执行到,因为它本身没有任何意义,那你必须在 else 语句后面使用一个叫做 die 的函数,让它打印出错误信息并且死给你看,这和上一节的习题类似,这样你可以找到很多的错误. "i

【js】中的小技巧

本文主要介绍一些JS中用到的小技巧 1. 类型强制转换   1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN '32' * 1            // 32 'ds' * 1            // NaN null * 1            // 0 undefined * 1    // NaN 1  * {

js调试的一点小知识

1.如果想要js代码被XHTML和HTML解析,就可以使用如下方式 <script type="text/javascript"> //<![CDATA[ function(){ …… } //]]> </script> 2.在调试器中可以通过callStack看到函数执行的过程. 3.控制台比较有用的函数 console.log():输出日志 console.trace():堆栈函数,可以查看指定函数的调用关系 clear():清除控制台中的log

让你的JS更优雅的小技巧

首先,看一个非常不优雅的例子: 看到这段代码,虽然代码很短,但是一眼看上去就不想再看了,也就是没什么可读性.这段代码,没有封装,随意定义一个变量都是全局变量,这样在多人开发或者是大型开发中,极其容易造成所谓的脏读. 那么,该怎样把JS写得优雅一些呢?下面总结了几点供大家参考(如有错误,欢迎指正!): ①巧用闭包将函数变量变为局部变量,基本格式为: ;(function(){ ... })() 解释一下,最前面的分号,主要是为了防止在与别人的代码合并的时候出错,例如以下情况: var lucky=

前端切图的一些小技巧

昨天晚上花了1个小时把慕课网上的PS切图教程看了一遍,发现之前用的切图方式有点low,还学习到一些设置技巧,在此记录. 1.新建页面,背景内容设置为透明,自动选择不用打勾,后面的框选图层,这样按住ctrl鼠标点击就能快速找到对应图层 2.标尺和智能参考线都打上勾 3.历史记录,图层,信息,字符4个面板都打开,面板选项中鼠标坐标设置为像素,文档尺寸打勾,颜色都选为RGB 4.新建工作区,存储 5.按shift可以智能吸附 6.保存时的jpg品质60刚刚好,画质好体积又小 7.图片不是太大的时候,可

作为一枚web前端开发工程师 这些CSS 小技巧你值得掌握

http://web.jobbole.com/85142/ 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框- CSS 1 2 3 4 5 /* 添加边框 */ .nav li { bor

用Toast来增加调试效率的小技巧

1 import android.content.Context; 2 import android.widget.Toast; 3 4 /** 5 * Created by apple on 10/7/15. 6 */ 7 public class Message { 8 public static void message(Context context, String message){ 9 Toast.makeText(context, message, Toast.LENGTH_LON