Flex2 Debug Component

Posted At : July 5, 2006 4:07 PM | Posted By : Mike Nimer
Related Categories: Flex Builder and ColdFusion,Flex

1/29/06 Update: I've updated this component for Flex 2.0.1. Go ahead and download the 1.0.5 version of the Flex Components for the update.

Last week, at CFUnited, I showed off debug component for Flex2 development. As promised here is a download of the .swc and source code. Remember this is a work in progress but it is far enough along to be useful now. Keep watching this blog for updates.

What is this debug component?

First let me step back, Flex2 has a useful debug utility class and method called ObjectUtil.toString(). For those of you use to ColdFusion and the CFDUMP tag, this is a flex version of the same thing. However there is no way to easily view this data, I found myself doing a lot of Alerts, such as this: Alert.show(ObjectUtil.toString(event)); However, This works for the small stuff but not for large items, The Alert box doesn't grow to fit things like I would like.

The 2nd problem, was that ColdFusion FlashRemoting requests return a lot of debug information about the request and there is no good way to make sense of it. So to kill two birds with one stone I put this component together.

How to use it:

In your Flex project; go to the project properties panel (Right-Click on the project), select the "Flex Build Path" page, select the "Library Path" tab, then add the .swc file to the project. Once this is done you can import and call the Debug class as needed.

Syntax:

The Debug component can be used in a few different ways, to view a single item or to debug multiple items. The single item example:

Debug.show(anyObject);

You can also add multiple items and view them later.

Debug.add(anyObject);
Debug.add(anotherObject);

//then later, perhaps in a button click handler
Debug.show();

Some screen shots:

The ColdFusion debug data:

Comments (72) |

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs | 16926 Views

Comments

[Add Comment]

Mike,

I added the swc to my Library path, but now I get an Internal build error and another error that says, "unable to load SWC FlexDebugPanel.swc: unknown element swc found in versions section in catalog.xml.

Any ideas?

Thanks,

Steve

# Posted By Steve House | 7/6/06 7:48 AM

hmm. Not really. I have seen one or two projects where I needed to remote the .swc file and then re-add it. And don't forget to do a clean -> build all after wards.

let me know if that works

# Posted By Mike Nimer | 7/6/06 11:53 AM

FYI:
Clicking on the download link in FF prompts me to download a file called "download.cfm"

# Posted By Anon | 7/13/06 5:31 AM

Hello Mike,

I am too getting this error while using FDS express.

unable to load SWC fds.swc: unknown element swc found in versions section in catalog.xml.

Thanks in advance

Vijay

# Posted By vijay khambalkar | 7/13/06 8:55 AM

the "click to download.cfm" is correct. If you notice it claims that it is a zip file.

Just go ahead and download and save it to your disk as a .zip file and then open it up.

The download.cfm file is the server side script used to track downloads and serve up the right file.

# Posted By Mike Nimer | 7/13/06 11:35 AM

Vijay,
no idea. Sounds like your library path for the project is linking to the wrong fds.swc file. You'll need to post a message on the adobe forums about that file. My debug component doesn't use fds.swc at all.

# Posted By Mike Nimer | 7/13/06 11:36 AM

Hay, that's more handy than setting debug loglevel in the services config XML file, though of course you have to go back and add the debug statement once you know what you're after.

# Posted By Tom Chiverton | 7/20/06 11:58 AM

What would the "import" statement look like? I'm trying to figure out how to import your swc into my Flex app after I've placed it into the Library path.

# Posted By Jacob | 8/29/06 10:29 AM

After you add it to the library path all you need to do is add this import statement to your file
import com.mikenimer.components.*;

Or what I do, start typing in the class name "Debug" and as soon as the tag insight popup list appears hit "enter" to select the class. If you do it this way FlexBuilder will automatically add the import statement for you.

# Posted By Mike Nimer | 8/29/06 12:19 PM

Maybe some would find it too "intrusive", but it'd be nice (with repeating tasks, recompiling every second) if you saved in a SO data like position and size of the panel (and maybe position of the divider in the HDividedBox).

Very usefull indeed, thanks for sharing this.

# Posted By Eels | 8/29/06 3:25 PM

That's a good idea.

# Posted By Mike Nimer | 8/29/06 5:02 PM

Hey,
it's running and it's really cool - but I've got some trouble with the tree on the right: if I add an xml-object, the navigation-tree tries to render the list - looks quite ugly, with larger or more complex collection you get some errors. The Idea of the Panel is really cool - nice work!

# Posted By noeee | 8/30/06 9:49 AM

So if you do something like this:

