Debugging Flash applications with Firefox extensions
Using ExternalInterface and Firebug
Lately, the day job has had me busting booty on a Flash/ActionScript project that makes considerable use of the ExternalInterface class.
ExternalInterface allows Flash to communicate with its HTML container using JavaScript. It’s a groovy feature, but one that changes the development process a bit. Unlike straight-up Flash development, ExternalInterface requires you to test interaction between the movie and its container.
One way to do this is using the Firebug console. Set up a simple debug function embedded in your HTML or in an external JavaScript file: function debug(data){ console.log(data); }. Then pass troubleshooting data to it using ExternalInterface.call('debug','data you want to write'); just as you would with trace().
I even used this technique to dump XML data to the console. Works amazingly well.
A minor drawback: compiler errors won’t be written to the console. Instead you will see a generic error message, and your movie won’t load.
Using Flash Tracer
For a more robust option, try Flash Tracer, a Firefox extension by Alessandro Crugnola. Flash Tracer uses native Flash logging to deliver trace() messages directly to the browser. To use it, you’ll need to install a debug version of the Flash Player.
Using LiveHTTPHeaders
Sometimes when sending and receiving data to and from a server, you can’t tell what’s wrong by looking at your Flash application. There could be an error in your server side code. Or perhaps there’s a problem with the data you’re sending. This is where LiveHTTPHeaders comes in handy.
LiveHTTPHeaders shows both browser-and-Flash request headers and server response headers. It also sends encoded GET and POST data from HTML forms or ActionScript URLRequest() / URLVariables() / URLLoader() operations.
This extension won’t show the actual data the server has returned. But you can use it to spot things like invisible line break characters and internal server errors.
Is there a link to what you did?
Thanks
Not yet. It's still in development.
It's now up at: http://www.satachievemore.com
Wow thats really Nice. I loved it. How many lines of JavaScript code did that take?
It took about 300 lines of JavaScript total — about 8K
300 lines and 8K, thats just ridiculous. Impatiently I hope to one day be as good as you.
Most of what’s happening on the site is using ActionScript. I only needed a few bits of JavaScript code to talk to the movie and for the movie to talk to the HTML page. Surprisingly simple.
Not yet. It’s still in development.
8K is a few bits? I'm going to be in a world of hurt as I learn this stuff hopefully it gets better. So how much was your ActionScript code?
If its not too much, could you write a blog post comparing ActionScript and JavaScript?
There is now FlashBug
https://addons.mozilla.org/en-US/firefox/addon/...