As soon as we leave the IDE behind and begin real-world testing in the browser, one of the hardest aspects of debugging Flash RIAs, their data traffic and external asset requests is actually seeing what’s being requested and/or returned to Flash.
JPGs,SWFs and XML files that are loaded at run-time may have malformed URLs or point to incorrect, missing or misspelled folders. Data loaded from server-side scripts or web services may have typos in the parameter names or return unexpected results and our only option, for the most part, is to work out a solution by way of prior experience, guesswork and altering our app to include time consuming debug code or remote debugging (and losing half the app or half you hair whilst waiting for the debugger to update the MovieClip tree in real time).
This is where Charles steps in.
Charles is an debugging tool that acts as a middle man between the internet and the developer’s machine. Anything being sent or received over HTTP will be monitored and can be viewed or analysed without changing a single line of Actionscript. This includes data or asset requests and all of them are logged in either an easy-to-navigate folder structure, organised by domain or by order of request.
Each item is listed with its requesting HTTP headers, the server response (headers,data and/or image) and a sumary of url, filesize, response type and download time. If the response is an image, it is viewable and if it’s XML data, then it can be displayed in either ASCII (plain text format) or in navigable, browser style XML formatting. This means that we can see the exact data returned into either our XML or LoadVars objects and pick up any bugs or typos immediately, without having to second-guess ourselves.
When it comes to speed issues and really seeing how our application handles different connection speeds and streaming media, Charles also gives us the option to throttle bandwidth and force slower download speeds. This can be invaluable when optimising sites for dialup or low bandwidth users. It means that we can actually view the site from a real user’s perspective and actively deal with the implications of the longer download times.
In addition, we can disable all caching without having to touch any browser settings or putting time values on urls, etc. so that we can reliably retrieve the latest versions of swfs and images and bypass the whole “why hasn’t my content changed” issue that plagues all of us from time to time.
Getting Charles running really is as simple as just installing it. Charles can automatically alter the proxy settings of Internet Explorer to redirect requests and original settings are restored when Charles is closed. Other browers such as Firefox take a little more knowledge to configure, but this is no more than opening the browser’s preferences panel and entering new proxy server and port settings (remembering of course to change them back after you’re finished debugging).
Instructions on how to configure most popular browsers are also in the readme file in the installation folder or on the author’s website.
With shortcut keys set up to easily enable/disbable throttling, caching and some of the more advanced tools, the ability to export a session’s summarised data in CSV format for reporting and comparison (a truly excellent feature) – and a single user licence for only US$50, this app is a budget solution that sits very comfortably in amongst high-end development applications and will quickly become an essential and frequently used tool.
In fact the only really confusing thing about this application is why on earth the start up logo is a jug of flowers…
|Single User Licence||US$50|
|5 User Licence||US$200 (20% discount)|
|10 User Licence||US$300 (40% discount)|