How to set up Charles Proxy for mobile and web apps?
Ever wondered how to maintain quality of software even in worst-case scenarios be it network failures or server breakdown?
One of the solutions to the above scenario is replicating the possible failure environment by configuring Charles proxy.
Let’s understand how this tool helps in providing the solution to the mentioned cause in the various software apps.
Charles proxy is an interactive web debugging tool which acts as a middleware between the client (mobile or web app) and the internet. Using this tool we can configure client environment to pass all networking requests and responses through Charles proxy so that we can inspect and even change the data midstream to test how the app responds.
In Web and Internet development we are unable to see what is being sent and received between the web browser/client and the server. Without this visibility, it is difficult and time-consuming to determine exactly where the fault is. Charles makes it easy to see what is happening, so we can quickly diagnose and fix problems.
Basic Configuration
This is common for any type of app; mobile or web.
- Download Charles from the below link:https://www.charlesproxy.com/ make sure that this tool is a paid one, however, we can make use of its trial version.
2. Install the app and have a note of your machine IP address for further configuration
3. Download and install Charles root certificate on the desired remote device where the tests need to be performed i.e, android, iOS device or web browser.
4. Remote device configuration based on the Charles root certificate to be installed on various devices as follows:
IOS Simulator
Open Charles and select the option to install a root certificate on iOS simulator from :
Help>SSL Proxying>Install Charles Root Certificate in iOS Simulator
Open iOS simulator and enable Charles proxy certificate from settings as:
Settings>General>About>Certificate Trust Settings
Open the app under test and validate the requests and response based on the action performed on the app. Experiment adding the breakpoints to API requests and responses.
Android Emulator
Open Emulator settings and configure the Charles proxy for a device with android version N, using either command line or from emulator settings as below:
The command for setting up manual IP on an emulator:
emulator -netdelay none -netspeed full -avd <emulador avd name> -http-proxy http://<ip-system-proxy>:8888Configuring IP from emulator settings:
Open Charles and select the option to download the Root certificate either from mobile browser hitting chls.pro/ssl or via downloading the file on the system itself post which we can install the same to android device or emulator from:
Help>SSL Proxying>Save Charles Root Certificate…
Save the Charles root certificate to the system, copy to Emulator storage and install it as:
Emulator>Settings>Security>Trusted Credentials>Install from storage>open saved Charles Root certificate
Open the app now and validate the request and response on the Charles, Experiment adding the breakpoints to API requests and responses.
Web Browser (Chrome)
Charles proxy basic configuration remains same for web browsers as well where we install the Charles root certificate on the system and configure it for the browser on the Chrome settings as:
On macOS, please follow the instructions for the macOS above. These instructions only apply to Windows.
- In Charles go to the Help menu and choose “SSL Proxying > Save Charles Root Certificate”. Save the root certificate as a Binary Certificate (.cer) to the desktop, or somewhere where we can easily access it in the next step.
- In Chrome, open the Settings. At the bottom of the settings page, click “Advanced” to open the advanced section, then click the “Manage certificates…” button.
- Go to the “Trusted Root Certification Authorities” tab and click “Import…”.
- Find the certificate file saved from Charles in the previous step, then click Next and Finish, leaving the default options, until you complete the import. Chrome will now always trust certificates signed by Charles.
- After importing we can delete the certificate file that has been saved.
IOS Devices
Even for the devices, the concept of configuring Charles remains same as simulators just have to configure the mobile network proxy with the system and open chls.pro/ssl to get the root certificate download and enable it from settings from below steps:
Settings>General>About>Certificate Trust Settings
Android Devices
For connecting android devices configure the network proxy for the device as mentioned below.
Settings>Wifi>Connected network>Advanced>Proxy>Manual>Set host & port
After configuring it download the root certificate by either downloading to the device and installing it or via navigating to chls.pro/ssl from local device browser to download Charles root certificate.
Installation of root certificate may ask to add further security measures to devices for protecting the credentials before root certificate installation, once done the device is ready to be under Charles proxy influence to debug the network traffic.
Let’s assume we have Charles proxy setup ready on our chosen device.
Now let’s discuss how does the debugging work.
Debugging using Charles
This section focus on actual debugging of the requests and responses inspected via Charles and intercepted according to our need to replicate any particular realtime scenario. For interception there are various of its tools performing their respective functionalities, I want to discuss below few which I found very useful in debugging and ensuring the quality of app under test behaving in various network circumstance.
Breakpoints Tool
The Breakpoints tool lets us intercept requests and responses before they are passed through Charles. We can examine and edit the request or response and then decide whether to allow it to proceed or to block it.
When a request or response trips a breakpoint the Breakpoints window automatically opens in Charles and comes to the front. The Breakpoints window contains a list of the requests and responses currently intercepted and waiting for our action. Select the request or response to view and edit the contents. Then decide to Execute, Abort or Cancel the breakpoint.
For instance, the below test is for wwe.com to act as a breakpoint for any related request and response sent via the device under test.
Here, the Execute button applies any changes that we have made and lets the request or response proceed. The Abort button blocks the request or response and sends an error message to the client. The Cancel button discards any changes that we have made and lets the request or response proceed as if it wasn’t intercepted.
Rewrite Tool
The Rewrite tool enables us to create rules that modify requests and responses as they pass through Charles. Rules such as adding or changing a header or search and replace some text in the response body.
Using this tool we can set any specific API pre-configured as per our need like in the one example below I have used www.wwe.com link to test its behaviour when it throws server error with status code 500. Similarly, we can test any interdependent API and their effects on UI by rewriting it for any particular error scenario (i.e., for different response codes 409, 503, etc.)
Using this tool we can also alter the behaviours of any mobile app under test to respond as per the testing expectations and validate whether it’s ensuring the overall quality of the app or not. We can also save the mocked request and responses and share it within our team to have the tests ready.
I find this topic very interesting and worth sharing for practical hands on to debug the mobile/web networking. If you have any questions or if you think I messed up somewhere, please leave a comment.
Happy experimenting!
