结合开发平台谈一下JavaScript调试技巧

JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行,JavaScript的这个特点无形之间中增加了我们在JavaScript代码调试和排错方面的难度。开发平台的前台已经做了封装,同时还提供了代码生成功能,大部分情况下代码都是没有问题的,但是如果出了问题,有些时候却很难找到原因。我个人认为之所以出现难查找的原因主要为:对开发平台的前台代码理解不够深入,过度依赖开发平台提供的代码生成器;JavaScript代码调试和排错还必须要有耐心,只要有耐心,一步步地分析调试排查大部分问题都能解决。

我个人将开发平台JavaScript调试和排错分为两个层面,一个是代码层面,另一个控制台层面。代码层面需要对开发平台的前台代码进行深入的了解,对相关文档进行认真的阅读,尽量减少对代码生成器的依赖,同时对一些易错点要重点分析并掌握解决方法;控制台层面要掌握不同浏览器调试工具的使用方法,可以不精但是一定要掌握基本的调试方法。

“工欲善其事,必先利其器”JavaScript代码调试与排错也需要一个好的调试工具才可以。可是什么工具最好呢?仁者见仁智者见智,没有一个标准答案,只要自己认为用着顺手、能够解决问题就可以。我之前比较倾向于使用google的Chrome浏览器,后来由于Chrome升级不方便,加之Chrome浏览器的衍生版本逐渐出现,所以现在使用360浏览器比较多。360浏览器集成了IE和Chrome,分别对应兼容模式和极速模式,并且可以在两个模式之间进行无缝切换,不需要再重新登陆。如下图所示:

按F12键即可调出相应模式下面的调试工具,兼容模式下面的调试工具就是当前系统IE自带的调试工具,随着IE版本不同而不同,一般IE8以上才具有调试功能;急速模式下面的调试工具即为原来Chrome浏览器下面的调试工具,分别如图:

平台在极速模式下面可能显示不正常,不同模式下面同一界面的对比情况,如下图:

虽然在极速模式下面平台的部分界面显示异常,可还能从中得到一些有价值的信息,如下图:

如果界面中有脚本错误,控制台中会标红显示,并且单击右侧的文件名称可以准确定义到错误位置。

通过极速模式下面的控制台可以很方便的对平台的前台进行调试,在该控制台可以对该界面JavaScript代码进行调试和改写,如下图:

控制台还带有自动提示功能(注意字母区分大小写),通过自动提示我们能看到好多平台底层的方法和对象,如下图:

同时还要学会在代码中巧妙使用控制台的console对象,如果在下图位置添加console对象:

运行结果如下:

注意:如果处于非调试模式下,那么console对象会报错,所以调试完成后要将console对象删除。

通过console我们可以输出指定的对象,并分析其内部结构,如下图:

输出结果如下图所示:

可以看到该对象的内部结构清晰地展示在我们面前,这对我们是很有帮助的。

这次就先介绍这么多,还有许多实用的功能需要我们共同去探索。

上一篇:

下一篇:

相关新闻