Helpful Flash Debugging Tools

When debugging flash sometimes you need to either debug in browser or check a past version of the Flash player or the new beta player to see how things are looking. Here is a list of some tools beyond the included debugging IDEs FlashCS3 and Flex2 that are helpful to making your flash projects more bulletproof.

  • Firefox Flash Version Switcher from Sephiroth


    Find out if your code is just messed in the latest version or an older version of the flash player. This has links to the older versions of the Flash player from Adobe that you are interesting in testing.

  • Xray Flash/Flex Debugging Kit by John Grden XRay is a flash/flex debugger

    for real-time debugging and spying on your code. It is 16KB for the connector that you add to your files but it is debugging in style. If you have any issues with a live app or to help during testing Xray is great. It also includes a nifty admin site that allows you to access objects and spy on your code at any time.

    Xray (The AdminTool) is a “snapshot viewer” of the current state of your Flash application without impacting the performance or the file size of your application. Xray’s true nature is to look into the very guts of the Flash application and disolve the 2d myth you see on screen to a 3D tangible entity you can truly crawl through.Xray is brought to you by Blitz Labs.

  • AS3 Debugging with Firebug and Actionscript from marcosweskampWhen using Firebug (a web developers Swiss army knife for browser debugging) you can also use actionscript to write to the firebug console with this class from marcosweskamp The code to Console.as for firebug is here.

  • Output Panel from Senocular
    Last but not least, try out this class that creates or mimic the output panel in flash
    . Another great quick class from senocular. You have to change your trace command to Output.trace but I recommend that you abstract logging anyways to a method that can determine to trace, Output.trace(str:*) or any further logging you might want to do for debug or application logs (it also makes it easy to switch out logging options). This Output panel can help when you don’t’ have the debugger available, or for use in a live debug mode of your application. This class can be implemented in minutes.

    package com.senocular.utils {
    	import flash.display.Shape;
    	import flash.display.Sprite;
    	import flash.display.Stage;
    	import flash.display.GradientType;
    	import flash.events.Event;
    	import flash.events.MouseEvent;
    	import flash.geom.Matrix;
    	import flash.text.TextField;
    	import flash.text.TextFieldType;
    	import flash.text.TextFormat;
    	import flash.text.TextFormatAlign;
    	import flash.text.TextFieldAutoSize;
    
    	/**
    	 * Creates a pseudo Output panel in a publish
    	 * swf for displaying trace statements.
    	 * For the output panel to capture trace
    	 * statements, you must use Output.trace()
    	 * and add an instance to the stage:
    	 * stage.addChild(new Output());
    	 *
    	 * Note: You may want to place Output in an
    	 * unnamed package to make it easier to
    	 * trace within your classes without having
    	 * to import com.senocular.utils.Output.
    	 */
    	public class Output extends Sprite {
    		private var output_txt:TextField;
    		private var titleBar:Sprite;
    		private static var instance:Output;
    		private static var autoExpand:Boolean = true;
    		private static var maxLength:int = 1000;
    
    		public function Output(outputHeight:uint = 150){
    			if (instance && instance.parent){
    				instance.parent.removeChild(this);
    			}
    
    			instance = this;
    			addChild(newOutputField(outputHeight));
    			addChild(newTitleBar());
    
    			addEventListener(Event.ADDED, added);
    			addEventListener(Event.REMOVED, removed);
    		}
    
    		// public methods
    		public static function trace(str:*):void {
    			if (!instance) return;
    			instance.output_txt.appendText(str+“n”);
    			if (instance.output_txt.length > maxLength) {
    				instance.output_txt.text = instance.output_txt.text.slice(-maxLength);
    			}
    			instance.output_txt.scrollV = instance.output_txt.maxScrollV;
    			if (autoExpand && !instance.output_txt.visible) instance.toggleCollapse();
    		}
    		public static function clear():void {
    			if (!instance) return;
    			instance.output_txt.text = “”;
    		}
    
    		private function newOutputField(outputHeight:uint):TextField {
    			output_txt = new TextField();
    			output_txt.type = TextFieldType.INPUT;
    			output_txt.border = true;
    			output_txt.borderColor = 0;
    			output_txt.background = true;
    			output_txt.backgroundColor = 0xFFFFFF;
    			output_txt.height = outputHeight;
    			var format:TextFormat = output_txt.getTextFormat();
    			format.font = “_typewriter”;
    			output_txt.setTextFormat(format);
    			output_txt.defaultTextFormat = format;
    			return output_txt;
    		}
    		private function newTitleBar():Sprite {
    			var barGraphics:Shape = new Shape();
    			barGraphics.name = “bar”;
    			var colors:Array = new Array(0xE0E0F0, 0xB0C0D0, 0xE0E0F0);
    			var alphas:Array = new Array(1, 1, 1);
    			var ratios:Array = new Array(0, 50, 255);
    			var gradientMatrix:Matrix = new Matrix();
    			gradientMatrix.createGradientBox(18, 18, Math.PI/2, 0, 0);
    			barGraphics.graphics.lineStyle(0);
    			barGraphics.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
    			barGraphics.graphics.drawRect(0, 0, 18, 18);
    
    			var barLabel:TextField = new TextField();
    			barLabel.autoSize = TextFieldAutoSize.LEFT;
    			barLabel.selectable = false;
    			barLabel.text = “Output”;
    			var format:TextFormat = barLabel.getTextFormat();
    			format.font = “_sans”;
    			barLabel.setTextFormat(format);
    
    			titleBar = new Sprite();
    			titleBar.addChild(barGraphics);
    			titleBar.addChild(barLabel);
    			return titleBar;
    		}
    
    		// Event handlers
    		private function added(evt:Event):void {
    			stage.addEventListener(Event.RESIZE, fitToStage);
    			titleBar.addEventListener(MouseEvent.CLICK, toggleCollapse);
    			fitToStage();
    			toggleCollapse();
    		}
    		private function removed(evt:Event):void {
    			stage.removeEventListener(Event.RESIZE, fitToStage);
    			titleBar.removeEventListener(MouseEvent.CLICK, toggleCollapse);
    		}
    		private function toggleCollapse(evt:Event = null):void {
    			if (!instance) return;
    			output_txt.visible = !output_txt.visible;
    			fitToStage(evt);
    		}
    		private function fitToStage(evt:Event = null):void {
    			if (!stage) return;
    			output_txt.width = stage.stageWidth;
    			output_txt.y = stage.stageHeight - output_txt.height;
    			titleBar.y = (output_txt.visible) ? output_txt.y - titleBar.height : stage.stageHeight - titleBar.height;
    			titleBar.getChildByName(“bar”).width = stage.stageWidth;
    		}
    	}
    }
    

