Using Charles
Last modified on Mon 10 May 2021

People always say "code and then test," I prefer “test and then code."

Charles is an HTTP proxy that helps you to inspect HTTP/S traffic. For the purposes of this tutorial, we will focus on Charles as a man-in-the-middle between the app you are testing on a mobile device and the Internet.

Charles setup

iOS setup

To be able to use Charles on iOS you need to do the following:

  1. Open Settings on your iOS device
  2. Tap on Wi-Fi
  3. Select the network to which your iOS device and your laptop are currently connected
  4. Tap on "Configure proxy"
  5. Tap on "Server" and enter your laptop's local IP address (find it in macOS' Network Preferences)
  6. Tap on port and enter "8888"

Android setup

It differs from device to device, but it usually goes something like this:

  1. Go to “Settings”
  2. Go to “Wi-Fi”
  3. Long tap on the Wi-Fi network to which the device is currently connected
  4. Tap on “Modify network”
  5. Tap on “Show advanced options”
  6. Select "Manual" in the “Proxy” menu
  7. Under “Proxy hostname” enter your laptop's local IP address (find it in macOS' Network Preferences) and under "Proxy port" enter 8888

After several seconds, you should get a prompt in Charles asking you to confirm traffic coming from your device.

If that does not happen, try restarting Charles. Now you will see all the traffic that your device is sending out and receiving, but it will be encrypted if done via a secure protocol (HTTPS).

SSL proxying setup

To see HTTPS traffic in plaintext, you will have to set up SSL proxying:

Now you should be able to "Enable SSL proxying" on an endpoint you are interested in and see unencrypted traffic in both directions.

Note: the above will not work if there is a pinned certificate in the app.

Adjust traffic

How to use breakpoints

Breakpoints enable you to stop requests/responses "mid-air" (in Charles) and change them before forwarding them back to the API or to the mobile app. By doing so, you effectively take full control of all the networking. :)

To set up a breakpoint, right-click on an endpoint and select "Breakpoints":

Select breakpoints

After that, execute some requests in the mobile app towards that endpoint and wait for Charles to intercept them.

Now you will be able to change the request before executing it if you wish to do so. You will also be able to change the response before forwarding it to the phone.

Debug breakpoints

If you want to rewrite requests and responses automatically, you can use Charles' Rewrite tool.