相信很多朋友都在用Flex2 中的trace调试程序吧,trace很好用,但是却需要Debug版本的FlashPlayer支持,因为由Javascript开发带来的习惯,我一般都是用Alert调试的,Alert虽然简单,但是确要终端UI交互,而且不方便保存,为了解决这些问题,这几天我做了这个Flex 2调试框架,目的是提供方便、灵活、可扩展的Flex 2 调试框架。
安装Plum
首先下载并解压Plum(使用Windows的朋友ZIP格式下载):
wget http://labs.eshangrao.com/flex/2/plum/Plum.tar.gz
tar xjf Plum.tar.bz2
解压后的文件结构如下:
|-------bin/
| |-------DebugConsole.swf
| |-------Plum.swc
| |-------test_plum.swf
|-------build.xml
|-------docs/
|-------libs/
|-------mxml-manifest.xml
|-------src/
- bin目录下的Plum.swc为Plum二进制库文件,DebugConsole.swf为调试终端,test_plum.swf为测试应用。
- build.xml为Flex Ant编译build文件。
- docs为API目录。
- mxml-manifest.xml为swc组件配置文件。
- src为源代码目录。
然后将Plum.swc加入到FlexBuilder的Library path中。
用法
例如我们有如下一个应用,需要调试TextInput:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="ti" text="this is a debug test info" />
</mx:Application>
要使用Plum进行调试很简单。
MXML中,首先添加xmlns声明:
xmlns:eshangrao="http://www.eshangrao.com"
然后加入如下代码:
<eshangrao:DebugDelegate id="debugDelegate"/>
如果是在As3应用中,如下增加:
import com.eshangrao.debug.server.DebugServer;
...
DebugServer.getInstance().context=this;
增加调试代码后的范例应用代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:eshangrao="http://www.eshangrao.com"
>
<eshangrao:DebugDelegate id="debugDelegate"/>
<mx:TextInput id="ti" text="this is a debug test info" />
</mx:Application>
然后重新编译您的应用,重新载入您的应用,这时候会自动弹出一个新窗口,打开一个调试终端DebugConsole.swf,该DebugConsole.swf缺省存放在与您的主应用同一目录中,如果在其他位置,使用如下方法指明DebugConsole.swf的位置:
<eshangrao:DebugDelegate id="debugDelegate" consolePath="../" />
AS3中如下:
DebugServer.consolePath="../";
以上DebugConsole.swf存放在上级目录中。
类似如下:

在调试终端中您可以直接在底部输入您要查看的变量名,回车或者点击trace,该变量的内容就会显示在上面的调试窗口中。Plum会将添加调试代码的应用作为调试的上下文,调试终端中的任何变量都是基于该上下文。比如我们输入ti,对于Plum来说,实际上查看的是范例代码中的TextInput组件。效果如下:

接着在您的应用中,如果您要调试某个变量内容,使用如下两个方法之一:
DebugServer.traceNormal(obj);
DebugServer.traceObject(obj);
trace的内容将会在前面的调试终端中显示。其中traceNormal调用的是toString()方法,而traceObject调用的是ObjectUtil.toString()方法。
扩展Plum
当前的DebugConsole实现只是一个简单的显示,如果有需要还可以对其进行扩展,实现更加丰富的显示效果。在您的扩展Console中,使用如下语句初始化Console:
DebugClient.debugServerID=Application.application.parameters.debugServerID;
debugClient=DebugClient.getInstance();
debugClient.addNormalDebugEventListener(normalDebugEventListener);
debugClient.addObjectDebugEventListener(ObjectDebugEventListener);
立刻试用Plum(会自动弹出调试终端窗口,请允许该页面弹出窗口),更多内容请查看Plum文档。
以上写得有些乱,哪位朋友有疑问请留言,或者给我Mail:eshangrao[at]gmail[dot]com