Debugging Flex

From TroubleshootingWiki

Debugging Flex

Official Page

Project Documentation

Download

Source Book ISBN 978-1-847195-34-0 Publisher Packt Publishing Author(s) Satish Kore

It is very important to understand the debugging techniques and tooling available with any Software Development Kit (SDK), and Flex is no different. Traditionally, debugging web applications especially the client-side code has been a cumbersome task. One of the core strengths of Flex is its ability to debug client-side Flex application code. The Flex SDK provides built-in debugging tools for speeding up the development of web applications.

The Flex SDK includes a fully-featured command line debugging tool called FDB (Flash Player Debugger). This tool can be used to debug your application. Although you can use the Flex Builder to do the same thing, it is good to have a free debugging tool as part of the SDK itself. We will not be covering this command line tool in depth. To know more about this tool, visit http://livedocs.adobe.com/flex/3/html/debugging_01.html.

Contents 1 Flash Debug Player 1.1 Using client-side logging 1.2 Flex Builder Debugger 1.2.1 The Debug view 1.2.2 The Variables view 1.2.3 The Breakpoints view 1.2.4 The Expressions view 1.3 Network monitoring 1.3.1 ServiceCapture 1.3.2 Charles Web Debugging Proxy 2 Additional References 3 Source

Flash Debug Player

In order to debug your Flex application, you need to install a debug version of Flash Player known as Flash Debug Player. When you install Flex Builder, it installs the debug version of Flash Player. But if for some reason you do not have it, you can download and install the latest version from the Adobe web site http://www.adobe.com/support/flashplayer/downloads.html. Make sure that you uninstall the older version of Flash Player before installing the latest Flash Debug Player.

If you aren't sure whether you have the Flash Debug Player installed or not, then follow the steps below to find out.

Visit http://www.adobe.com/products/flash/about/ and right-click on any Flash content, and see if the Debugger menu appears in the list. This web page also displays the version of your currently installed Flash Player.

If you see the Debugger menu, then you have Flash Debug Player installed. But if you don't see it, then you should download Flash Debug Player from the above URL.

Once you install Flash Debug Player, we are all set to start debugging our Flex application. We will start by configuring client-side logging so that the debug information is put into a log file created by Flash Debug Player.

Running an application in a debug mode in Flash Debug Player may affect your application's performance, and so it should be used only in the development environment.

Using client-side logging

Flex SDK and Flex Builder provide you advanced tooling and debugging capabilities. But you can use a simple client-side logging technique to print debug information from your Flex application in a log file, which can be used to debug your application.

In order to use logging, you need to set up Flash Debug Player's configuration file called mm.cfg. This configuration file is typically found in the following directories:

Windows 2000/XP	C:\Documents and Settings\<username>
Windows Vista	C:\Users\<username>

If this file is not present, then you can create a new file with the name mm.cfg and add the following entries in it to enable logging using Flash Debug Player:

TraceOutputFileEnable	Turns logging on or off. Use 0 to turn it off (default) and 1 to turn it on.
ErrorReportingEnable	Turns logging of error messages on or off. Use 0 to turn it off (default) and 1 to turn it on.
MaxWarnings	Maximum number of warnings to record. Default is set to 100. You can increase it and set it to 0 for unlimited.

The mm.cfg file should look like this:

 TraceOutputFileEnable=1
 ErrorReportingEnable=1
 MaxWarnings=100

Now we are all set to print debug information from our Flex application using the global trace() method. The trace() method is used to print debug information from Flex application into the flashlog.txt log file created by Flash Debug Player at the following location:

Windows 200/XP	C:\Documents and Settings\<username>\Application Data\Macromedia\Flash Player\Logs
Windows Vista	C:\Users\<username>\AppData\Roaming\Macromedia\Flash Player\Logs

Let's see one simple example of using the trace() method to print various kinds of information to the log file. Create a simple MXML application file and copy the following code into it:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="printDebugLogs()">

 <mx:Script>
 <![CDATA[
 import mx.utils.ObjectUtil;
 private function printDebugLogs():void {
 var str:String = "Flex Debugging Example";
 var obj:Object = {title:"Flex Debugging", pages:100};

 trace("This is debug line 1");
 trace("Printing variable: "+str);
 trace("Printing object: "+ObjectUtil.toString(obj));
 }
 ]]>
 </mx:Script>

