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.
    • http://www.borzoj.net borzoj

      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.

    • http://drawk.wordpress.com/ drawk

      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.

    • Jim Bachalo

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

    • Stef

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

    • http://drawk.wordpress.com/ drawk

      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.

    • http://www.websector.de/ sectore

      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

    • astronaute

      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.

    • http://drawk.wordpress.com/ drawk

      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.

    • Pingback: jodybrewster.net::blog » Blog Archive » Great Flash Debugger List

    • http://www.soulwire-illustration.com Justin

      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.

    • http://lab.kapit.fr Julien

      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

    • http://flashcrobat.noesi.co.uk flashcrobat

      Hi,
      I am aware that this post is quite old, but just to keep it uptodate ;)
      I have discovered one tool that is not mentioned here yet, and really like it. It is built in AIR, and yes, you have to add the class to your projects, but it also allows you to track code when your swf is already deployed.
      arthropod
      I have written about it on me Blog here:flashcrobat.noesi.co.uk

    • http://www.adylevy.com ady

      i wrote a nice firefox extension that allows the user to send error messeges to the firefox error console,
      so you can use it to send messeges from flash / silverlight / javascript or whatever you like.
      there is a flash demo on the site, soon i’ll upload a silverlight demo as well.
      it is as simple as 1 line in flash to trace something to the browser.

      http://www.adylevy.com/index.php/2008/12/20/debug-flash-and-silverlight-messeges-with-firefox/

      ady.

    • http://www.mylot.com/Emmanuel5165 consolidation ics debt

      consolidation debt ics consolidation debt ics