Part One: Debugging the right way: Charles

by on

filed under

As web analysts, we yearn to collect as much data as possible. The presence of several JavaScript customizations and the multitude of analytical platforms have meant that gathering data is not difficult anymore. For websites and mobile optimized sites, we have several viable testing options including GA debugger, Google Tag Manager Assistant and data slayer to name a few. However, testing mobile apps is an altogether different challenge since it is complex and its solution is not available directly.

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:

  1. Fiddler
  2. Wireshark
  3. Summary/Comparison of these tools

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

For viewing purposes, the chart feature helps you see the request on a timeline chart and it should be used when you want to analyze when the requests were started, when the response (download) started and when it ended. If you are investigating a HTML web page, you shall see related requests such as images, JavaScript, CSS etc. You can export data from a session in Charles via CSV/Text file/XML. We need to identify the host names which we want to enable SSL Proxy on. After adding a host name to the SSL Proxying list, we may need to restart Charles for the changes to be reflected. The .* allows all host names to be included in the SSL Proxy settings.

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 to test.

6. These requests are being capture in Charles as seen below:

Section 5: Testing on mobile devices

  1. Go to Wi-Fi settings of your phone
  2. Select the Wi-Fi from which you wish to test
  3. Long press the Wi-Fi selected and click on Modify Network
  4. Note your IP (discussed earlier) and enter it as the proxy hostname
  5. 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

Section 7: Are you ready to capture?

Test the mobile app, and amongst all the requests, look out for

If you use a SSL connection, the request shall be bracketed under

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:

We shall discuss Fiddler in the next part of this four part series.

Please post your questions and feedback in the comments below. For any queries, please feel free to mail at or

- Soham Shah & Kartikay Sharma (Web Analytics)

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>