March 25, 2007

Debugging AS3 with firebug's console

Most probably you've already heard about firebug, if you haven't, I really recommend you go give it a spin right now.

Basically, firebug let's you lift the hood in your browser and see pretty much everything that's happening in there. It lets you edit, and monitor all HTML, CSS, Javascript live in any web page - it even lets you edit those objects on the fly!

It also gives you a fantastic console that lets you expose information about what's flowing through your scripts. Adding a global variable named "console" it exposes many methods that allow you to write to the Firebug console.

The really cool thing is that from flash you can call "console" using ExternalInterface, and any object you pass will be dumped as if it was a javascript object.

try it out:

ExternalInterface.call("console.log",{foo:123,bar:"da",boo:{da:12,beh:[123,145,"dfa",{fa:[0,1,2,4,5]}]}});

and you will see the output in the image above.

Console.log({foo:123,bar:"da",boo:{da:12,beh:[123,145,"dfa",{fa:[0,1,2,4,5]}]}});