Programming Flex 3: Chapter 18, Application Debugging
Pages: 1, 2, 3, 4

Defining a Custom Target

If the built-in targets are not sufficient, you can define your own. To define your own target you need to implement the ILoggingTarget interface. For convenience, the logging framework includes the AbstractTarget class, which already implements a default set of behaviors that you can easily subclass to define your own target. Example 18-2 is a custom target that will send a message to a remote server via the Socket class rather than via trace().

Example 18-2. Custom target sending a message to a remote server via the Socket class

package com.oreilly.programmingflex.logging.targets
{
    import flash.net.Socket;
    import mx.logging.LogEvent;
    import mx.logging.AbstractTarget;

    public class SocketTarget extends AbstractTarget
    {
        private var _host:String;
        private var _port:int;
        private var _socket:Socket;

        public function SocketTarget(host:String = "localhost",port:int = 18080)
        {
            _host = host;
            _port = port;
            //This example omits the error handling. For production you will
            //need to handle errors when creating the socket and when sending
            //messages
            _socket = new Socket(host,port);
            super();
        }

        override public function logEvent(event:LogEvent):void
        {
            _socket.writeUTF(event.message);
            _socket.flush();
        }
    }
}

Example 18-3 is updated to use the new SocketTarget.

Example 18-3. Example 18-2 updated to use the new SocketTarget

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initializeHandler()">
    <mx:Script>
        <![CDATA[
            import com.oreilly.programmingflex.logging.targets.SocketTarget;
            import mx.logging.Log;

            private var _target:SocketTarget;

            private function initializeHandler():void
            {
                _target = new SocketTarget();
                Log.addTarget(_target);
            }

            private function sendToLog():void
            {
                Log.getLogger("com.oreilly.programmingflex.MainClass").info("Log
Message");
            }
        ]]>
    </mx:Script>
    <mx:Button click="sendToLog()" label="Log Message"/>
</mx:Application>

With Flex's built-in logging framework, you will be able to log messages, easily change options so that you can more easily debug an application, and integrate the framework within your application.

Section 18.7: Debugging Remote Data

Although you can use the debugger to inspect data after Flex has received it and before Flex sends it, you may want to find out more details regarding what data is being sent and received. You can achieve this by using the logging framework or a data inspector.

Debugging with the Flex Logging Framework

The WebService, HTTPService, and RemoteObject components use the Flex logging framework, which can greatly assist debugging applications. Messages are automatically logged to the Flex logging framework, so you won't need to enable the components to explicitly begin logging. Messages that are logged are within the mx.messaging.* filter. Example 18-4 is an HTTPService call with a TraceTarget that will show only log messages related to the server calls.

Example 18-4. HTTPService call with a TraceTarget that shows log messages related to server calls

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initializeHandler()">
        <mx:Script>
        <![CDATA[
            import mx.logging.Log;
            import mx.logging.targets.TraceTarget;

            private var _target:TraceTarget;

            private function initializeHandler():void
            {
                _target = new TraceTarget();
                _target.includeTime = true;
                _target.includeLevel = true;
                _target.includeCategory = true;
                _target.filters = ["mx.messaging.*"];
                Log.addTarget(_target);
            }

            private function sendToLog():void
            {
                Log.getLogger("com.oreilly.programmingflex.Logging").
info("Log Message");
            }
        ]]>
    </mx:Script>
    <mx:Button click="sendToLog()" label="Log Message"/>
    <mx:Button click="service.send();" label="Send HTTPService"/>
    <mx:HTTPService id="service" url="http://www.w3c.org"/>
</mx:Application>

This example will log messages from the HTTPService but not from the button click handler, which can be very useful when you are working with a larger application and you are interested in viewing only the log information from the mx.rpc components. The server component logs useful information on both the data that is being sent and received, as well as the information that can be used for profiling messaging performance. For the WebService component, this can be especially useful in gauging Flex's performance in terms of serializing and deserializing SOAP messages.

This excerpt is from Programming Flex 3. If you want to try your hand at developing rich Internet applications with Adobe's Flex 3, and already have experience with frameworks such as .NET or Java, this is the ideal book to get you started. Programming Flex 3 gives you a solid understanding of Flex 3's core concepts, and valuable insight into how, why, and when to use specific Flex features. Learn to get the most from this amazing and sophisticated technology.

Debugging Using a Data Inspector

When debugging network programming code, using a data inspector (packet sniffing tools or a proxy) is invaluable. With Flex, these tools can also be very useful. Adobe does not provide such a built-in tool, but many tools exist that work with Flex. If you are already comfortable with a tool, you can continue to use that tool.

Some common network debugging tools include the following:

Charles

This cross-platform proxy tool for debugging RPC communication also supports AMF3 (http://www.charlesproxy.com/).

ServiceCapture

This cross-platform proxy tool for debugging RPC communication supports AMF3 as well (http://kevinlangdon.com/serviceCapture).

Wireshark (similar to Ethereal)

This is a feature-complete packet sniffer that is capable of inspecting all traffic for both real-time applications as well as RPC (http://www.wireshark.org).

Fiddler

This is a quick HTTP proxy debugger that is free. It supports RPC debugging, but does not support AMF3 (http://www.fiddlertool.com).

Section 18.8: Summary

In many ways, a development platform is only as good as the debugging capabilities available to the developer. In this chapter, we covered many of the methods you can use to debug Flex applications.

Comment on this article
You must be logged in to the O'Reilly Network to post a talkback.