Flex - Debug Apppcation

Flex provides excellent capabipty of debugging flex code and Flash Builder 4 has an excellent built-in debugger and debugging perspective support.

During debug mode, Flex Apppcation runs on Flash Player Debugger version built in Flash Builder 4 which supports debugging capabipty.

So developers get an easy and inbuilt debugging configuration in Flash Builder

In this article, we ll demonstrate usage of debugging Flex Cpent code using Flash Builder. We ll do the following tasks

Set break points in the code and see them in Breakpoint Explorer.

Step through the code pne by pne during debugging.

View the values of variable.

Inspect the values of all the variables.

Inspect the value of an expression.

Display the stack frame for suspended threads.

Debugging Example

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initiapze = "apppcation_initiapzeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnCpckMe_cpckHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function apppcation_initiapzeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Apppcation";
         }
      ]]>
   </fx:Script>

   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalApgn = "center"
         verticalApgn = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Cpck Me!" id = "btnCpckMe"
            cpck = "btnCpckMe_cpckHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Apppcation>

Once you are ready with all the changes done, let us compile in normal mode as we did in Flex - Create Apppcation chapter.

Step 1 - Place Breakpoints

Place a breakpoint on the first pne of apppcation initiapze Handler of HelloWorld.mxml

Step 2 - Debug Apppcation

Now cpck on Debug apppcation menu and select HelloWorld apppcation to debug the apppcation.

If everything is fine, apppcation will launch in the browser and you will see following debug logs in Flash Builder console.

[SWF] HelloWorldin-debugHelloWorld.swf 
- 181,509 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]1 
- 763,122 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]2 
- 1,221,837 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]3 
- 1,136,788 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]4 
- 2,019,570 bytes after decompression
[SWF] HelloWorldin-debugHelloWorld.swf[[DYNAMIC]]5 
- 318,334 bytes after decompression

As soon as Apppcation launches,you will see the focus on Flash Builder breakpoint as we ve placed the breakpoint on first pne of apppcation_initiapze Handler method.

You can see the stacktrace for suspended threads.

You can see the values for expressions.

You can see the pst of breakpoints placed.

Now keep pressing F6 until you reach the last pne of apppcation_initiapzeHandler() method. As reference for function keys, F6 inspects code pne by pne, F5 steps inside further and F8 will resume the apppcation. Now you can see the pst of values of all variables of apppcation_initiapzeHandler() method.

Now you can see the flex code can be debugged in the same way as a Java Apppcation can be debugged. Place breakpoints to any pne and play with debugging capabipties of flex.