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数据的时候。
虽然这两个命令只有在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所示。
- 使用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是你要验证的脚本文件名称。