<code>
var foo:XML = <people><person>...</person></people>;
Dump.show(foo);
</code>

You get an error? Just making sure so I can add the logic to fix the right problem.

# Posted By Mike Nimer | 8/30/06 10:11 AM

No, I'm just using cairngorm in a Project and I have a property in my ModelLocator which is an xml - let's say model.myXML:XML; so if I add the Line
Debug.add(model.myXML, 'myXML'); I get the xml of myXML partially rendered in the navigation tree. If I use a xmlCollection, lets call it myModel.myXMLList:XMLList - Flex crashes with an Error.

# Posted By noeee | 8/31/06 7:14 AM

ok, that should be easy to recreate. I'll take a look.
---nimer

# Posted By Mike Nimer | 8/31/06 12:08 PM

Very nice job... much nicer than just Alerting.

# Posted By rd | 9/1/06 12:52 PM

Mike,
I saw you demo this during CFUnited ? very useful tool.
thanx

# Posted By David Bacungan | 9/14/06 10:07 PM

Mike, once again, you rock. I owe you a whole case of beer...

# Posted By Ryan Guill | 9/26/06 5:45 PM

How do you add this to the library path if you are not using the Flex Builder?

I am using Dreamweaver and have setup a nifty little command to compile my flex 2 work with the compiler.

I tried adding:
-library-path C:\flex_sdk_2\Components\nimerComponents.swc to the compiler line
And it does not seem to work for me.

I get an error from the compiler ...
Error: Definition com.mikenimer.components could not be found.
On the line ...
import com.mikenimer.components.*;

# Posted By Chris Falzone | 10/5/06 1:05 PM

Actully figured it out. Not sure if this is the correct way to do this (and actually the livedocs has a note telling you not to do this), but I copied the .swc to C:\flex_sdk_2\frameworks\libs and removed that line in my compiler about library path. Works great now.

And actually, it really helped me fix the problem I was having, so tyvm :)

# Posted By Chris Falzone | 10/5/06 1:50 PM

--library-path+=C:\flex_sdk_2\Components\

# Posted By Tom Chiverton | 10/6/06 4:05 AM

Mike - thank you SO much for this. Its really slick, works great, and provides precisely what I need. Really bummed I missed CFUnited this year, but I'll see you at MAX next week!

# Posted By Chris | 10/15/06 11:17 AM

Mike, I am new to Flex 2 and come from a vb.net background. The debugger in eclipse or Flex 2 is very cumbersome. This utulity is awesome. Very Nice Job. Keep it up.

# Posted By Darrin Dossey | 10/23/06 2:24 PM

What do you out in the Debug.show(); function to output an object. I'm new to Flex so not to show what to put in the Debug.show();

# Posted By Stephen Adams | 11/21/06 9:10 AM

Late to the party,

I added the SWC, copied the .src files to my COM folder and when I call Debug.show(foo) I get the following.

1009: Cannot access a property or method of a null object reference.
at mx.containers::Panel/mx.containers:Panel::commitProperties()

#1009: Cannot access a property or method of a null object reference.
at mx.containers::Panel/::showTitleBar()

Any thoughts?

# Posted By John Wilker | 1/9/07 11:31 AM

John,

What version of flex are you using? are you still on 2.0 or 2.0.1?

But I really think that the object you are trying to dump has not been defined yet and thats why you are getting the error (especially if you are not getting compile errors). Remember that generally, they object has to be defined and instantiated for you to be able to dump it, otherwise it doesn't really exist yet. If it is a display object, it has to be drawn in the swf first (generally speaking).

# Posted By Ryan Guill | 1/9/07 11:37 AM

Ryan,

2.0

You may be right on. It's a dragevent and I got errors from ObjUtil.tostring() as well until I excluded the loader stuff. can that be done with Debug.show()?

# Posted By John Wilker | 1/9/07 1:01 PM

Probably not... but its hard to say without knowing the situation. I mean really, this isn't a limitation per-sey, there really is just nothing to dump until it exists, until then its null.

# Posted By Ryan Guill | 1/9/07 1:05 PM

There seems to be a problem with this Debug component with Flex 2.0.1 - projects compile correctly, but do not run...

# Posted By The Ganius | 1/12/07 11:37 AM

Ditto....
"There seems to be a problem with this Debug component with Flex 2.0.1 - projects compile correctly, but do not run... "

