开始ExtJS之旅:4.非常有用的开发工具

4 非常有用的开发工具

“工欲善其事，必先利其器”，有好的工具往往能够事半功倍。对于软件开发来说，尤其如此。特别是像JavaScript这种解释型执行的脚本语言，开发与调试过程都非常困难，必须要有强有力的工具加以支持。而开发过程中的工具以代码编辑与调试工具最为重要，两者的结合就是集成开发工具（IDE）了，但是以JavaScript 实现的 ExtJS 似乎还没有非常优秀的集成开发工具加以支持。这不能不算是ExtJS非常大的一个缺陷，但还是有一些工具可以推荐，确实可以帮助更快更好的开发以ExtJS实现的软件。

4.1 开发插件spket

spket支持JavaScript、XUL/XBL、Laszlo、SVG and Yahoo! Widget等新产品，具有代码自动完成、语法高亮、内容概要等功能特点，可以帮助开发人员高效的创建JavaScript程序，它可以以一个独立的桌面应用程序运行或者以Eclipse的插件运行，从它的官方网站http://www.spket.com/可以下载，这里主要介绍它作为Eclipse插件的安装及使用方式。

Step1 下载最新的插件程序，当前最新的版本为spket-1.6.12.zip，解压后插件的目录结构如图2-5所示，将plugins目录和features目录分别拷贝到Eclipse的安装目录下，Eclipse3.2及以上版本都可以使用该插件，执行操作后已经完成该插件的安装，启动 Eclipse，现在可以开始对spket进行必要的配置。




图2-5 spket插件目录结构

Step2 启动Eclipse后进入Window -> Preferences选项，在这里可以找到Spket菜单，其中包含了该插件的相关配置，选中JavaScript Profiles项，会出现JavaScript配置列表，这里默认没有提供对ExtJS的支持，下一步我们会向列表中添加ExtJS库，如图2-6所示。

图2-6 spket插件目录结构

图2-7 设置JavaScript配置名称

Step3 点击右侧的New按钮，在弹出的对话框中输入名称，点击OK按钮，如图2-7所示。

Step4 在列表中选中刚新建的配置名然后点击右侧的Add Liberty按钮，如图2-8所示。




图2-8 设置JavaScript配置列表

Step5 在出现的库列表中选择ExtJS选项，选择后点击ok按钮，如图2-9所示。




图2-9 设置JavaScript库选择配置列表

Step6 选择列表中的ExtJS项，点击右侧的Add File 按钮，如图2-10所示。

图2-10 JavaScript配置列表

图2-11 在文件选择框中选择ext.jsb文件

Step7 在弹出的文件选择框中选择ExtJS库文件source目录下的ext.jsb文件，然后点击打开按钮，如图2-11所示。

Step8 添加 ext.jsb 文件后在 JavaScript 配置列表中会列出 ExtJS 的配置选项，我们只选择Ext Base 和Everything两项，然后选择ExtJS2.0项点击Default按钮，将ExtJS2.0设置为默认的JavaScript配置，最后点击OK按钮完成，如图2-12所示。




图2-12 JavaScript配置列表

Step9 到此spket插件的安装及配置就介绍完了，在spket编辑器中打开js文件就可以实现对ExtJS的代码提示，如图2-13所示。




图2-13 spket对ExtJS的代码提示效果

4.2 调试工具
对于JavaScript程序的调试一直是JavaScript程序员比较头痛的事，因为缺少广泛使用并且效率高的调试工具。很多JavaScript程序员还一直用比较原始的“alert”方式进行调试。虽然优秀的调试工具缺乏，但是有一些小工具能帮助JavaScript进行调试。
1. FullSource
FullSource是款小巧但有用的工具，相对于IE浏览器本身提供的“View source”功能的最大不同在于FullSource 能够看到页面通过 JavaScript 动态生成的内容。这个功能对于像ExtJS 这种组件完全靠 JavaScript 动态生成的调试工作非常有用。在本质上要看到所有的动态生成的代码并不难，只要将当前的DOM结构树从内层中拿出来就可以了，FullSource就是这么做的，不知道为什么IE的这个“View source”为什么要设计的这么简单呢？
Step1 下载后的FullSource是个zip包，解开后就2个文件，在inf文件上点右键，选择安装，如图2-14所示




图2-14 FullSource的安装

Step2 安装成功后关掉所有浏览器，然后重新打开一个新的浏览器，打开前面的“Helloworld”的例子。在浏览器上面点右键，读者会发现多了一个菜单，如图2-15所示。




图2-15 FullSource菜单

Step3 此时，用“查看源文件”功能查看到的是真正的源文件，即代码2-1所示的代码。 注意：用“FullSource”功能查看到的文件内容比代码 2-1 所示的代码多得多，是显示图2-15所示页面真正需要的代码，这些代码是由ExtJS引擎动态生成的。能够看到真实的源代码对程序的调试将会起到重大的作用。
2. Microsoft Script Debugger
Microsoft Script Debugger 是 Microsoft 公司推出的一个脚本调试工具，它能调试基于VBScript 与 JavaScript 客户端脚本，同时也能调试位于 Microsoft IIS 上的服务器端脚本。Microsoft Script Debugger只在IE浏览器下运行，并不支持其它浏览器。当然，这里只讨论用它来调试JavaScript客户端的脚本的问题。
安装这个扩展非常简单，到Microsoft网站下载该扩展的安装包，然后运行安装过程就行了。安装好后，要作一些简单的配置后才能在IE浏览器中使用它来调试脚本。
Step1 确认IE浏览器是否启用了调试功能。在IE浏览器中选择【工具】->【Internet选项】菜单，然后进入高级选项页，在其设置区域中检查【禁止脚本调试】选项是否已经取消选择，如果没有，应取消之。如图2-16所示。



Step2 将【禁止脚本调试】选项取消后，再重启IE浏览器，在其【查看】菜单中就会多出了一个【脚本调试程序】的菜单，其有两个子菜单，【打开】与【在下一条语句中断】，如图2-17所示。
可以先用IE浏览器打开包含有需要调试的JavaScript的Web 页面，然后再利用脚本调试程序菜单中的【打开】命令即可以打开Microsoft Script Debuger，并且会显示当前Web 页面的代码，而光标也会停在暂停的行上。到了这一步，其调试方式与其它各种开发工具的调式方式就大同小异了，比如设置断点，单步执行，观察变量等等，在此不做详细说明。