Charles Web Debugging Proxy: How to use it and what is it for.

Figure I: Charles Web Debugging Proxy Presentation

On my way as a QC Tester, I have always encountered several types of bugs and many obstacles. But in some instances, I’ve come across the problem of not being able to identify a specific pattern with certain bugs in the environment of a mobile application.

That’s when a teammate recommended Charles Proxy. Charles Web Debugging Proxy is a cross-platform HTTP debugging proxy server application written in Java. It enables the user to view HTTP, HTTPS, HTTP/2 and enabled TCP port traffic accessed from, to, or via the local computer.

In short, you can inspect network calls and debug SSL traffic. With Charles, you are able to inspect requests/responses, headers, and metadata. So this helped me a lot to identify where and when the app failed, also being able to identify if I was calling the correct APIs and the type of response code. This also helped me to be able to make different test cases by making POST, PUT, and GET requests. You can perform similar tests in the Postman tool.

Below I want to share a guide on how to use this tool:
It can be installed on macOS, and Linux but in this case, I will show you how to Install Charles on Windows 10 and connect it to an Apple mobile device.

• First visit: https://www.charlesproxy.com/download/ and select the version of your operating system where you want to install Charles.

Figure II: Charles Wizard Setup

After having installed Charles on our computer, we must manually configure and enable the HTTP Proxy on our mobile device.

• The mobile device must be connected to the same Wi-Fi network as our computer
• Go to settings, then Wi-fi, and open the Wi-Fi network where you are connected.
• In HTTP Proxy open the option “Configure Proxy”

Figure III: iPad Settings configuration

• Set Proxy to Manual and Complete the fields
• Server: Your Address IPv4 (You can find this IP address on your computer. Go to Network Status and then enter properties of your network, there you will see the detailed information of your network and the IPv4 address)
• Port: Always 8888 (is the charles app port)

Figure VI: Proxy Configuration

• Once we have our HTTP PROXY configured we must install the SSL certificates on our mobile device.
• Open Safari and browse to https://chls.pro/ssl.Safari will prompt you to install the SSL certificate.

Figure V: Install SSL certificate in Safari

• After downloading the SSL certificate we must install and accept this certificate
• Go to Setting, open General and then VPN & Device Management

Figure VI: VPN & Device Management Ipad configuration

• Select the downloaded PROFILE and Install it
• After that we need to enable Root Certificate
• Open Setting, go to General and open “About” then “Certificate Trust Setting”

Figure VII: Approve the certificate

• Enable the Charles Proxy ROOT Certificate

Figure VIII: Certificate Trust Settings

• Now with our Proxy configuration done and the installed certificates we can proceed to use the Charles tool on our computer.
• With Charles open you have to go to Proxy > SSL Proxying Settings and add *-* or the domain you want to inspect SSL on.

Figure IX: Configure SSL Settings from Charles App

Figure X: SSL Proxy Settings

• You will see a toolbar at the top where you will have certain buttons to start viewing and controlling HTTP traffic.

Figure XI: Start using Charles

Let’s dive deep into a brief description of each button.

• Clear Button: Upon clicking this button, the session will be cleared and after that, you can start a new session.
• Stop/Start Button: After launching the tool, by default, this button will be in ON mode. You can click on this button if you want to stop the log recordings.
• SSL Proxying: If you enable SSL proxying in settings as discussed in earlier sections, then this button will be turned on and you can stop SSL proxying at any time. Thereafter you can only see the traffic with limited data as SSL proxying is disabled.
• Network Throttling: Network throttling is to simulate different network bandwidth conditions like 2G, 3G, 4G, and WIFI. It can also be used to simulate customized modem network speeds. It is useful when you have to test any application that has network dependencies or it will be useful to test how your application is behaving in different network conditions. You can customize the speed and other network conditions using keyboard shortcut Control+Shift+T or by clicking the Proxy menu => Throttle settings.
• Breakpoints: This feature does not help much unless you are developing an app. If you mark any request as a breakpoint, then the next time Charles comes across this request, it waits for the user input asking the user to continue to the next point or to abort. This is similar to debugging code in Eclipse or Android Studio.
• Compose: Compose helps you to edit any request and send the edited request. You can edit/add any parameters and can execute to get the results for changed requests.
• Repeat Button: This button is to repeat a specific request. Once you click on this button, the request in the editor will be sent again. This feature comes handy when you want to recreate a request without performing the action again.
• Validate: Validate functionality is to validate the selected requests or responses. If you click on it, a new tab will be opened in the editor and you can see the validation results there.
• Tools: This section contains different tools that help in debugging the traffic.
• Settings: The settings menu contains Access control settings, Proxy settings, Recording settings, Preferences, etc.

Let’s see how the requests are displayed!

First, the most important thing is that in the panel on the left, there is the structure, this is where we see the traffic of all the requests that we are sending either from a web browser or a mobile application.

In this case, I am going to show you a POST request that I did and where we can see the header and the body of the request and the response.

Figure XII: Charles Overview Tab

• Once we find the request we want, we will see on the right panel of the Charles all detailed information of the Request in the Overview tab. For example, the URL of the request, status and response code, what type of method we perform, type of content, client ip, etc.
• On the right panel we can open the Contents tab and here we can see the headers, data authentication and the Body in JavaScript, JSON, etc. At the top we will see all the information of the Request and at the bottom all the information of the Response.

Figure XIII: Charles Content Tab

Charles Proxy has become a valuable tool over the years. So if you are a software tester I recommend you try it out. This tool can change the way you test a mobile App and you can search many tutorials on the internet for the different functions offered by Charles Proxy.

Joaquin Gonzalez — QC Engineer @ Arcadia Tech