Tuesday, December 04, 2007

XRay debugger for Adobe Flex 3

XRay may be the best kept secret in Flex development tools. Its taken me a few months of Flex development to discover it. I found it looking for a runtime inspector like there is available for Delphi. I want to modify my chart properties and see the results in real time. I would also like to evaluate actionscript at runtime much like IRB in Ruby. XRay supports both these things, and much more.

THe Flex 3 debugging features are quite good, but I regularly get frustrated with the evaluation/watch feature failing to evaluate or giving scant detail. Of course you can use trace(), but that requires modifying your code, recompiling and getting back to the correct point in the code, every time you want to inspect something new.

XRay promises much more. Its not trivial however to find out how to get it working with Flex 3. I've just got it going, so here's the scoop :

1) XRay consists of a "connector" and the "interface" itself.
2) There are many versions of the connector, for Flash, Flex, Haxe and older versions of these. For Flex 3, we'll use the SWC version from
http://code.google.com/p/osflash-xray/downloads/list
At this writing, the latest was http://osflash-xray.googlecode.com/files/Xray_Flex2_Library_v0.5.swc
3) I placed this file in my thirdparty\flex\ folder which is used across multiple projects.
4) From the Flex menu, I went to the Project->Properties, selected "Flex Build Path" and then the "Library path" tab. I selected "Add SWC Folder..." and chose the thirdparty\flex\ folder. I then opened the main mxml file of a simple test project and inside the script tags I typed :
"import com."
blitzagency didn't appear in the lookup list at this point. I fiddled around and added the SWC specifically using the "Add SWC..." button under "Add SWC Folder..."
blitzagency was now found. It may have been just a delay issue for Flex to parse the SWC. Also I already had the thirdparty\flex\ folder in my source path (may be relevent).
5) I completed the "import" line as :
import com.blitzagency.xray.inspector.flex2.Flex2Xray;
and immediately after added :
private var xray:Flex2Xray = new Flex2Xray();
6) My project now compiled and ran (I used debug mode)
7) We now need a version of the XRay interface. I used the SWF version from http://www.rockonflash.com/xray/flex/Xray.zip
8) While my test project was running, I ran XRay.swf and the XRay window appeared. Clicking Go under "Application View" showed a tree with my application name.

Thanks to Steve Mathews and "John" for their help on the osflash mailing list.

References :
The main XRay site : http://osflash.org/xray
Flex notes on Google Code : http://code.google.com/p/osflash-xray/wiki/Flex2_SWC_notes

No comments: