How To

Case Study: How to use Charles Web Debugging Proxy

23 Jun 2016
1550
5 min

While testing an application on a mobile device, every QA tester has, probably, faced the situation when you tap on a particular item and nothing happens. In other words, it is not always possible to see what was sent or received between your web browser / client and the server. Without this capability, it is very difficult and time-consuming to determine on which side an error has occurred. In such situation to ensure the quality of your app, you need some additional tools. 

You can use standard developers' IDE. However, Xcode is not always at hand and Android Studio, in addition to the desired information, gives a lot of unnecessary info. Therefore, the best option for mobile traffic tracking will be the using of a proxy debugger. Personally I have chosen Charles Proxy. In this article, I will discuss how to configure the debugger and install SSL certificates to debug HTTPS connections.

Setup steps for Charles Debugging Proxy

The tool itself can be easily downloaded and installed from the application website. After installing, in the program you need to go to the Proxy > Proxy settings and add the port, in my case I have used port 8888.

Charles report

Next, to configure a mobile device you have to make sure that the device and the proxy server are on the same subnet. After that, open the settings of the Wi-Fi connection (long tap on the connection for an Android device), select the "manual" proxy settings, and enter in the "Proxy host name" ( "Server" in the iOS). IP-address of your computer on the network and the installed port in the appropriate field.

Charles report

It should look like this.

Charles report

How to work with Charles Web Debugging Proxy

Afterwards, you need to open a browser on a device and go to the site, such as msn.com. The following window will appear in the program. Here you should allow connecting to your mobile device.

Charles report

Now when "Recording" button is active, Charles will capture all traffic of the device, but information about HTTPS connection is not available. As a rule, the proxy server setting is over here, as most of the tested builds use HTTP. But we'll go ahead and set up Charles Proxy for the device to debug HTTPS connections as well.

For HTTPS monitoring setup, you need to download and install SSL certificates for the tool and device. For the SSL certificates, you need to open the SSL Proxying sub-menu in the Help menu and select "Install Charles Root Certificate". Then in the dialog box, you should add the certificate to your computer.

Your next step is to open your browser on the mobile device and click on the link - charlesproxy.com/getssl. After that, add the name of your certificate and click "OK". The only drawback is that you will have to set a password on your device (if you have an Android one). On the iOS device, you simply install the proposed certificate.

Further, in the desktop application you want to open the menu "Proxy", go to SSL Proxying Settings, and tick "Enable SSL Proxying". The next step is to click "Add" and in the window that opens, write "*" in the Host and Port fields.

Charles report

After the certificate is installed and SSL settings are added, you need to open, for example, youtube.com, in the device browser. If everything was done correctly, the Charles will display all the information about your request.

Charles report

A further possibility of Charles Web Debugging Proxy is to record and display all data received or sent via the browser. To use the tool in the Mozilla Firefox browser, you should install Add-on. Open a browser and write Charlesproxy.com/firefox, then add an addon itself in the browser on the page that opens. Next, open Charles and select the item "Mozilla Firefox Proxy" in the Proxy menu. Now, similar to the client, you can monitor inbound and outbound traffic of the browser.

Thus, Charles Proxy Debugger is a program with a large set of features and intuitive, simple interface, which makes a tester's life much easier, helps to save not only your time, but also the development team's time, and may be used for a variety of platforms and browsers.

If you require any help or have questions, we'll be happy to hear from you.

Rate this article:
( ) ( ) ( ) ( ) ( )
(1443 ratings, average: 4.51 out of 5)
Back to top
As s part of our team, be ready for:
Competitive Base Salary
Comprehensive Benefits
Great Work Environment
Drug Free Workplace
Tell us more about yourself