</mx:Application>

In the above code example, we have defined a simple method called printDebugLogs(), which demonstrates how to use the trace() method to print various data to a log file. We are printing three different debug lines using the trace() method the first one prints a simple string, the second one appends a string variable value with debug information, and the third one prints the Object's properties using the ObjectUtil class's toString() method.

Now, run this application using Flex Builder and open your flashlog.txt file from the appropriate location. You should see the following lines in it:

This is debug line 1

Printing variable: Flex Debugging Example

Printing object: (Object)#0

pages = 100

title = "Flex Debugging"

Please note that the flashlog.txt file is a common file used by Flash Debug Player to write logs. So if you are running two Flex applications' printing debug information, then log statements from both the applications will be written into the same flashlog.txt file.

If you do not see the flashlog.txt file generated by your Flash Debug Player for some reason, you can visit http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_19323&sliceId=2 for troubleshooting tips.

Flex Builder Debugger

Flex Builder provides a full-blown modern debugger perspective that allows you to add breakpoints in your code, step through the code, evaluate expressions, and watch runtime variables and objects, and change their values in real time. If you have ever used Eclipse's Java debugger, then you will find this very familiar.

By default, Flex Builder compiles all .swf files with the debug mode enabled, and they are stored under \bin-debug folder under your project path. You can disable this behavior by setting the debug=false compiler option in the Additional compiler arguments field of your project's properties. The debug version of the.swf file is only recommended for development purposes, and is never to be used in the production environment.

With Flex Builder Debugger, you can set breakpoints in your code. To set a breakpoint, just open your MXML or ActionScript source file and double-click on the left margin area (highlighted in a green box in the following screenshot) of your code editor. Alternatively, you can also right-click on it and select the Toggle Breakpoint menu option as shown in the following screenshot:

This will add the breakpoint. Flex Builder puts a blue dot on that line number indicating that the debug breakpoint has been added, as shown in the above screenshot.

Now you can debug your application by clicking on the Debug As button on your Flex Builder's toolbar, as shown in following screenshot:

Choose debug as Flex Application if prompted, and then Flex Builder will launch your application in a debug mode.

Your application will run until it reaches the first breakpoint in your code. Once it reaches the breakpoint, Flex Builder will switch to the debugger perspective and open a few views which are useful for debugging your application. It should generally look like the following:

You can also switch to the Flex Debugger perspective by choosing Windows | Perspective | Flex Debugging. The Flex Debugging perspective contains different views that are discussed in the sections that follow.

The Debug view

The Debug view allows you to manage the debugging session. It displays a list of suspended threads of targets that you are currently debugging. It also provides the following options to control the execution:

	Resume	Resumes the suspended thread
	Suspend	Pauses the current debugging thread
	Terminate	Terminates the selected debugging thread
	Disconnect	Disconnects the debugger from the current debugging thread
	Step Into	Steps into the currently highlighted statement and continues debugging
	Step Over	Steps over the currently highlighted statement and executes the next line of code in a debug mode
	Step Return	Steps out of the current debugging thread and stops debugging after exiting the current method

The following screenshot shows the Debug view:

To speed up debugging, Flex Builder offers some handy keyboard shortcuts for debugging, as shown here:

• Step Into (F5)
• Step Over (F6)
• Step Return (F7)
• Resume (F8)
• Terminate (Ctrl+F2)

The Variables view

The Variables view displays information about the variables associated with the object that is being debugged. The variable view is split into two parts. The top part displays a list of variables in a tree structure. You can expand the tree structure and go into the variable details. The bottom part displays the selected variable's value. You can also change the variable's value by right-clicking on the variable and selecting Change Value from the menu. This is very helpful while debugging any logical problem in your code. The following screenshot shows the Variable view:

The Breakpoints view

