It’s Like Firebug, but for Flex Apps: FlexSpy
I do just about as much web design as I do Flex work. Maybe more actually. I depend on a couple in-browser tools like Firebug and the Web Developer toolbar to help me get through some of the dicier design issues that pop up in every project. They are a necessity and one of the very first thing I have my new students in stall every semester.
So, when I recently started working on some Flex projects where the UI design had some very complex CSS issues that were popping up, I longed for something similar in my Flex toolkit. A component that would allow you click into a Flex app and identify the various containers and controls and observe all of the properties for the component. I was really looking for something similar to the Inspect function of Firebug. For those of of you that have never used it, the inspect function turns your cursor in a DOM selection tool of sorts, producing a border around the objects you hover over. Clicking on the highlighted object will display the HTML markup portion that contains that element and then list any and all CSS properties affecting the element. It’s sweet.
So, I put out a call for such a beast on Twitter. I got a couple responses. One suggested “De MonsterDebugger“, an AIR app that integrates with Flash and Flex apps via a helper class you import into your app/movie. It’s pretty slick. Lee Brimelow has posted a video tutorial on how to use the app. As cool as it was, it actually was overkill for my needs. I simply needed styling assistance, not trace output or the method testing. So, I decided to give the other suggestion I received, FlexSpy. Bingo!
Just one thing… FlexSpy by default wants to open up pretty big. So big that it often covers the entire application window. So large that on my MacBook Pro, even with a fully maximized browser viewport, it is too large to fit in the window. So, some tweaks had to be made. Luckily, aranud, the owner of the FlexSpy project on Google Code has affixed a WTFPL license to the code. Check out that last link… LOL! So, with this highly modifiable license applied to it, it seemed like a perfect time to hack up the component and recompile it o be a little more Flex-ible. *ahem*.
The changes I made were simply in the constructor, so instead of simply caling the method and instantiating a FlexSpy window, you can now pass a height and a width to it and set the size on open. (eg. FlexSpy.show(600, 450) vs. FlexSpy.show())
Ahhh. Much better.
To see an example of what FlexSpy can do for you, check it out here. To download the source and a SWC file that contain my modifications, download this: FlexSpy component and source. Enjoy. And many thanks to Araund for the original component, it was perfect for my needs!
