Tiffany B. Brown

Debugging Flash applications with Firefox extensions

Using ExternalInterface and Firebug

Firebug logo
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

Image of 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.

Related posts:

19 Responses to “Debugging Flash applications with Firefox extensions”

  1. Mike says:

    Is there a link to what you did?

    Thanks

  2. Mike says:

    Is there a link to what you did?

    Thanks

  3. Not yet. It's still in development.

  4. Mike says:

    Wow thats really Nice. I loved it. How many lines of JavaScript code did that take?

  5. It took about 300 lines of JavaScript total — about 8K

  6. Mike says:

    300 lines and 8K, thats just ridiculous. Impatiently I hope to one day be as good as you.

  7. tiffany says:

    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.

  8. PB says:

    Not yet. It’s still in development.

  9. PB says:

    Not yet. It’s still in development.

  10. Mike says:

    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?

  11. Mike says:

    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?