The Breakpoints view lists all the breakpoints that you have set in your Flex Builder's workspace with the line number. You can double-click on the breakpoint to go to the source code where you have set that breakpoint. The following screenshot shows the Breakpoints view:

The Expressions view

The Expressions view is used to inspect the runtime data. You can select any variable, expression, or object from your source code, right-click on it, and select the Watch <selected expression> menu item to add an expression, variable, or an object into the Expressions view. You can also right-click on the Expressions view area and select the Add Watch Expression menu item to add custom expressions that you want to evaluate at runtime. The following screenshot shows the Expressions view:

These are the main debugging views provided by Flex Builder in the Debugger perspective. Apart from these, you have the Console view which displays errors and warnings, and debugs the trace() messages printed by your application or compiler.

Network monitoring

Network monitoring is a very important aspect while debugging any web application. Network monitoring tools provide you with information about the requests and responses sent and received by your application. This is very important to understand because applications mostly fail due to network-related issues such as wrong data being sent or received, latency in loading data, and so on. This also helps you to figure out the response time taken by every remote call made by your application. This information is important when you are benchmarking your application performance in a production mode.

There are many network-monitoring tools available that work for plain HTTP or Socket requests and responses. When using Flex these tools may not work, especially when you're using RemoteObject that uses the AMF encoding. But there are a couple of tools available that capture Flex remoting or AMF requests and responses, and provide you with detailed results that will help you to nail down the problem.

ServiceCapture

ServiceCapture is specially designed to work with Rich Internet applications to help developers in debugging, analysis, and testing their applications. This is one of the best tools available for monitoring Flex remoting AMF traffic.

ServiceCapture provides a very intuitive and easy-to-use user interface, which provides detailed information about network traffic generated by the application including HTTP, AMF, SOAP, XML, JSON-RPC, and so on. It includes the following important features:

Remote service deserialization	Decodes Flex/Flash Remoting or AMF traffic and shows it in an easy-to-use interface.
Bandwidth simulation	Allows developers to simulate different bandwidths to test their application even when it is running locally.
Map URLs to files	Allows you to replace a server response with the data from a local file. This allows you to test server operations with different sets of data.
Unit testing	Allows you to replay/resend any request from the UI. This is a good way to test specific server operation without actually using web applications every time.
Flash trace logging	Displays all your trace() logs within the same UI.
Monitor any log file	You can load any log file and watch it in real time. This is very useful while reading the flashlog.txt output.

ServiceCapture currently works only on Windows, supports Internet Explorer (IE) and Firefox, and requires Java 1.5. ServiceCapture costs $34 US for a single user license, but there is an option to download a 30-day evaluation copy for your test run. Please visit http://www.kevinlangdon.com/serviceCapture/ for its download and purchase details.

Charles Web Debugging Proxy

This is another good, network traffic monitoring tool available which supports capturing HTTP, JSON, JSON-RPC, XML, SOAP, and Flex/Flash remoting or AMF traffic. Charles proxy can also simulate different bandwidths to test your application under dial-up or broadband connection speed.

Charles proxy currently works on Windows, Mac OS X, and Linux/Unix; and it supports Internet Explorer (IE), Firefox, and Safari (on both Mac OS X and Windows); and requires Java 1.4 or above.

To read the complete set of features and download Charles proxy, visit http://www.charlesproxy.com/download.php.

Charles Web Debugging Proxy costs $50 US for a single user license, but there is an option that you can download a 30-days evaluation copy for your test run.

Both tools are more or less the same in features, and they are relatively easy to work with. These tools allow you to export the results as a .cvs file, and the resulted data is easy to read and understand.

There are many other free network traffic monitoring tools available such as Fiddler (http://www.fiddlertool.com/Fiddler2/), WireShark (previously known as Ethereal, http://sourceforge.net/projects/wireshark/), and Firebug-Firefox browser add-on (https://addons.mozilla.org/en-US/firefox/addon/1843). But none of these are found to be capturing Flex/Flash remoting or AMF traffic.

Additional References

For instructions on Installing Flex, click here

Source

The source of this content is Chapter 9: Debugging Flex of Flex 3 with Java by Satish Kore(Packt Publishing, 2009).