Rapture In Venice, LLC

:: Mobile Apps for iPhone, iPad, AppleTV and Watch

Getting the Charles Debugging Proxy to Work with iOS and Genymotion

The Charles Web Debugging Proxy is a near mandatory tool for any developer. Getting it to work with your desktop apps is usually very easy since it just…works. However, for use with mobile, there are a couple tricks.

Configuring for the iOS Simulator

The iOS Simulator is a native app that “imitates” your iTouch device. Because of that, the only configuration you need is to install the Charles certificate. You can do that by downloading the cert and just dragging it on to your iOS Simulator. (There’s no Windows configuration for this because you can’t run the iOS simulator on windows.)

Restart Charles and your simulator to be assured of a working connection.

Configuring for Genymotion/Android

We’re going to ignore the official Android emulator because you shouldn’t be using it anymore anyway. So, we’ll use Genymotion for this example. Since it’s a virtual machine, and not native, you need to relay the network connection to your local machine. If you don’t, Charles can’t see the internal Genymotion network and none of the requests will be seen.

First, we’ll need the Charles certificate:

  1. Download the Charles certificate for Android.
  2. Unzip and drag and drop it on to your running Genymotion device.
  3. Run the “File Manager” app on your Genymotion device and open your Download directory there. (NOTE: If this doesn’t work, see below.)
  4. Tap the certificate to install and name it however you wish. (You may be asked to set up a security code first.)

On some newer devices, this may not work and you’ll get the error “Couldn’t install because the certificate file couldn’t be read.”  If this is the case, go with these steps:

  1. Download the Charles certificate for Android.
  2. Unzip and drag and drop it on to your running Genymotion device.
  3. Go to Settings -> Security -> Install from SD card.
  4. Find Internal Storage/Download and select the Certificate.
  5. Tap the certificate to install and name it however you wish. (You may be asked to set up a security code first.)

 

With that done, now you need to configure a proxy to get the network traffic running through your desktop. Follow these steps exactly:

  1. Open Settings and tap Wi-Fi to see your wireless connections.
  2. You should see something like “WiredSSID”. Tap and hold it until a menu appears.
  3. Select “Modify network”.
  4. Change the “Proxy settings” to Manual.
  5. Change the “Proxy hostname” field to 10.0.3.2. This is a special Genymotion IP address so don’t try setting it in the original Android emulator. It won’t work!
  6. Change the “Proxy port” field to 8888.
  7. Tap Save.Restart Charles and Genymotion to be assured of a working connection. And remember, you’ll need to perform these two operations for every new Android device you create because they’re all physically separate.

    If you now run an app you’ll see the network connections appear. You’ll still have to configure SSL settings to see encrypted traffic, but that’s explained clearly in Charles and is up to you.

    And a final note, if you want to use Charles while running on a physical device, you need to set the proxy to point at your machine (with port 8888) and download a Charles certificate onto your device by hitting http://www.charlesproxy.com/getssl
    Go forth!

  • Print
  • Facebook
  • Twitter

John Blanco

John Blanco is a freelance iOS developer in Denver, CO. He's been developing mobile apps for 12 years, starting during the medieval days of Java ME, making him the ultimate hipster mobile engineer. Follow him on Twitter!

More Posts

Follow Me:
Twitter

, , , , , , ,

Comments are currently closed.