Debugging mobile apps with Charles proxy

Aug 15th, 2016 in  by Michael Cho

Notes on using a HTTP / reverse proxy (Charles) to view all traffic between your mobile device and the internet.

Sometimes you need to inspect the traffic coming from your mobile apps, perhaps to debug an app in development or to understand any API calls by a 3rd-party app. An awesome tool for this is Charles, a HTTP proxy / reverse proxy to view all traffic between your device and the internet.

  1. First, note down your laptop's IP address. On a Mac, this can be done with either opening a terminal screen and typing ipconfig getifaddr en0 or from System Preferences > Network > Wi-Fi > Status.

    Finding an IP address

  2. Download Charles (https://www.charlesproxy.com/download/) on your laptop.

  3. Run Charles, and setup a proxy server on port 8888 (or any port you select) from Proxy > Proxy Settings.

  4. On your mobile device, setup settings to use a manual proxy at port 8888 on your laptop's IP address.

    Using a manual proxy

  5. Ensure your mobile device is on the same wifi as your laptop. Charles will display all traffic on your device. If you only want to inspect traffic to specific URLs, you can filter this in Tools > Whitelist.

  6. If you also need to view SSL traffic, you will need to enable SSL proxying. This step proxies your mobile traffic through Charles, and uses a separate certificate to encrypt / decrypt traffic. In Charles > Proxy > SSL Proxying Settings > Enable SSL Proxying and add the URL endpoints you want to view.

  7. On your device, visit http://www.charlesproxy.com/getssl to download the Charles certificate. You should now be able to inspect SSL traffic through Charles.

Other articles you may like

Bash script to relink alembic migrations
Jun 12th, 2017
Running Metabase locally as a service
May 29th, 2017
Creating lists of CSS selectors with SASS
Jun 21st, 2016