Charles What?

Charles Proxy is a GUI to "man-in-the-middle" (MITM) yourself by snooping and/or modifying your own HTTP(S) requests. Usually, this is seen as a problem. However, it can be an immensely powerful tool for front-end development. I will explain what can be done with it.

Test Updates Before Go-Live

I used to maintain a JavaScript file which was deployed on hundreds of e-commerce websites. There were times I needed to know if my logic was going to work before deploying. So, in this case, I would "Map Local" the JavaScript file. This allowed me to map HTTP(S) requests for the remote JavaScript file to a local .js file instead. This is how I would know that my code was solid, before deployment.

A customer once claimed my JavaScript was breaking their website. To prove that that was not the case, I quickly mapped the production .js file to a blank file, and proved that their website was still broken even with my .js file having no content.

Test Production Level Data

Unfortunately, a production environment sometimes includes data which is missing within development or UAT environments. Perhaps an edge-case of the system is the reason. If I need to test a front-end change with this set of data, I could use the "Rewrite" feature of Charles to replace the body of a development or UAT request to be whatever data that I need to test. This often times is much faster to do, rather than mocking up the data for the interface to use.

Test Backends

In the last example, let's say you spun up a resource in Europe (you know because of privacy laws) for your backend. You want to test end-to-end that the new region is working, before pointing your library to this new region. In this case, you can "Map Remote". Just swap your US region DNS with your EU region DNS.

That's Charles

Hopefully this illustrates a valuable tool for you. Sometimes working with the front-end of the web can feel like having super-powers. You can do anything you want and most likely no one will know. The same cannot always be said when you make changes to backend technologies.