Look ma, no upload! Remote debugging live SWFs with Charles Proxy

Have you ever wanted to be able to launch your live or staging site from Flash Builder, but still be able to debug your code in real time? With Charles, you can do just that! It doesn't take a whole lot of configuration, and is really useful when you need to run your app with real live data.

To clarify, let's just say your SWF's URL on your live server is:
     http://www.myapp.com/myapp.swf
Charles can re-route that request to a local file:
      /Users/Mike/Documents/Projects/myappp/bin-debug/myapp.swf
Combined with Flash Builder's debugger that allows you to launch HTML pages, you can launch your site at "http://www.myapp.com/index.html," and when your SWF is requested, Charles will serve up your local SWF, allowing Flash Builder to debug in real time. Pretty cool, huh? Here's how you do it:

To start, download Charles from here: http://www.charlesproxy.com, and install it. If you're using Firefox, also install the Charles Firefox Plugin.

With Charles open and running hit your live URL. For my test I'm using a simple SWF that just displays the loaderInfo's url. Find your SWF in Charles, it should look something like this:

Now, right click on that SWF file and click "Map Local." You should see a window that looks like this:

Now click the "Choose" button in the Map To section and select your local SWF that you would like to use to debug, then click OK. Next, open up Flash Builder and open the project this SWF belongs to, then right click the project in Package Explorer, select "Debug As," then "Debug Configurations." You'll see a window that looks like this:

Uncheck the "Use default" checkbox and replace the text with your live URL. This can be either the SWF file itself or the HTML page that the SWF resides on. I recommend using the HTML page route so that you're truly running in the context of your live site. Anyway, set a breakpoint somewhere in your code, then run your new debug configuration. It will launch your live site, but breakpoints will work! You can test your SWF with live data like this.

TIPS:

1. You can create multiple debug configurations for each project. I recommend having one for local and one for each of your remote environments you have to test on.
2. If you're doing this with a flex project you'll need to map a few more files. Flex splits the swf up into RSLs, so you're going to have to map each RSL for each project. This is kind of annoying but it only takes a couple minutes, and it's totally worth it.
3. To turn off/on the Map Local feature in Charles, go to Tools, then Map Local.
4. Charles is definitely worth the money if you do any professional development. Pay for it, help him out :-)

Happy debugging!

Comments

9 Responses to “Look ma, no upload! Remote debugging live SWFs with Charles Proxy”


  1. 1 Dan

    Awesome! thanks for sharing this.

  2. 2 Eric Priou

    What not simply use a local http server ?
    my 2 cents.

  3. 3 Brian

    This allows you to see how it behaves in production. Live site might have data that you want to test against. Or in the case of using the Facebook connect API, or something that needs a live server to call back to it makes development much easier. Of course we run local dev environments as well for everyday dev and debugging.

  4. 4 Dano

    Thanks for sharing!

    In some cases could be great to use this trick.

    In my personal case debugging in local or changing the gateway to the live server works for me.

    Regards,

  5. 5 Adam

    Great article — thanks for sharing.

    Is there a way to Map Local for modules? It seems modules do not get requested by Charles, so they can’t be locally mapped. Do you know of any workaround for this?

    Thanks!

  6. 6 lauren

    Adam,
    I had to double check in Charles to see if it was loading my module swfs and you’re right, they don’t show up!
    I would try manually inputting the location of the module swf anyway, it may still be able to be mapped even if Charles doesn’t show it.

  7. 7 rak

    Does Fiddler support something like this?

  8. 8 Alastair

    Great! Thanks for this, I knew about the Charles part but couldn’t figure out how to have Flash Builder not append ${swf}.html

  9. 9 Abhisek Paul

    You should be able to debug it in Google chrome. Just open the live site in one of the tabs in chrome. This creates the session with live site’s server. Now use flash builder(4.5) normally(make sure u configured chrome as the browser) to run ur local app. It should open ur app in a separate tab but will use live site session which u opened in the other tab in the same chrome window.

  1. 1 Adobe — ??? ?????? ???? » ????????? ??-?????? — ???? ? air, flash, flex ? ?????? ??????????? Adobe
  2. 2 Quick Tip: Debugging Module Inside Non-debug Application at Jozef Chú?ka's blog

Leave a Reply