Other debug and logging tools that may help are listed here from OSflash.

  • Alcon – An external output console for Actionscript debugging

     

  • LuminicBox.Log – A logging API and output console for ActionScript

 

  • DebugIt – Displays traced data in a seperate SWF so you can debug outside of Flash, while running your application in its shell/production environment.
  • Print_r Debugger – Brings PHP‘s “print_r” to Flash, invaluable once you start to use it. Free, Complete Source Available
  • Sock4Log – JAVA application which displays traced data from SWF and other (PHP,JS…). Could be a command line or windowed application.
About these ads

11 Responses to “Helpful Flash Debugging Tools”

  1. borzoj Says:

    don’t forget about flash tracer:

    https://addons.mozilla.org/en-US/firefox/addon/3469

    it’s a firefox add on that displays trace() output in a sidebar window. requires flash player debug version.

  2. drawk Says:

    Hey Borzoj, Yeh was going to include it but people are having issues with the latest version of the flash plug-in crashing Firefox. But it is definitely worthwhile to check out.

  3. Jim Bachalo Says:

    What about luminicbox??
    Pretty simple but it serves most of my needs.

  4. Stef Says:

    Has anyone tried Alcon (http://osflash.org/projects/alcon)? Looks good to me for a debug logger!

  5. drawk Says:

    Jim and Stef, I added them both to the list at the bottom. There are such great tools at OSFlash, I have previously used liminicbox and as2logger.

  6. sectore Says:

    Check out ThunderBolt, which is a logger extension for AS2/3 and Flex 2/3 applications based on the Firebug add-on for Firefox:

    http://code.google.com/p/flash-thunderbolt/

    -sectore

  7. astronaute Says:

    Hello drawk,

    “Firefox Flash Version Switcher” is working on your Firefox 2 ?

    Can you tell us how to achieve that please, because on my computer there is no way to run it …

    Thank you.

  8. drawk Says:

    Hey astronaute,

    Yeh I installed it and it worked but I had to close and reopen firefox 2. I am on Windows on this machine and it is installed. I dont’ have issues but others on the thread do. I have only used if for the older flash9 and the flash8 versions with no problems but it seems like it can crash FF.

  9. jodybrewster.net::blog » Blog Archive » Great Flash Debugger List Says:

    [...] Here is a great list of Flash debugger and logging APIs care of Draw Logic      [...]

  10. Justin Says:

    Great resourse mate, thanks for sharing. I was just wondering what syntax hilighter you use for you wordpress posts? It looks good, mines buggy as hell so I’m looking to switch.

    Keep up the good work.

  11. Julien Says:

    Thanks for this list of great components.
    I wish to add in it KapInspect, this new free Flex debugging, introspection and inspection tool.
    Somehow similar to FlexSpy (it even integrates FlexSpy’s excellent stylesheet editor), it allows the developer to dynamically inspect all data of its application, drilling-down into classes as in the Flex debugger windows (except for private vars)
    It also has a powerful EventConsole that allows to trace all standard events on UIComponents and framework objects (timer, ArrayCollection,..)
    You will find it here: http://lab.kapit.fr/display/kapinspect/Kap+Inspect

    On this site (http://lab.kapit.fr), you will find other free Flex components, mainly for data visualisation: Flex diagrammer component, Graph visualizer with many automatic layouts, Treemap and Radar chart (Kiviat) component


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: