Debug your Android apps with Charles Proxy.

let the debugging begin :)

Sometimes when we are debugging or checking any flow in any Android App we just need to see what API calls are happening in there.

Of course, if we are having Android Studio open nothing can beat the IDE’s debugger just see the Logs and done (we will get to know what API calls happening and all details about these APIs request/response etc.)

but what if we are not having IDE open and still want to check all these details?

We have few options in that case that can help us debugging our apps:-

• Charles
• Stetho and many more.

1. How to use Charles as an Android Dev / QA to debug the apps

Let's go through this process of setting it up Charles and respective needed things from scratch.

Step1- open https://www.charlesproxy.com/ and download the Charles app.

Download the Charles app based on your machine OS

after successfully downloading it Install this app.

Step 2- open the Charles App

And we will start seeing some basic traffic, so to avoid it and keep our focus only on what we want to see/debug, just select the Proxy option and uncheck this macOS Proxy. so it will stop showing all the traffic going through our mac.

Step 3- Code time,

For this blog, we have a sample app that uses few APIs to fetch some data. we want to see those APIs and their response etc.

For this, we need to use network_security_config.xml If you already using SSL Pinning in your app you will have this file, if you are not having this file, just create a folder xml inside res folder and add a file with this name.

and add this code.

<!--This is for charles proxy-->
<debug-overrides>
    <trust-anchors>
        <!-- Trust user added CAs while debuggable only -->
        <certificates src="user" />
    </trust-anchors>
</debug-overrides>
<!--end for charles proxy code-block-->

after adding this code this file will look like this.

with this Charles proxy-related code, if you wish to use SSL Pinningas well you can add that code also here, If you are new to SSL Pinningplease check my detailed post on it here.

SSL Pinning and Vulnerabilities Handling in Android.

and add this file in AndroidManifest.xml file

Step4 - open device, long press on Wifi, and click on modify network.

In your phone/emulator setting go to wifi, click on modify network (follow this below steps in video)

Now we need port code and Proxy hostname, how to get it, In Charles app click on Help then from the dropdown click on SSL Proxying and choose Install Charles Root Certificate on a Mobile device.

then it will show us these details :

Here we have both the values we want to add to our mobile device

Port — 8888

Host — 192.168.43.222

Fill in these details and click on save.

Step5 — install Charles proxy certificate on the device.

Open any web browser and type this : chls.pro/ssl

You will see an alert prompt up, download and open this,

and then save as Charles-proxy and click ok.

Now Charles Proxy certificate is installed.

Step6— let's take a sip of some juice and debug now :)

Let’s follow the below steps in debugging the video.

debugging android app with charles

Here is one other article to help you while debugging:

Debug your Apps without Cable.

and if you are into Modular app architecture you can check this cookie for you

Proguard in (Multi-Module Android App || Custom Library).

Setting Charles first time has few steps, but once you do it right- it will help a lot to increase your productivity, if you followed till here, please hit the like button :)

Well, This is the basic process to start with Charles proxy to debug our android apps, Stetho

for some next time :) till then “be you be happy + happy coding”

For more of our latest learnings on some interesting Android&iOS topics, you can connect to us on our brand new Native Mobile Bits youtube channel or LinkedIn & Github.