How to Set Up Charles on Android Emulators and iOS Simulators

Written by makeeva | Published 2023/10/06
Tech Story Tags: debugging | charles-proxy | qa-engineering | app-development | cross-platform-debugging | charles-on-android-emulators | charles-on-ios-simulators | charles-web-debugging-proxy

TLDRConfiguring Charles Proxy with Android emulators and iOS simulators is essential for debugging and testing mobile applications effectively. Follow these straightforward steps to set up Charles Proxy, and you'll gain valuable insights into your app's network behavior, helping you identify and resolve issues more efficiently during development and testing. via the TL;DR App

I assume that the majority of QA engineers have experience using the Charles application or similar tools to capture network traffic on real devices. There are numerous online guides available for this purpose. However, when it comes to using Charles with an emulator, I noticed a lack of recent articles addressing this specific scenario. Although the process is relatively simple, I’ve decided to create this guide to assist those who may be seeking guidance in this area.

Setting up Charles on Android Emulators

  1. To get started, open the Android Emulator and install your app. You can do this by dragging and dropping your APK file into the emulator window. Just keep in mind, that for sniffing traffic, you’ll need a custom version provided by developers that works with Charles.

  2. In the emulator: Settings -> Network & Internet -> Internet -> Tap on the available Wi-Fi connection (in my case it’s “AndroidWifi”). Connect to this network.

  1. Open the settings for this Wi-Fi network by clicking on the gear icon. Click on the pencil icon (top right corner). Proxy -> Manual. You’ll need to fill in the ‘Proxy hostname’ and ‘Proxy port’ fields. The Proxy Port should be set to 8888. To find out the Proxy Host Name on a Mac, you can check it here: System settings -> Wi-Fi -> Details (next to your Wi-Fi network). Or in Charles: Help -> Local IP Address. So now we can fill in the ‘Proxy hostname’.

  1. Perform an action in your emulator, such as opening the app you intend to use later. Then, switch to Charles and click on 'Allow'.

  1. After that, you need to install the certificate, following the same process as on a real device: open the browser, enter 'chls.pro/ssl' – the certificate download will happen automatically. You can find it in the notification shade.

  1. All we have left to do is install the certificate.

    Here's how: Go to your Android settings, search for 'CA,' choose 'CA certificate,' and install the certificate while approving any prompts.

Done! Now you can launch the app and monitor the traffic.

iOS

For iOS simulators, it's easier. You only need to follow these three steps:

  1. Launch a simulator.

  2. Open Charles, then go to Help -> SSL Proxying -> Install Charles Root Certificate in iOS Simulators.

You will see this success screen:

  1. Open the simulator, then navigate to Settings -> General -> About -> Certificate Trust Settings. Enable the Charles Proxy CA.

That’s all! Now you can see the traffic of the app. 😎


Written by makeeva | QA-engineer
Published by HackerNoon on 2023/10/06