Custom debugger with air and LocalConnection

Custom debugger with air and LocalConnection

Date: 15 July 2010

Recently I've been creating more and more full flash sites. Nice projects and a good way to put your creativity in. If I say so... But sometimes when running in the browser something happens and the flash element stops working properly. When using the localTrusted player (CTRL + ENTER in Flash CS4) you'll see some nice traces (if ofcourse you entered any). So here is a small debug tool for just those cases. Maybe some of you heard of Arthropod. Wouldn't it be nice if you could create something simular?

Download the project here

First of all, create the UI

- Place a TextArea component on the stage called 'textAreaComponent'
- Place a Button in the left corner of the stage called 'clearButton'
- Make sure you publish this file as an AIR project later on
- Create a new baseclass "Main.as":

package 
{
	import flash.display.MovieClip;
	import flash.text.TextFormat;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import fl.controls.TextArea;
	import flash.net.LocalConnection;
	
	public class Main extends MovieClip {
			
		/** @private */
		private var _localConnection:LocalConnection;
		private var _lines:Array = [];
		
		/** @const */
		private const TEXTAREA_MARGIN:Object = { left: 5, top:25, right:5, bottom: 33 };
		
		// ________________________________________________________________________________ constructor
		public function Main() {
			stage.align = 'TL';
			stage.scaleMode = 'noScale';
			stage.addEventListener(Event.RESIZE, _resizeHandler);
			_resizeHandler();
			_setupLocalConnection();
			_setupTextArea();
			clearButton.addEventListener(MouseEvent.CLICK, _clickClear);
		};
		
		// ________________________________________________________________________________ setup
		
		private function _setupLocalConnection():void {
			_localConnection = new LocalConnection();
			_localConnection.client = this;
			_localConnection.allowDomain('*');
			_localConnection.connect('_debugger');
		};
		
		private function _setupTextArea():void {
			var txtFormat:TextFormat = new TextFormat();
			txtFormat.font = 'Courier New';
			textArea.setStyle('textFormat', txtFormat);
		};
		
		// ________________________________________________________________________________ receive method
		
		public function receive($method:String, $messages:Array):void {
			switch ($method) {
				case 'log':
					_appendText($messages);
				break;
				
				case 'error':
					_appendText($messages, 0xff0000);
				break;
			}
		};
		
		// ________________________________________________________________________________ getters / setters
		
		public function get textArea():TextArea {
			return this.textAreaComponent;
		};
		
		
		// ________________________________________________________________________________ event handlers		
		
		private function _resizeHandler(e:Event=null):void {
			var w:int = stage.stageWidth;
			var h:int = stage.stageHeight;
			textArea.x = TEXTAREA_MARGIN.left;
			textArea.y = TEXTAREA_MARGIN.top;
			textArea.width = w - TEXTAREA_MARGIN.left - TEXTAREA_MARGIN.right;
			textArea.height = h - TEXTAREA_MARGIN.top - TEXTAREA_MARGIN.bottom;
			
			clearButton.y = h - clearButton.height - 5;
		};
		
		private function _clickClear(e:MouseEvent):void {
			_lines = [];
			_writeLog();
		};
		
		// ________________________________________________________________________________ write log
		
		private function _appendText($text:Array, $color:uint=0x000000):void {
			_lines.push([$text, $color]);
			_writeLog();
		}
		
		private function _writeLog():void {
			var html:String = '';
			for each (var line:Array in _lines) {
				html += '' + line[0].join(' ') + '
';
			}
			
			textArea.htmlText = html;			
			textArea.verticalScrollPosition = textArea.maxVerticalScrollPosition;
		};
	}
}

Add Debug to your global classpath

package {
	import flash.net.LocalConnection;
	import flash.events.StatusEvent;
	
	public class Debug {
		
		/** @private */
		private static var _localConnection:LocalConnection;
		private static var _lastMessage:String;
		
		// ________________________________________________________________________________ logging
		
		public static function log(... $args):void {
			_send('log', $args);
		};
		
		public static function error(... $args):void {
			_send('error', $args);
		};
		
		private static function _send($method:String, $message:Array):void {
			_setup();
			_lastMessage = $message.join(' ');
			trace('[DEBUGGER]', $message.join(' '));
			_localConnection.send('_debugger', 'receive', $method, $message);
		};
		
		// ________________________________________________________________________________ set-up
		
		private static function _setup():void {
			if (_localConnection == null) {
				_localConnection = new LocalConnection();
				_localConnection.addEventListener(StatusEvent.STATUS, _statusHandler);
			}
		};
		
		// ________________________________________________________________________________ event handler
		
		private static function _statusHandler(e:StatusEvent):void {
		};
	}
}

Create a test flash element

Now just create a new flash file and use the following methods:

Debug.log('This will appear in the AIR debugger');
Debug.error('Something went wrong, or not ...');

Start the debugger air application and run your new flash app (with the above code) and you'll see messages appear from within the debugger, triggered by another flash app.