Debugging mobile apps with Charles proxy

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.

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.
Download Charles (https://www.charlesproxy.com/download/) on your laptop.
Run Charles, and setup a proxy server on port 8888 (or any port you select) from Proxy > Proxy Settings.
On your mobile device, setup settings to use a manual proxy at port 8888 on your laptop's IP address.
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.
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.
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.