Remote Debugging with Charles Proxy

By  on  
Charles Proxy

The most difficult part of supporting TV apps when you didn't create them and don't have access to the source code is debugging them when asked for help.  It's almost an unfair request -- "we wont give you access to edit the code but we want you to give use the answer."  Editing remote code is a pain...but thanks to Charles this practice got a whole lot easier.  Charles allows me to intercept calls to remote CSS and JavaScript files and substitute my own, allowing for infinitely easier debugging of remote code I don't have access to change.

Charles is loaded with features, so much so that it becomes confusing.  I'm hoping to make that more simple for you; in this post I will walk you through file replacement for the purpose of remote debugging of web apps.

Charles is a paid app which provides a 30 day trial.  I've not been paid or even asked to endorse Charles; it's the tool I use for remote debugging so I've chosen to write about it.

Charles can do just about everything but we're going to limit this post to solving one frequent problem:  swapping out a remote file for a local file that we can substitute, thus allowing us complete control over its contents and allowing us to an opportunity to fix any problems!

Remote Debugging

To swap out a remote file for a local file, the first step is using the Charles menu and choosing Tools>Map Remote.  The Map Remote Settings window pops up with a listing of remotes you've defined; to add one, click the "Add" button and you'll see the following screen:

Charles Proxy

The top block is for remote file settings and the second block is for your local substitution settings.  This means your file must be "served" (not using the file:// protocol); you can use Python or Node.js to easily serve a directory.  Assuming you're serving the file, you'll enter the remote URL settings first, followed by your local settings.  Here's an example:

Charles Proxy

The screenshot above shows me replacing a production MDN .js file with a local file.  To ensure the local file is being used, place a special console.log call at the top of the file and ensure the message is within the console.

This is just one of the simpler features that Charles provides but it has made my life much, much easier.  Debugging remote applications went from impossible to effortless after inputting a few rules into Charles.  If you have a good method for accomplishing this without Charles, I'd love to know, please share!

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    MooTools, Mario, and Portal

    I'm a big fan of video games. I don't get much time to play them but I'll put down the MacBook Pro long enough to get a few games in. One of my favorites is Portal. For those who don't know, what's...

  • By
    dat.gui:  Exceptional JavaScript Interface Controller

    We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives...

Discussion

  1. So far I had been editing the source codes by logging in through the FTP, taking back ups and editing and uploading the edited version. It would be interesting to try Charles to find out if it could help cut out some steps.

  2. Trevor W

    Thanks so much for the help! Especially the links to python HTTP hosting. I do have a question though – I ran everything like you said but no .js file is swapped :(
    When I go to my file at http://0.0.0.0:8000/local.js in the browser, it also shows a Charles Proxy error that it can’t connect to remote host. Actual error:
    java.net.ConnectException: Connection refused (Connection refused)
    What is wrong? Is there some proxy setting buried somewhere that I need to change in order to access locally hosted files?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!