《Ext JS权威指南》——3.5节调试技巧-阿里云开发者社区

开发者社区> 华章出版社> 正文

《Ext JS权威指南》——3.5节调试技巧

简介: 本节书摘来自华章社区《Ext JS权威指南》一书中的第3章,第3.5节调试技巧,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看

3.5 调试技巧
1.使用console替代alert
为什么要这样做?很简单,请看下面的代码:
var obj={data:[{name:'张三',age:30},{name:'李四',age:40}]};
如果你用alert调试,看到的是“[object,object]”,这对你根本没有任何帮助。如果你使用console.log输出,在Firebug控制台面板内可以看到“Object { data=[2]}”,单击对象可在DOM面板中看到如图3-44所示的结果。对比一下,console命令的输出更具优势,尤其是在跟踪Ext JS数据的时候。


f7b94cdc7c8776610706d683676838b9f37a67f9

虽然这两个命令只有在Firefox中才能很好地使用,但这有什么关系呢?对于能提高生产力的事,何乐而不为?笔者认为装Firefox和Firebug的时间绝不会比你使用alert调试的时间多。
Alert命令还存在一个很大的问题,就是在多次调用alert命令调试的时候,你得一次次地去按下“确定”按钮,而使用console.log则无需做任何事情,只要关注控制台就可以了。
console.log的功能还不止于此,它还可以格式化输出,语法格式如下:

console.log('格式化字符串',arg1,arg2,…,argn);
可使用的格式字符如下:
%s:字符串。
%d,%i:数字。
%f:浮点数。
%o:对象。
例如,在命令行输入以下语句:
console.log('这是数字:%i\n这是window对象:%o',3,window)
则在控制台的输出为:
这是数字:3 
这是window对象:Window index.html

console命令还提供了类似信息对话框来使用图标区别不同提示信息的功能,例如,在命令行输入以下语句:

console.debug('无图标:console.debug!');
console.info('信息:Tconsole.info!');
console.warn('警告:console.warn!');
console.error('错误:console.error!');

运行后会看到如图3-46所示的结果。
console还提供一些其他的命令,其详细说明如表3-5所示。


abb3c69066445d8578474c7cb42e3ead4cddabb1
  1. 使用debugger命令
    在脚本代码中插入debugger命令后,当代码执行到该位置时就会停止执行,等待用户操作,然后通过Firebug的脚本面板就可对代码进行单步调试了。

