Remote Debugging with Charles Proxy

16 / Feb / 2016 by Smriti Chawla 1 comments

The most difficult part of supporting apps when you don’t create them and don’t have access to the source code is debugging them. Charles allows to intercept calls to remote CSS and JavaScript files and substitute your own, allowing for infinitely easier debugging of remote code that you don’t have access to change.

Charles is an HTTP proxy sitting between your browser/ apps and the internet. Charles is a paid app which provides a 30 day trial.

Remote Debugging

Swapping out a remote file with a local file that we can substitute, thus allowing us complete control over its contents and providing us with an opportunity to fix any problems.

To map remote file for a local file, the first step is using the Charles menu and choosing Tools>Map Local. The Map Local Settings window pops up with a listing of locals 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.   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 replacing a production hero image file with a local.

This is just one of the simpler features that Charles provides but it has made life much, much easier.  Debugging remote applications went from impossible to effortless after inputting a few rules into Charles.


comments (1 “Remote Debugging with Charles Proxy”)

Leave a Reply

Your email address will not be published. Required fields are marked *