cash loans
26 February 2008

Firebug’s Console Log, Flash debugging made easy

I have to admit, debugging in Flash has always been a painful thing. There’s nothing more stressful when everything works fine in the IDE, but completely craps out once pushed to the site, and you’ve got to figure out the problem right freakin’ now when the most you have to go on is “um, the Flash doesn’t work.”

Enter Console Log. For those of you who don’t have Firebug, get it. Now you can trace out to the Firebug console log from your .swf.

It’s as simple as two lines of code:

First, import the package declaration:

import flash.external.ExternalInterface;

Next, call to the log whenever you want to trace something out

ExternalInterface.call( "console.log" , "Hey! I'm tracing from Flash!");

Yes. It’s that simple. You can even add variables and other data to the trace. Just treat the argument as any other string:

ExternalInterface.call( "console.log" , "My variable is" + myVar );

This is even more useful when you can’t actually view the site. We recently had to debug an issue that was behind a client’s firewall. Rather than guessing back and forth, we were able to deliver a new .swf with a bunch of calls to the console, and solved the problem in a matter of minutes, as opposed to hours of guesswork.

Try it for yourself. You’ll appreciate how useful it is.

posted by David Lowe-Rogstad

thinking about… AS3, Flash, Productivity

17 Comments…

  1. Nate Miller said…

    Simple, and elegant. Thank you, sir!

    5:37 pm / March 14th, 2008

  2. KnuckIfYouBuck said…

    Perfect, this is exactly what I was looking for.

    7:16 pm / October 27th, 2008

  3. Alo? said…

    Is there a way to see the traces from Flash in the Net tab with the other requests?

    8:04 pm / October 27th, 2008

  4. Alo,

    As far as I know, there isn’t a way to write to the Net tab. That tab is logging all network events and a trace on the client side .swf shouldn’t be wrapped into that sort of information.

    If you could give us a better idea of what you are trying to do, or why you’d want to do that, we can see if there’s a solution.

    9:58 pm / October 27th, 2008

  5. erixtekila said…

    Simple but slow, limited to 40 kb buffer and reinventing the wheel :
    http://code.google.com/p/flash-thunderbolt/

    HTH

    4:41 pm / December 17th, 2008

  6. Glenn Barres said…

    Who cares if it is reinventing the wheel. At least with this you don;t need to install or add some new component.

    If everyone thought that since a wheel has already been made, no need to rethink it, we would not have computers that keep getting faster, cars that get better mileage, or different flavored pizza’s.

    Think outside the box erixtekila

    8:27 am / April 30th, 2009

  7. Joshua said…

    If you use the latest version of firebug be aware you need to ping the console directly from javascript before your SWF’s can do so…

    http://code.google.com/p/fbug/issues/detail?id=1494

    9:40 am / May 12th, 2009

  8. hamish said…

    Following up from Joshua, you must have a script tag in your page even if you don’t have any javascript or it does not work

    3:11 am / October 1st, 2009

  9. [...] s konzolí podrobně Firebug a Flash Oficiální [...]

    3:49 pm / January 4th, 2010

  10. jeremy said…

    Older versions of Flash
    getURL(“javascript:console.debug(‘myVar’,myVar)”);

    8:31 am / May 31st, 2010

  11. Jeremy,

    While that works, ExternalInterface is available for AS1+, Flash Player 8+

    It should be the rare case that you’d need to use getURL any more, but good to know.

    12:02 pm / June 1st, 2010

  12. Jorshasaur said…

    Pretty slick, thanks for posting!

    7:28 am / July 21st, 2010

  13. Try out FlashFirebug extension. It allows trace outputs and Firebug-like capabilities inside Flash

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

    2:14 pm / July 25th, 2010

  14. Admin said…

    Thanks for adding this. We will definitely check it out.

    9:13 am / July 26th, 2010

  15. Finally, I knew there was a way. I had seen it done before. Thanks for posting this, extremely helpful. Guessing and troubleshooting do not mix.

    Cheers

    12:49 pm / October 11th, 2010

  16. varun said…

    This is definitely very helpful. I have a question…
    How can we see the value of object in JSON format with children and values. First time a saw the value in JSON format but after that it was printing like [Object MyClass].

    Thanks

    11:51 am / April 20th, 2011

  17. Varun,

    The log window is just a text output, so it will output the value of whatever you are passing to the log file. You might try casting the class as a string String ( myObject ); or myObject.toString(); but if you want to dig into JSON value pairs you might have to write those internally to a string object then trace that.

    Something like this should be close;

    //where ‘myObject’ is the instance of the class I’m trying to trace;
    var tracevar : String = ‘Value is: ‘;
    for each ( var n : Object in myObject )
    {
    var val : String += ( n + ‘ is: ‘ myObject[n]);
    tracevar += ( val + ‘\n’); //force a new line each loop;
    }

    12:05 pm / May 24th, 2011

  18. Check out the all new FlashFirebug 3.0

    1. Greatly improved performance.
    2. Added 3D Transformation tools.
    3. Inspect inside Flash files.
    4. Added a console feature for Pro users.
    5. And much more :)

    Here’s FlashFirebug’s homepage:

    http://www.o-minds.com/products/flashfirebug

    12:09 am / July 1st, 2011

  19. fer said…

    It works!!! Thank you!!

    3:57 am / July 1st, 2011

  20. SJ said…

    Great!! exactly what I was looking for, especially a great help for a Flash AS3 newbie like me who is struggling for some debug support in browser

    2:17 am / May 19th, 2012

Have a comment?