Flexbuilder shows no errors (Is that a bug, shouldn't it introspect the swc, and report problems?

Debug.call or show () - methods fail in version 2.01

# Posted By Dan Zeitman | 1/28/07 2:22 PM

Gotta love it when they change the methods you extend. I've fixed the component set for 2.0.1. Go ahead and download version 1.0.5 for the fix.

thanks everyone,
--nimer

# Posted By Mike Nimer | 1/28/07 7:39 PM

thanks mike! I love this component, it makes things so much easier.

# Posted By Ryan Guill | 1/28/07 7:46 PM

Hi, I unzipped the file and added the .swc into the library path. Now, when I'm trying to build a project I'm always getting the following 3 messages:

1. unable to load SWC nimerComponents.swc: multiple points
2. 1017: The definition of base class Locale was not found.
3. Could not resolve <mx:Application> to a component implementation.

The "about" box says I have 2.0.143459 version of Flex Builder.

Any ideas?

# Posted By Vitaly Kuvaev | 2/1/07 7:16 AM

great component thanks.

# Posted By george cook | 2/9/07 6:11 AM

As a follow up, my set up is now working fine. Great component! Much better than Alert.Show()

# Posted By John Wilker | 2/9/07 10:28 AM

Hi Mike,

Typo: "1/29/06 Update" should be "1/29/07 Update", I think.

Douglas

# Posted By Douglas McCarroll | 2/13/07 10:07 AM

Hi Mike,

I love love love your Dedug Component. It worked perfectly first time - I wish all my code was this good :-)

thanks

# Posted By David Heacock | 2/26/07 3:43 AM

Thanks for Donating such a great tool!...Flex is definitely more pleasant now!

# Posted By Dan Abenhaim | 5/10/07 6:45 PM

Man! Can somebody "please" think about the people who is not using Flex Builder but a normal text editor and the mxmlc command?.

We need instructions too. =(

# Posted By novnano | 5/23/07 11:01 PM

Very cool... thanks alot, I appreciate this.

I can't find anywhere to download the NetDebug componnent which is what I've used in the past... this is great, thanks alot.

# Posted By Alex | 7/2/07 12:05 AM

Mike,

I created a debug component about a month ago. Very similar idea.

I created the same thing with a little different look to keep track of my remote data calls.
You have definitely taken yours to a far higher level than mine.

One observation: I use an event dispatcher to make my debug calls. This way you do not have to have the debugger active when running the program if you want. The debugger captures the data only if it is active. That way I can turn it on and off. Also, I could accidentally leave a dispatcher in the code without any problems. The dispatcher and listener are a global object I use for all my events.

Nice to see someone else with the same thought process.

Tony

# Posted By Tony | 7/21/07 7:56 PM

This debugger just figured something out for me that I'd been banging my head over all day. THANK YOU!

# Posted By Walt | 8/20/07 4:03 PM

Really like this component, I've had a dig around in the source but I'm not 100% clear on how you are handling the custom views for things like the CF query debug, are you passing a new SQLQueryDebugObject to the add method?

I'm not actually using CF for this project but would like to do something similar (so I can have the PHP debug in one or more separate tabs). Any advice would be greatly appreciated as this component will save me lots of time.

# Posted By Dave Spurr | 9/20/07 5:13 AM

What's happening is that ColdFusion is returning to the component a lot of debug data. Once I get it, I'm looping over it and creating the various typed objects for the tree. Look at the ResultEventDebugObject.parseDebug() method. THis is where I'm looping over the debug data and creating all of the tree objects.

Also, if you notice all of the classes extend TreeParent or TreeChild. I use these to render the tree (TreeParent has the chidlren property that the mx:Tree tag looks for.) This way I have generic data for the tree and typed data for the component so I can do " is " checks on the selectedItem in the tree to know which view to show.

As for getting this to work with php. the component itself will be able to dump any object you send it. However the debug won't show. That part is looking for specific data coming back from the Server in a "debug" property in the header of the AMF response. As far as I know PHP doesn't return any debug data. But, I'm sure something like this can be done.

# Posted By Mike Nimer | 9/21/07 12:49 AM

help! I'm using Flex Builder 3 (beta), and the debug component seems to be broken.

# Posted By walt | 12/3/07 12:40 AM

After adding the .SWC to the project, importing com.mikenimer.components.*; and calling Debug(someObj);
I'm getting the following error when trying to compile. "1024: Overriding a function that is not marked for override." on the SizeableTitleWindow.as. Using Flex 2.0.1

Any Ideas what I'm doing, or not doing?

# Posted By robert | 12/7/07 8:26 PM

I'm using Flex Builder Version 3 Beta 2

I create a flex project named teste and in Library Path i add SWC file named nimerComponents.swc

But mode Design in Flex Builder not functional

What should I do?

# Posted By MArcio | 12/14/07 2:44 PM