Remote Debugging with Charles Proxy
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!
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:
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:
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!