Inspect UI elements in Flex

Question

Is there any tool available for Flex applications that acts similar to Web Developer or Firebug toolbar to inspect UI elements?

Basically in a complex hierarchy of UI controls allowing you to browse the elements and see properties such as x and y coordinates, width, height, id.

I'm interested in tools that would allow you to do this at runtime, since most of the properties are dynamic.

Answer 1

You can also try FlexSpy. Unlike De MonsterDebugger (which looks good, too), you don't need to install AIR. It doesn't do as much, but certainly allows you to view properties of components in real-time (and to change some of them). It's easy to use:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  ...
  <mx:Script>
    <![CDATA[
      import com.flexspy.FlexSpy;
    ]]>
  </mx:Script>
  ...
  <mx:Button id="btnFlexSpy" label="FlexSpy" click="FlexSpy.show()" />
  ...
</mx:Application>

It looks like this:

alt text http://coderpeon.ovh.org/wp-content/110507-0844-flexspy111.png

Answer 2

I have heard good things about "Kap Inspect" but I have not used it personally. They have a demo on their site.