Spy and Reflex

I have been using IE Dev Tool bar for debugging web applications for a while. It has helped to trace the HTML properties,DOM structure and CSS classes etc. To be precise, it was my dissection tool without losing the actual fundaa.

Similarly there are a bunch of debuggers available for Flex and ActionScript development. I tried my hands in almost everything and was analyzing which suits the best for my BI development. At last I ended up in these 2 debuggers – Reflex Util and Flex Spy.

Both are open source utilities allowing Adobe Flex developers to debug and alter properties of components while running an application. They allow you to inspect and dynamically change most properties and styles of the visual components in your Flex application. You can – for example – try out a specific width or a background color for your component before changing it in your code.

Reflex Util

How to use : We need to add a tag which enables a new menu item in the right click event of the application.

Reflex Util

How to install :
~ Add the ReflexUtil SWC library to your flex project
~ Open the Default MXML Application file
~ Add the following child to the tag:
~ Add the following attribute to the tag: xmlns:reflexutil=”net.kandov.reflexutil.*”
~ Debug/Run the application. right click on the application when loaded
~ Click the component you wish to inspect under the mouse point
~ A control window will open, have fun

Flex Spy

How to use : We need to have a component to invoke the debugger.  I always use a button control bound with the “FlexSpy.show()” event fired on the click event.

Flex Spy

How to install :
~ In Flex Builder, open the Properties window of your project (Project menu > Properties)
~ On the left side of the Properties window, select Flex Library Build Path.
~ On the right side of the Properties window, select the Library path tab.
~ Click the Add SWC… button
~ Select the flexspy.swc file that you downloaded (from the Downloads section) and click OK.
~ Add a button somewhere in your Flex application to show the Flex-Spy window

Simple isn’t it  ?? !!!   Now start Inspecting your application and just play around with their properties without a pinch of code change.