"My repository, where I post anything that I love, I learned and etc."

04 October 2020

Charles Proxy with Android Simulator (Genymotion)

 Assalamualaikum and annyeong chingu!



Last week, I manage to debug my Android device in Genymotion using Charles. It was my first time hearing about the Charles proxy. My friend explains that Charles proxy, basically was used to debug the mobile device (whether iOS/Android or real/simulators device).



Since I encountered some problem while testing the app in Genymotion device, I decided to connect Charles with my Android device (on Genymotion) to investigate what was the real problem that causing me, unable to make an order in the app.



At first I try googling about it. Found the solutions but most of it, more towards connecting Charles to real device. There are tutorials on connecting Charles to device on Genymotion, but somehow the steps are not really that clear (or maybe I'm too dumb to understand. Lols). 



But maybe not. I think its because my mindset at that time seems like in negative state. Yup. While googling, this was on my mind : 

"Does this step really works? Seems the steps is incomplete? Is it worth the time for me to try it, or will I just waste my time trying solutions that might not even works?"


So negative right? Lols. However I manage to push myself to try the solutions first and not worrying about the outcome (whether the solutions is a failure or success). But... I didn't follow steps on stackoverflow.com as usual. I try to follow tutorial on Confluence (made by my colleagues last year - i just entered the company this year).


At first, I got confused on the steps. I mean the title is for both simulators and real devices, but however the sub section description is more towards real device. So I got confused. Lols. But hell no, too early to give up. Let me try it first. After following the tutorial according to my understanding, I finally able to connect the Charles to device on Genymotion. Lols. I think the tutorial is correct, maybe only the title need to be updated. Below are the steps to connect Charles to device on Genymotion.


1. Download and install Charles at https://www.charlesproxy.com/download/latest-release (But my case, I use the 4.2.5 version as jar files on step 2 only available till this version)

2. Follow instruction on https://github.com/100apps/charles-hacking to obtain license. Search and click folder with same Charles version that you had download earlier.

3. Once clicking the folder, download the jar files. (Remember : Download the same version or else it won't work)

4. Once downloaded, go to :

Applications/Charles/Contents/Java

5. Replace the charles.jar in the current directory with the one that had been downloaded from github.

6.  Once done, open the Charles Proxy

7. Click Proxy > SSL Proxying Settings

8. Click 'Add' button and add your host to the list of Locations. (Ensure 'Enable SSL Proxying' already ticked in order to add). Add '*' in the list of Locations.

9. Click OK

10. Again go to Charles, click 

Help > SSL Proxying > Install Charles Root certificate on a Mobile Device or Remote Browser 

11. Click OK on 'Configure your device to use Charles as its HTTP proxy on XXX.XXX.X.XXX:8888, then browse to chls.pro/ssl to download and install the certificate' pop-up message.

12. Go to your device in Genymotion. (Ensure connect to the same wi-fi)

13. Go to Settings > Wi-Fi > Press and hold the Wi-Fi menu

14. Select 'Modify Network' > 'Show Advanced Options'

15. Select 'Proxy Settings' > 'Manual'. Follow exactly the instruction  as displayed on step 11 pop up message

16. Set proxy to 'XXX.XXX.X.XXX' (as displayed on step 11 pop up message)

17. Set port to '8888' and click Save

18. Click 'Allow' on pop-up displayed on Charles proxy

19. Open the device browser. Navigate to 'chls.pro/ssl'. Download the certificate.

20. Go to settings and allow the certificate to be installed

21. Once the installation success, there will be prompt to create your own pin on the device.

22. Done



No comments:

Post a Comment