Charles Proxy Cookbook

Charles is an HTTP proxy / HTTP monitor that is very popular in the front-end community.

# 1. Changing response body with Charles

There are several ways to do this, I’ll show you how to use the Map Local tool to map a remote API endpoint to a local file.

If you are working on macOS, press and hold these three keys together: command, option, and L:

Map Local Settings

Make sure the Enable Map Local checkbox is checked, then click Add button. The following dialog will be shown:

Edit Mapping

All the form controls are quite easy to understand. Fill in the form according to your requirements.

I’ll take https://jsonplaceholder.typicode.com/users as an example, which is a mock json response server, mapping it to a local file named users.json on my desktop.

[
  {
    "name": "John"
  },
  {
    "name": "Ervin"
  }
]

So, fill in the form as following:

Edit Mapping

Click OK to save all the settings.

Finally make sure its macOS proxy is working:

Enable macOS Proxy

Now visit the API with your browser, you’ll find the response body was served from the local file: