Charles for Flash Devs

Charles here to serve you

One of my main bread and butter rolls of my job is to send  and retrieve data from Flash to a data service that’s normally PHP.  I was introduced to a great program called “Charles” which labels itself as a “Web debugging proxy”.  In this article, I will outline some of the ways Charles has made my life much easier as a Flash Developer.  Charles comes in OSX, Windows 32/64, and ‘nix flavours and is free to try.

Debugging AMF

There are many ways to connect Flash up to a database. One of my personal preferred method is to connect to a mySQL database through AMFPHP, both MySQL and PHP are free to use and thus quiet popular combination.

AMF stands for Action Message Format and has been around for quiet a while , and it’s an efficient way to retrieve data from data source, there’s not as much overhead when comparing to formats such as XML, the downside is it is a non readable format meaning you can’t go to a URL and read it like you can with XML.

It sounds all great, but if you happen to have a problem  somewhere in the process of retrieving or sending data, Flash will throw a very generic ( and unhelpful) error like this.

Error #2044: Unhandled NetStatusEvent:. level=error, code=NetConnection.Call.BadVersion

Which doesn’t really help you at all.

Using Charles, you’re able to snoop out the data being sent and retrieved from your computer to the server, Charles is able to display the error in more detail.  In the example below, there was a ‘=’ missing out of my script, using Charles I’m able to get more valuable information such as a line number of where my script went wrong.

Click to Enlarge

Test Server Scripts

Charles allows you to test your scripts without having to fire them off within flash, this is a great way to isolate just the sever stuff outside of flash and resend PHP with edited parameters.  This also allows me to make sure nothing malicious can be done to my stuff using external calls.

Test your local files online

This is probably my favorite feature! It’s called “Map to local”.  When working on projects I generally have a few web services that the SWF relies on to function, and to properly test the file, it needs to be tested on the server with in a browser so it can communication to external services. Like below.

 

This becomes very problematic when more then one developer is working on the same project as some one developers changes might break / undo someone elses changes. You can’t have both developers compiling and uploading files onto the server, and a code merge can bring in new conflicts and eat up time.

This is where Map to Local comes into effect, you can tell Charles to map file on the server to a file onto your computer.  In turn, when you test within your browser, the browser thinks its retrieving a SWF from the server, but in fact, Charles is redirecting that call to a file onto your local computer.  It’s hard to explain so look below!

Other useful stuff

  • Force your browser to not cache anything
  • Simulate slower connection for testing on lower speeds
  • Finding out all requests that your browser is getting from the net

Conclusion

I hoped you found the article useful. If you have any questions, comment below or swing me something on twitter.

3 Responses to “Charles for Flash Devs”

  1. Matan Uberstein

    Hey, great article. I used Charles a while back when I was working on Mac, but I always longed back to Fiddler. (In-fact windows in it’s entirety, sorry I guess I’m just a fan-boy)

    Fiddler does all the mentioned above and it’s free, but it’s only for Windows. For those who are on Windows and don’t want to fork out some cash, try it out: http://www.fiddler2.com/

    But anyway, I could go on for hours, my take on this is simple. If you enjoy using Charles, use it – it’s a great tool, no doubt about it. If you are on Windows, give Fiddler a go. 😉

  2. Hicham Taoufikallah

    Hello,
    I use Fiddler too on Windows, it’s free and a great tool!

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>