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.