Summary

The web content provides instructions for setting up Charles proxy on Android emulators and iOS simulators, including troubleshooting steps for common connectivity issues.

Abstract

The article "Charles Setup for Emulator (Android) and Simulator (iOS)" outlines the procedures for configuring Charles, a network proxy tool, to intercept and debug network traffic from mobile applications running on Android emulators and iOS simulators. It emphasizes the importance of launching Charles before the emulator/simulator, setting the correct proxy IP and port, and installing the Charles CA certificate for secure network traffic inspection. The guide addresses potential connectivity issues and provides solutions, such as ensuring internet connectivity before setting the proxy and dealing with expired certificates. For Android, the article details the need for a local IP address setup and additional steps for Android SDK API 30 and above. For iOS simulators, it describes a simpler setup process, including the installation of the Charles root certificate and the macOS Proxy configuration. The article also includes troubleshooting tips specific to each platform.

Opinions

The author finds it beneficial to document the setup process for both Android and iOS platforms as a quick reference due to occasional forgetfulness.
Using an emulator or simulator is preferred for convenience, eliminating the need for physical devices during testing.
The author acknowledges that the Android Emulator previously required command-line configuration, but this method is now outdated.
A workaround is provided for instances where the Android Emulator fails to connect to the internet, referencing an external blog post for detailed steps.
The author suggests that manually entering the proxy settings in the Android Emulator is analogous to the process on a physical device.
The author indicates that a security pin is necessary on the device to install the Charles certificate, implying that this step enhances security.
An update for Android SDK API 30 highlights additional requirements for setting up Charles with newer Android versions.
For troubleshooting, the author advises checking for expired certificates, which could cause connectivity issues with Charles.
The author points out that the macOS Proxy setting should be turned off for Android and on for iOS when using Charles, indicating opposite configurations for the two platforms.
The article implies that the Charles CA certificate is essential for viewing secure network traffic, emphasizing its importance in the setup process.
The author provides a cautionary note that the macOS Proxy setting should be turned off if Charles prevents the computer from accessing the internet after use.

Charles Setup for Emulator (Android) and Simulator (iOS)

Diagnose your mobile app’s network traffic

Setting up Charles for physical devices and Emulator or Simulator is sometimes not exactly the same. Using Emulator or Simulator is convenient at times, as you don’t need to have the real device with you for your testing.

In case you don’t know what Charles is, it is a network proxy tool. In other words, it can be used to intercept the network connection (from devices, in our case), to allow viewing, redirecting, modifying, and debugging. It is also very useful for local server testing.

I often forget one of the platforms, so I am documenting both iOS and Android to enable a one-stop easy reference for both.

Before Starting the Emulator or Simulator

It would be better to ensure Charles is launched before you launch the Emulator or Simulator. I am not sure if this is always necessary, but it is a good step.

Android Emulator

In the past, connecting Android Emulator is done through the command line. It doesn’t seem to work anymore today. The approach used today is matching what the actual device does.

But before that, you have to ensure your Emulator startup is connected to the internet. Sometimes that is not possible, due to reasons unknown to me. Hence, the way to work around this is per the blog below. (Only use it if your Emulator can’t connect to the internet.)

Making Android emulator connect to internet

Have you ever frustrated that your Android Emulator is not able to connect to Internet? Gave up trying, and just use…

medium.com

Setting up the Proxy IP

After you have your Emulator launched with an internet connection, you need to find the local IP Address. Do this in Charles by looking up Help →Local IP Address.

After that, in your Emulator, go to the Wifi settings, and long-click on AndroidWifi, where you’ll get access to the Modify network settings.

In Modify, click on the Advanced options to expand the dialog box. Then, enter the IP Address in the Proxy host and the Proxy port (which usually is 8888). Then, click Save.

Certificate installation

Sometimes (in fact, most of the time), we’ll need to install certification to view the secure network. To do so, go to the Chrome browser and the address of chls.pro/ssl.

If Charles is already connected, you should get the inquiry to either download or replace your certificate.

After the download, you’ll be asked to install it. After that, you could save it with any name you like.

Note that your device needs to have at least a “pin” security setting to do that. If not, you’ll be prompt to set it up there.

Update for Android SDK API 30 (Android 11)

New requirement for Android SDK API 30 in setup Charles as below.

Setup Charles Proxy for Android SDK API 30 onwards

The extra steps to install Charles CA Cert on Android 11

medium.com

Troubleshooting

In case you can’t connect to Charles, try the below:

Ensure your device is connected to the internet before you set proxy with Charles.
Turn off the cellular network and just have the Wifi network on for the device.
Check that Charles’ macOS Proxy setting is OFF. You could check by looking in Charles’ Proxy → macOS Proxy. (Note that this step is the opposite of iOS.)
Check if you have an expired certificate. If you have both expired and not-expired, it will not work. You have to delete the expired one. To check, go to Settings →Security →Encryption and Credentials →Trusted Credentials →User (tab). https://stackoverflow.com/questions/77401309/is-charles-certificate-expired/77401670#77401670

iOS Simulator

In iOS, the setup of the Simulator proxy differs from the actual device, and it is simpler. You don’t need to explicitly key in the proxy address, and let Charles do it for you.

Connecting Charles to Simulator

After you launch your Simulator, in Charles, go to Help → SSL Proxying →Install Charles Root Certificate in iOS Simulators.

After that, you’ll get the below:

The next step is important, turn ON your macOS Proxy. This could be done by accessing it through Charles Proxy → macOS Proxy.

Certificate installation

Sometimes (in fact, most of the time), we’ll need to install certification to view the secure network. Go to the Safari browser and the address of chls.pro/ssl.

If Charles is already connected, you should get the inquiry to download a configuration profile as below. Allow it.

Then, you’ll get the below message:

After that, go to your Simulator’s Setting → General → Profile, you’ll get something like the below image. Click on it.

After that, click on install. You’ll set something as below.

After this step, one more to go.

Go to Setting → General → About → Certificate Trust Setting. Then look up for the certificate you just install and turn it on

That’s it.

Troubleshooting

In case you can’t get connected to Charles, try out the below:

Ensure your device is connected to the internet before you set proxy with Charles.
Check that the Charles’ macOS Proxy setting is ON. You could check by looking in Charles Proxy → macOS Proxy. (Note that this step is the opposite of Android)
Perhaps the certificate date has expired? Check https://stackoverflow.com/questions/77401309/is-charles-certificate-expired/77401670#77401670

Note: In case, after using Charles, you notice your computer can’t access the internet, do check that the Charles’ macOS Proxy setting is not ON. You could check by looking in Charles Proxy → macOS Proxy.

Thanks for reading.