In this four part series, we shall explore which tools help us observe HTTP traffic from web pages or mobile applications from a particular location or server onto our machine. While this part specifically discusses Charles, the rest of the series includes the following:
The summary shall discuss specific scenarios and compare each tool based on factors to help you make an informed decision.
Section 1: Introduction
Charles is a web proxy tool which displays and records data of all the requests made by web applications (websites/mobile sites & apps) to access the Internet. The official documentation of Charles describes the tool as:
“Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information)”
As soon as the application is opened, a new session starts. The session contains all the information recorded by the testing applications. The session can be cleared, saved and re-opened. If you select multiple requests you can save them all at once. Also, a new session can be initiated by simply clicking on the ‘New’ button. The recording button needs to be switched on to inspect and analyze the requests. Each request is in the form of request-response pairs: the request from our computer to the server and the response from the server to the computer.
Section 2: SSL Proxy and viewing requests
Section 3: How to use Charles
Step 1: Download and install Charles Debugger as per your system configuration (Windows, Linux)
Step 2: Open Charles Debugger
Step 3: Enable the proxy settings of Charles
a. Click on Proxy Tab button
b. Click on the Proxy settings
c. Here, specify port 8080 in the HTTP proxy, and then click on locations
d. Click on the SSL Tab and fill all the fields as per the above screenshot (Note: .* indicates Charles allows all IP address)
Section 4: Install the SSL Certificate
a. Open the installer for incorporating the certificate
b. The Certificate Import Wizard shall open. The screenshots to install the certificate are as follows:
Section 4: Testing on browsers
1. Find out the IP of your system. Go to Run and type cmd. As soon as command prompt opens, type ipconfig and note down the IP
2. Charles can run for any browser. Since Google Chrome is widely used, below are the screenshots for it. Click on ‘Settings’ and then click on ‘Show Advance Settings’
3. Now, click on ‘Change proxy settings’
4. Go to LAN settings
5. Now that we have completed the required parameters to be entered, let us open www.yahoo.com to test.
6. These requests are being capture in Charles as seen below:
Section 5: Testing on mobile devices
- Go to Wi-Fi settings of your phone
- Select the Wi-Fi from which you wish to test
- Long press the Wi-Fi selected and click on Modify Network
- Note your IP (discussed earlier) and enter it as the proxy hostname
- Put proxy port as 8080 and Save the settings
Note that the Wi-Fi being used by the machine (Desktop/Laptop) and the mobile needs to be the same
Now you can browse from your mobile and the request are been captured in the Charles Debugger.
Section 6: Charles certificate
Install Charles CA SSL certificate on the client mobile on which you are running the app. The Charles certificate is available from http://charlesproxy.com/charles.crt
Section 7: Are you ready to capture?
Test the mobile app, and amongst all the requests, look out for https://www.google-analytics.com
If you use a SSL connection, the request shall be bracketed under https://ssl.google-analytics.com
The various HTTP headers and the information concealed in it can be seen as shown in the above screenshot.
Charles makes it easy to diagnose and fix problems, and eliminates the issue faced by developers during testing of certain HTTP requests.
In case you are looking out for some specific requirements, please refer the links below:
- Getting started guide: http://www.charlesproxy.com/documentation/getting-started/
- Free version of the tool only supports 30 minutes of recording. To buy the tool, please refer: http://www.charlesproxy.com/buy/
- Configuration settings: http://www.charlesproxy.com/documentation/configuration/
We shall discuss Fiddler in the next part of this four part series.
- Soham Shah & Kartikay Sharma (Web Analytics)