How do you track the traffic between your program and a web server? Using Charles proxy, of course! It allows developers of client/server solutions to check if the app they are building has any issues when connecting to the remote sources of data (videos, files, databases). Using the program, one can easily check:

• how an app behaves with large or small volumes of data;
• transferred data’s format;
• requests, responses, and their parameters;
• the way servers process bad requests and the app processes bad responses;
• how the app processes errors, etc.

Essentially, Charles allows users to oversee data transmitted between their computer and a certain server, which, under normal circumstances, remains hidden from the users. Programmers and webmasters can use this data to improve the performance of their sites. For regular users, leveraging a proxy can be a decent way to familiarize themselves with the main principles of the Internet’s functioning.

Installation and the first launch

Everything starts with downloading a setup file from the official website. The free trial lasts for 30 days, after which a 30-minute time restriction on a single session will be imposed. To resume your work, you’ll need to restart the app every time it shuts down. If the need for longer sessions arises, you’ll have to purchase the app to continue using it without any limitations. Follow the installation procedure and launch the app.

During the first launch, the program will offer to adjust your network settings so that they could work with it properly. Click Grant Privileges and wait for the app’s interface to load. It is an important step; if it is missed, the app that is being tested won’t be able to use intermediary services offered by Charles.

Charles works perfectly with most modern browsers, both desktop and mobile. The setup procedure, however, may vary from one system to another. To let the software configure automatically, Edge, Chrome, and Safari users don’t have to perform any additional actions after installing the app. Firefox users will need to install a special add-on to ensure that Charles proxy launches automatically along with the browser.

Launching the program on mobiles

Mind that your mobile device and the computer with the debugger proxy must be connected to the same network. Windows and macOS devices perform all necessary configurations automatically, while mobile devices require manual setup. You don’t need to set the program’s running port by hand; its predetermined value is 8888. However, you’ll need to change the proxy setting of your mobile device (from Off to Manual).

Configuring an iOS device

As mentioned earlier, setting up Charles proxy on IOS is fairly simple: just locate the current network in Settings and change its proxy setting from Off to Manual. Your device will then ask to input the server’s IP, which should be identical to that of your PC. Mind that you’ll need to turn off Charles manually every time you finish using it.

As soon as you start using your iPhone, the proxy will ask you to approve the connection. After that, your mobile device and its IP-address will get on the Access Control list of the proxy.

If you are planning to test your app with an iOS emulator, it should connect to Charles automatically. If it fails to do so, try restarting it or set the proxy as the system one in your macOS.

Configuring your Android device

Not all Android devices have the setting for HTTP proxy. If your phone/tablet does, just follow the procedure that is rather similar to the one described in the iOS configuration: change the name of the proxy to the IP-address of your computer with Charles, and change the port to 8888.

In order to use an Android emulator, add an additional command line in it and type: http-proxy http://LOCAL_IP (this is your computer’s IP-address):8888.

Regardless of the mobile device you use, don’t forget to switch the HTTP proxy off after you finish using it. If you fail to do so, your apps will show network failures.

Working with SSL-Encrypted websites

Mind that Charles won’t work with HTTPS-protected websites without Charles root certificates. They must be installed by hand, through going to Help>SSL Proxying. Within this menu, you should see a dedicated button for installing the needed certificates. The process will be completed automatically (yet mind that you’ll need to set the certificates’ status to “trusted” in your browser). Fortunately, this process is rather simple:

On a Windows computer (to be used with IE or Edge)

• When you see the message that your certificate is not trusted, click on Install Certificate. Certificate Import Wizard will be launched.
• Import it into Trusted Root Certification Authorities and override the automatic selection.
• Finish working with the wizard.
• Restart the browser if needed.

Using Firefox

• Make sure that the browser is connected to Charles.
• Open https://chls.pro/ssl in Firefox. The browser will show a certificate import dialog. Choose “Trust this CA to identify websites” to finish the import.

Using Chrome

• First, you’ll need to save Charles root certificate as a Binary Certificate (.cer). This can be done in Charles’ Help menu, by clicking on the SSL Proxying tab.
• Go to Advanced Settings in Chrome and click “Manage certificates.”
• Import your newly saved certificate by clicking on the “Trusted Root Certification Authorities” tab.
• After you finish the procedure, all certificates signed by Charles will be automatically trusted by Chrome.

On macOS

• Launch Keychain and find Charles among the available options.
• Click on the certificate to open a panel and choose Trust.
• In the drop-down menu, select Always Trust and click OK.

After completing the above steps, you should have a ready-to-work setup. On the left side of the program’s interface, you will see the Structure/Sequence tree, where all the connections will appear. By clicking on them, you can see the requests that your app is making to domains. In the field on the right, all the request configurations and details will be shown.

If you need to collect data for future analysis, press the Recording button at the top. If you are interested in a specific domain, right-click on it and select Focus. This will hide all other domains under the Other Hosts group.

Installing Charles SSL certificate on mobile platforms

For IOS users, the process is rather simple. The SSL certificate can be installed only upon the HTTP proxy setup. To receive the SSL certificate, follow the link. Give your permission to install the certificate and use the proxy without any limitations.

Android users will face more difficulties, as they need to configure every particular app to trust Charles for making the whole thing work. To do this, add the Network Security Configuration File to the application. This file will make your app trust certificates installed by Charles.

Using Charles to modify Requests/Responses: Rewrite tool

When you can clearly see all requests to a necessary domain, you can try and modify them in order to find possible issues with your app or website. For example, you can try and change any parameter in the headers or the body of a request and check what response the server is going to give. You can also send a correct request but change the response to see how your app processes faulty responses. All of this can be done with the help of the Rewrite tool that is used exactly for that: modifying requests or responses.

Go to Tools>Rewrite>Enable Rewrite to be able to use it with any domain. When you click on the domain name, you will observe the Rewrite button in the bottom right corner. Click on it to add your location and rule. In the dialog window that appears, click Add and type * to process all the requests or a specific URL and path. In the rule field, click Add and:

• Select the type of rule you want to create in the drop-down menu.
• Check either Request or Response to specify where the rule will be applied.
• Use Match fields to write what request/response you will be working with or leave them blank to process all of them.
• Use Replace fields to enter either the name or the value of the rule you will modify.

What makes Charles Proxy stand out from similar propositions?

The software has many notable advantages over its competitors. First, there is a significant trial period, which allows users to gain a comprehensive view of the app’s potential. Charles proxy works with most operating systems and browsers available today, making it an ultimate solution for anyone. The whole system is fairly easy to use, especially if you aren’t planning to work with SSL encrypted websites (which, however, can hardly be a case in 2020).

Conclusion

When testing an app or website, checking its usability is not the only way to see if there are bugs and issues. To fully understand and eliminate possible issues with the network connections, using Charles or a similar tool for debugging is crucial. We recommend Charles because it can be installed within minutes, provides a significant number of useful features, and works on a wide variety of platforms.