Flex debugs the application

Flex provides superior debugging flexibility, and Flash Builder 4 has excellent built-in debugger and debugging perspective support.

• During debugging mode, the Flex application runs on the Flash Player Debugger version, which is built into Flash Builder 4, which supports debugging.

• So developers can get a simple built-in debug configuration in Flash Builder

In this article, we'll demonstrate how to debug Flex client code using Flash Builder. We'll do the following

• Set breakpoints in your code and view them in BreakPoint Explorer.

• Line by line during debugging.

• View the value of the variable.

• Check the values of all variables.

• Check the value of the expression.

• Displays stack frames for suspended threads.

Debug the sample

The following is the contents of the modified mxml file src / com.tutorialspoint / HelloWorld.mxml.

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

       protected function application_initializeHandler(event:FlexEvent):void
       {
          lblHeader.text = "My Hello World Application";				
       }
      ]]>
   </fx:Script>
   <s:BorderContainer width="500" height="500" id="mainContainer" 
      styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center" 
         verticalAlign="middle">
         <s:Label id="lblHeader" fontSize="40" color="0x777777" 
            styleName="heading"/>
         <s:Button label="Click Me!" id="btnClickMe" 
            click="btnClickMe_clickHandler(event)" styleName="button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

When you're ready for all your changes, follow the general pattern in the Flex - Create Apps chapter.

Step 1 - Place the break point

Place a break point on the first line application_initializeHandler HelloWorld.mxml

Step 2 - Debug the application

Now click on the "inline" src"attachments" ""tuploads" "flex"" "debug_icon.jpg"

If all goes well, the application will start in the browser and you will see the following debug logs in the Flash Builder console

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

Once the application starts, you'll see the focus on the Flash Builder break point because we've placed the break point on application_initializeHandler the first line of the method.

You can see the stacktrace of the suspended thread.

You can view the value of the expression.

You can see a list of placed break points.

Now continue to press F6 until you reach application_initializeHandler line of the () method. /b10> As a reference to the function keys, F6 checks the code line by line, F5 1 further inverts, and F8 resumes the application. /b11> Now you can see application_initializeHandler of the values of all variables for the () method.

Now you can see that flex code can be debugged in the same way as Java applications can be debugged. /b10> Place the break point on any row and use flex's debugging function.