How to watch the requests of my mobile project?

Published in

ProFUSION Engineering

4 min readMay 10, 2021

To see what comes and goes on your device you can use Charles Proxy. Charles is an HTTP proxy/HTTP monitor/Reverse Proxy that lets us watch all of the HTTP and SSL/HTTPS traffic between our machine or device and the Internet. Kind of like a man in the middle of the server and client, checking everything that passes through. Once set, we can check every information sent and received by the client.

In our context, we are using Charles to debug our React Native application. In this way, we can see the requests made by the simulator or by real devices. Not only the traffic monitoring, Charles Proxy has other features, such as redo requests, edit requests to try different inputs, breakpoints for debug purposes, and so on.

Installation

First of all, you need to install Charles Proxy on your computer.

Ubuntu

On Ubuntu you will add the public key;

$ wget -q -O - https://www.charlesproxy.com/packages/apt/PublicKey | sudo apt-key add -

Add the repository to your sources:

$sudo sh -c 'echo deb https://www.charlesproxy.com/packages/apt/ charles-proxy main > /etc/apt/sources.list.d/charles.list'

Then update your sources and install it:

$ sudo apt-get update
$ sudo apt-get install charles-proxy

Fedora

On Fedora you will add the repository running with root permissions:

$ cat <<EOF > /etc/yum.repos.d/Charles.repo
[charlesproxy]
name=Charles Proxy Repository
baseurl=https://www.charlesproxy.com/packages/yum
gpgkey=https://www.charlesproxy.com/packages/yum/PublicKey
EOF

Then use dnf to install charles-proxy package.

$ sudo dnf install charles-proxy

Setting Charles

Let’s see if the proxy settings are set as below (Proxy > Proxy Settings)

Image 1: Proxy Settings. The default port is 8888.

2. You can set the locations you want to listen to (Proxy > SSL Proxying Settings)

Image 2: Locations to watch. You can add a * to watch all locations.

3. We need to add the device(s) we wanna spoof (Tools > DNS Spoofing…)

On Host Name put the IP of your device
On Address you put the IP of your computer

Image 3: DNS Spoofing settings. In my case, the Android simulator was running on 10.0.2.2

Setting your mobile device

We need to add a proxy to our network. Go to the WI-FI settings and open the advanced settings of your WI-FI network. Doing it, you’ll not be able to navigate on internet until install the certificate.

Image 4: WI-FI proxy. Add the IP of your computer as Proxy hostname and set the same port of Charles’ configuration, on our case, 8888.

2. You need to allow the device on Charles:

Image 5: Allow connection from your device

3. Go to https://chls.pro/ssl and download the certificate.

Image 6: Charles SSL certificate download page.

3. Depending on your Android version, you will need to install it on your device settings. You can search for “CA Certificates”:

Image 7: CA Certificate installation. After installing it, you’ll be able to navigate through the internet with Charles Proxy opened.

Let’s try it!

OK! Now we have our Charles Proxy setup. Let’s have a try. Ensure that you have your React Native environment correctly set up. Now, you can clone our sample project:

$ git clone git@github.com:Thiagotrfm/charlesDemo.git

Go into the project folder and install the dependencies:

$ yarn install

Now let’s run it on the device we have set before:

$ yarn android --deviceId=(YOUR DEVICE ID)

To get your device’s ID you can run:

$ adb devices

And here it is. Every time you press “reload” the app requests for http://api.kanye.rest a new Kanye West’s quote. We can see them on Charles:

On the “Overview” tab you can see the headers and other information about of your request.

Select a request on the side menu and select the “Content” and you’ll be able to see the content that was sent and what you received from our API.

That’s pretty much it for this article. Now you know how to watch the traffic of your device and debug your mobile application using Charles Proxy.