Debug your Android apps with Charles Proxy.
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:-
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.
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 Pinning
as well you can add that code also here, If you are new to SSL Pinning
please check my detailed post on it here.
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.
Here is one other article to help you while debugging:
and if you are into Modular app architecture you can check this cookie for you
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.