Subscribe

  • Subscribe  

How KapInspect Can Help You to Develop, Debug and Maintain Flex/AS3 Applications

Posted by julienrevel | December 3, 2008 .

This second part of a three-article series reviews KapInspect features in detail.

KapInspect Basic Principles

  • The left pane displays a tree of the display list for your application, and for popups if any. For popups, you must refresh manually with ‘refresh popups’ button.
  • When you select an item in the display list, a frame will outline the component selected in your application, displaying its name and its coordinates.
  • The selected object in the display list becomes the “main selected object”, which is the target for the next inspector that will be opened.
  • The bottom bar opens up when mouse is over it. The first group of buttons is for opening new inspectors. The second group is for general actions.
  • A new inspector will always be opened on the currently “main selected object” (either from display list, debug inspector, or active tab). The last user action will set the main target object.
  • Every object may have several inspectors available, depending on its class (for instance, display list inspector may only be opened for a DisplayObject).
  • All inspectors for a given object will be displayed on a separate tab on the right part.
  • Inspectors provided by default are: Debug inspector, Event logger, Statistics inspector, Styles inspector/editor, Class Outline and Display list inspector.
  • Additional inspectors can be provided through plugin mechanism.
  • Tabs may be closed, and they are also found in the popup menu at the right of the tab bar. Use this menu to easily select any open tab.
  • You may use right-click menus on items. Be careful to select the chosen line with left-click before using the right-click menu (…)

Debug Inspector

This is the main inspector that will be opened after a component capture or a double-click on a component item in the display list tree. Its main features are:

  • Hierarchical and recursive display of all public variables of an object of any type: any custom class, Array, ArrayCollection, Object, Dictionary
  • Sealed (variables defined in the object class) and dynamic variables will be displayed
  • Filters applicable on any node, with a node scope for these filters (every node has its own filters, and keep them in memory):
    • Name filter: Type some letters to filter-in only members whose names start with this string
    • Inherited filter: By default all properties of an object are displayed. Uncheck “inherited” checkbox to see properties declared on the selected object class level (including dynamic properties)
    • Class filter:The combobox displays all variable types found in the selected object. Select one of them to display only attributes that belong or extend the filter class
  • Double-click on a node to edit its value (for simple types and not read-only attributes)
  • Right-click on the selected node to display available inspectors that can be opened on this object. If the value of the object is ‘null’, no inspectors will be available at all.

Event Logger

This inspector is for logging events displayed by components and objects. Its main features are:

  • Display all events dispatched in an AdvancedDataGrid, with multiple sorts
  • Display event name, event class, event phase, and event number
  • Filter events in and out, using a checkbox tree that displays only available events for the selected object
  • Pause and play functions
  • In-depth inspection of event object, with the treeview mode that will allow you to individually inspect all events
  • Manually change the length of the event list using the input text field on the right of the inspector toolbar

Note: The event list length is limited to 500 items by default to avoid deadlock when logging events for KapInspect itself. Logging events on your application may slow it considerably, so you should close EventLogger inspectors when not in use.

Statistics Inspector

This view is for displaying statistics information about the selected DisplayObject:

  • List of every UI class used in the children and sub-children
  • Instance count for every class
  • Total number of contained children
  • Sort by decreasing instance count
  • Click on any line to select all instances of this type in your application. Use ‘unselect’ button on the button bar to hide selection boxes.

Style Editor

This view (drawn from FlexSpy) is for displaying and editing styles of the selected DisplayObject:

  • Standard styles are listed
  • Use the ‘pen’ button to switch to edit mode
  • Set any value, depending on style type, and instantly watch the result on your application

Class Outline

This view will display static class information about the selected object:

  • List of inherited parent classes
  • Public variables and method names
  • List of all implemented interfaces

Note: This view takes about 5 seconds to initialize, so please don’t close your browser after a second or two. ;-)

Display List as Inspector

This is the same component as the one used in the main DisplayList tree, so it works exactly in the same way. If you need to keep a separate DisplayList tree on components, you will use this inspector.

Tips and tricks for using KapInspect

  • Use the capture mode (toolbar button) to pinpoint any component of your application and inspect it
  • Hit escape or the popup shortcut to leave capture mode
  • Use the static KapInspect.addDebugNode method to programmatically add objects to be inspected that are not in the display list or are private (also possible with KapInspectModuleLoader)
  • Use the static KapInspect.addEventLogger method to programmatically add an event logger on any object not in the display list or is private
  • Use the righ-click menu on the selected object (either in the display list or in the debug tree) to open “Activate an Inspector” on this object. The right click also work on the selected tab
  • To inspect popups, use the “refresh popups” button on the toolbar to add a tab (on the left pane) for each popup of the application
  • Use “mini-buttons”(1,2,1|2) on bottom bar to manage view mode (left pane, right pane, both panes)
  • Use “unselect” button to remove selection frames added by KapInspect around components in the application
  • When in capture mode, after having captured a component (its selection frame becomes green), use arrow keys to move and resize the component directly on your application (try control and/or shift with keys)
  • Use “about” box to see information about the FlashPlayer version, and your application

About KapLab

KapLab is the result of a deliberate effort to develop innovative components for Flex, as we are committed to playing a role in the Flex community.

We provide great components for free, as shown below:

  • Flex Diagrammer (with Layout algorithms):    diagramer visu1 How KapInspect Can Help You to Develop, Debug and Maintain Flex/AS3 Applications
  • Graph visualizer:                                                 visualizer visu2 How KapInspect Can Help You to Develop, Debug and Maintain Flex/AS3 Applications
  • Radar Chart:                                                         radarchart visu1 How KapInspect Can Help You to Develop, Debug and Maintain Flex/AS3 Applications
  • Treemap:                                                              treemap visu1 How KapInspect Can Help You to Develop, Debug and Maintain Flex/AS3 Applications

Please feel free to try and use them.

All components that we provide are 100% free, and may be used in any product that you develop with them (they cannot be resold as components though). We publish new versions very often. You are welcome to leave comments and encouraged to submit bugs or feature requests through our integrated JIRA database. Each component has a user guide, an integration guide, ASDoc, and live demonstration.

You will have to register first on KapLab to be able to download any component, or to post comments or bugs.

As Cyril Daloz, CEO says: “Kap Lab exists because in innovation we trust. Enjoy our products and help us to give you the best.

Leave a Comment

If you would like to make a comment, please fill out the form below.


Name

Email

Website

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Comments

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word


Related Posts

<

Direct TV Offers - usdirect has the best directtv deals