这是非常实用的命令,通过它可以跟踪代码的执行情况,并分析执行中出现的问题。
3.显示问题的调试
当在页面中发现定义的Ext JS对象没有显示时,可按以下步骤调试:
检查代码是否正确运行了。
先在网络面板中检查需要的图片或数据是否已经下载。
检查数据是否正确。
如果只是在IE 9之前的IE中有问题,检查逗号问题。
使用元素选择功能检查元素是否已生成。如果已经生成,则可检查元素的宽度和高度,以及位置是否正确。如果没有生成,一般是因为代码没有正确执行。
显示问题最典型的情况就是Grid没显示数据,具体检查步骤如下:
在Firebug的网络面板中,检查服务器是否正确返回了数据,很多时候都是服务器端代码出了问题。
确认服务器代码能正确返回数据后,检查Store的Reader是否已正确将原始数据转换为以数据模型为基准的数据。如果没有正确转换,说明数据模型定义错误,可能是字段映射出了问题,也可能是返回的数据格式不正确,Reader不能正确地从返回的文本提取数据。
如果以上都没问题,那么就是Grid的列定义与数据模型之间的映射存在问题,可以通过减少列定义的方法逐个排查。
如果不是列定义的问题,那就减少Grid的配置项,逐个排查Grid的配置项。
如果以上操作还不能解决问题,笔者只能说:God bless you!
还有一个典型的例子是组件不显示或显示不正确,例如不应该换行的换行了,则检查步骤如下:
如果是动态加载的组件,在网络面板中检查服务器是否已正确返回数据,检查返回的数据是否正确。
在HTML面板中检查组件的HTML代码是否已正确生成,如果没有,说明组件没有正确加载,可能是因为代码没有被正确执行或代码存在错误。
如果HTML代码存在,那么请检查HTML代码的样式,看是否是宽度不够或被隐藏了。如果宽度不够,调整宽度;如果是隐藏了,将检查隐藏组件的配置对象。
如果还是存在问题,请减少组件的配置项,从尽可能小的配置项开始,逐个添加配置项,就可找出是哪个配置项导致了错误。
4.数据加载问题
当碰到数据加载问题时,可按照以下步骤检查:
在网络面板中检查是否提交了请求,若没有,则说明数据没有提交,请检查提交请求的代码。
在网络面板中检查提交地址和文件是否正确。
检查提交参数是否正确。
检查后台文件是否获取了正确的提交参数。
检查返回格式是否正确。
检查是否只执行了异常回调函数,如果是,则检查为什么会执行异常回调函数,可通过console.log输出回调函数的参数来检查。
如果以上操作还不能解决问题,先将配置项减到最少,检查是否能正确加载。如果可以,逐步添加配置项,找出有问题的配置项。
5.布局问题
当碰到布局问题时,可按照以下步骤检查:
检查布局是否按你预想的方式生成了HTML代码。
检查布局生成的源代码,看是否 是宽度和高度不足。
检查是否使用了错误的布局。
检查是否使用了多余的布局。
将布局的配置项减到最少,然后进行测试,如果正确,逐步添加配置项,找出出现问题的配置项。
6.对象或变量不存在的错误
当碰到对象或变量不存在的错误时,可按照以下步骤检查:
检查对象或变量是否已定义。
是否使用scope属性传递了作用域。
使用console.log跟踪处理的整个过程,检查过程中从哪个步骤开始出现对象或变量不存在的情况。
如果语句中使用了多个对象,就逐个检查问题出在哪个对象上,例如从Grid中获取选择的记录,就需要检查Grid、GridView和选择模型对象是否存在,以及选择模型是否正确。
7.事件没有响应
当事件没有响应时,可按照以下步骤检查:
检查事件是否被正确绑定,方法是使用console.log在控制台中输出对象,然后在DOM面板中查看对象的events对象中对应的事件是否已绑定函数。也可以在Illuminations面板中选择控件,然后在Events子面板中查看是否绑定了事件。
在API中检查对象是否存在该事件,以及详细了解该事件的触发条件。
检查事件中的代码是否存在错误。
8.诊断Ext JS 4.1的布局问题
因为Ext JS 4.1采用了批量渲染方式,因而会造成不能被发现的错误或出现轻微的视觉异常,有些时候会导致渲染失败,因而在Ext JS 4.1 Beta 1的文件包中提供了ext-all-dev.js、Context.js和ContextItem.js这三个文件用来诊断布局问题。使用方法是在页面中使用ext-all-dev.js文件代替ext-all.js文件,并加入另外两个文件的引用,代码如下:

<script type="text/javascript"src="/path/ext-all-dev.js"></script>
<script type="text/javascript"src="/path/src/diag/layout/Context.js"></script>

javascript:void(Ext.log.show())
该日志有行数限制,默认是750行,如果需要扩大行数,可加入以下代码(修改为1500行):
Ext.log.max=1500;

9.使用JSLint检测脚本
(1) 概述
JSLint是Douglas Crockford提供的一个在线的脚本语法检测工具,可以检测出脚本中隐含的错误以及规范书写代码。可访问http://www.jslint.com/使用该检测工具。因为是在线的,所以需要你将脚本复制到网页中进行检测。
(2) 在Visual Studio中使用JSLint
要在Visual Studio 2005和2008版中使用JSLint,可访问http://jslint.codeplex.com/releases/view/22496来下载JSLintVS_bin.zip文件。解压后,如果是Visual Studio 2005,将文件复制到“%My Documents%/Visual Studio 2005/Addins”目录中;如果是Visual Studio 2008,将文件复制到“%My Documents%/Visual Studio 2008/Addins”目录中。打开Visual Studio后,就可在右键菜单中找到JSlint了。
如果是Visual Studio 2010,可访问http://jslint4vs2010.codeplex.com/来下载,下载的是一个扩展名为.vsix的文件,双击该文件安装后即可在Visual Studio 2010中使用JSLint了。
(3) 使用jslint4java检测脚本
如果你想使用Java版的JSLint,可访问http://code.google.com/p/jslint4java/来下载最新版软件。
使用方法是:

% java -jar jslint4java-1.4.7.jar your.js

其中your.js是你要验证的脚本文件名称。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接