Charles Proxy: Developer’s & Tester’s Everyday Friend

1 April 2016 by Javal Nanda No comments

Charles Proxy is a great tool that will be helpful for everyday use for both Developer & Tester. It can be even helpful for other team members (BA/project lead) when they want to verify particular scenario without depending on deployment from developer’s side.

Charles is a web proxy (HTTP Proxy / HTTP Monitor) that runs on your own computer. Your web browser (or any other Internet application) is then configured to access the Internet through Charles, and Charles is then able to record and display for you all of the data that is sent and received.
In Web and Internet development you are unable to see what is being sent and received between your 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 you can quickly diagnose and fix problems.
Charles makes debugging quick, reliable and advanced; saving you time and frustration!
Charles works as an intermediate between your machine/device and the internet. Refer to the below image for an overview of it.

2000px-Proxy_concept_en.svg

The key features of Charles that can be useful in everyday use:

-SSL Proxying – view SSL requests and responses in plain text
-Bandwidth Throttling to simulate slower Internet connections including latency
-AJAX debugging – view XML and JSON requests and responses as a tree or as text
-Edit requests to test different inputs
-Breakpoints to intercept and edit requests or responses
-Repeat requests to test back-end changes
-Basic performance testing
-Remote/local mapping

Viewing response in Charles:

Screen Shot 2016-03-04 at 12.32.31 PM

Charles starts intercepting all the request/response as soon as you launch Charles on your laptop. As seen above, I can see what response I am receiving for the API request I triggered from one of the apps on iPhone simulator.

On the left hand, we can see that Charles clubs all the request under one group of same base URL. On the right-hand side, we can see a response related to the item selected on the left panel.

As we can there are various tabs at the bottom(Headers,Text,Hex,Compressed,Json,Json Text,Raw). These tabs help us to view response in the format we want. Charles auto-detects the type of API response and shows the appropriate tab. For e.g here we have JSON response, hence, JSON and JSON Text tab are visible. If it is not JSON response these tabs will not be visible. Same goes for XML.

Also, on the top, there are various tabs (Overview,Request,Response,Summary,Chart,Notes). These tabs allow viewing specific information related to an entire Http transaction. In a screenshot, we can see Response tab is selected which shows information related to response. Similarly, Request will give information related to a request sent. In overview tab, we can see an entire picture of the transaction related to status code, Request/Response Timing, Request/Response Size.

Enabling SSL Request:

If your connection is Https, you will not be able to directly view response in plain text. To view https data, we need to enable SSL proxying by right clicking on base URL as shown below:

Screen Shot 2016-04-01 at 1.02.25 PM

Also, make sure that Charles certificate is installed on your machine and also on simulators
(if you are using Charles to view simulator traffic for iOS). As seen below, go to help -> Install Charles CA SSL Certificate / Install Charles CA SSL Certificate in iOS Simulators.

Screen Shot 2016-04-01 at 1.09.53 PM

Note: We need to restart the simulator after install SSL Certificate and enabling SSL proxying.

Edit Request/Response:

Now, we know how to use Charles Proxy to view HTTP data. Let us move further to learn how Charles can be useful for editing request and response.

Editing Request:

There can be a different scenario in which you want to edit request.
1) As a tester you want to test API but don’t have mobile application/website available to request specific data but you have a reference Charles logs of similar kind of request, then you can use that request to edit the required parameter and re-execute the request from Charles without having the actual client (mobile app/website) to trigger the request.

For e.g: As seen below, I have Charles log for category 3014. Now I want to use it to trigger a request for category 3016. So, I can right click on 3014 and select Edit option. On selecting Edit, it will generate a new request in editing mode as seen in a second screenshot. Then on the right-hand side, I can alter the URL path from 3014 to 3016 and click on Execute to trigger the request for 3016.

Screen Shot 2016-04-01 at 2.07.11 PM

Screen Shot 2016-04-01 at 2.08.35 PM

2) As a developer, you want to edit the request/response at runtime. For that, you need to intercept the request/response by placing a breakpoint in Charles. Once you set a breakpoint for a specific URL, on next trigger it will break on both request and response. By default, a breakpoint is applied to both request and response. We can change it to intercept for a request or a response only from the breakpoints list based on our requirement.

Screen Shot 2016-04-01 at 2.11.31 PM

Screen Shot 2016-04-01 at 2.14.20 PM

Screen Shot 2016-04-01 at 2.14.34 PM

As seen above, I am setting a breakpoint for product id = 255. So, on the next request for the same product id, it will hit a breakpoint on Charles where you can edit it and execute it. Again on a response, it will halt on Charles side where you can edit the response if you want or execute as it is.

Following screenshot shows Breakpoints Settings where we can add/remove existing breakpoints. Edit a particular breakpoint by double clicking on it.

Screen Shot 2016-04-01 at 3.04.15 PM

Screen Shot 2016-04-01 at 3.16.19 PM

Please note: You will need to edit the response quickly within the time-out duration on your client side. Best practice is to keep edited response ready in the text editor and then just simply replace the entire response once a breakpoint is reached on Charles side.

This feature is very beneficial while developing when we want to test all kind of scenarios for which we don’t have a client interface available ready but we can reproduce it by changing the request/response from Charles side, create error response for observing how the app/client behaves.

Bandwidth Throttling:

Bandwidth throttling is very useful when you want to test the behavior your website/app in slow internet connections. To enable throttling, go to Proxy–>Throttling. Then go to Throttle Settings to set the required speed.

Screen Shot 2016-04-01 at 3.47.07 PM

Screen Shot 2016-04-01 at 3.46.45 PM

Repeat / Repeat Advanced

You can repeat any existing request from the Charles log. This will help to trigger same request to check API response/API testing without dependency of the client interface (website/app).

Repeat advanced can be used to do performance testing related to how much load your server is able to handle concurrent requests and to analyze what amount of requests succeed/fails when increasing the load on a server.

Screen Shot 2016-04-01 at 3.53.33 PM

Screen Shot 2016-04-01 at 3.53.15 PM

As you can see in above screenshot, you can set a number of Iterations and Concurrency which defines how many concurrent requests will be triggered for the number of iterations defined.
So, if you define 10 iterations with concurrency of 100, a total of 10X100 = 1000 request will be fired with 100 concurrent requests at a time.

Remote/local Mapping:

Remote / local is useful for a similar purpose when we referenced previously while discussing Edit Response feature. If we want a response to map from different remote/local URL, we can do so using remote mapping or local mapping. For e.g If we want to test a different version of JS without upgrading in code, we can locally map to load the newer version of JS and test the behavior.
Similarly, we can have local response file or local icon, image,etc that can be used to map response from.

Screen Shot 2016-03-04 at 12.39.15 PM

Screen Shot 2016-04-01 at 4.02.34 PM

Debugging on Android Emulator:

iOS simulator by default gets intercepted via Charles. For Intercepting Android Emulator via Charles, we need few extra efforts.

First, we need local IP address of the machine which can be found from Charles Help menu.

Screen Shot 2016-04-01 at 4.16.12 PM

We need to set this IP address and port number in proxy settings in an emulator.

Genymotion Emulator

Please follow the steps mentioned in screenshots below to enable proxy settings in your emulator.

Screen Shot 2016-04-01 at 4.29.36 PM

Long press on wifi network:

Screen Shot 2016-04-01 at 4.29.42 PM

Click on Modify Network -> In Proxy settings, select Manual

Screen Shot 2016-04-01 at 4.30.47 PM

Enter local Ip address in Proxy hostname and in proxy port enter 8888. Save the settings and now your emulator’s request will go through Charles.

Screen Shot 2016-04-01 at 4.31.02 PM

Android studio Emulator.

For using AVD with Android studio, you need to start the emulator from the terminal using the following command:

./emulator @proxyAvd -HTTP-proxy http://192.168.0.104:8888

Here proxyAvd is my virtual device name.

Connecting Device:

Android:

Steps to connect android device is same as android emulator mentioned above.

iOS:

Go to wifi settings on your device. Scroll down to HTTP Proxy.
Select manual and enter the IP address and port number.

94bb2f25-415b-4ea5-9ab3-e215aba19bd5

On very first connection with charges from your device, Charles will prompt whether to allow or not the new connection. Choose to allow and your device network traffic will go through Charles.

Make sure Charles SSL certificate is installed on your device. You can install it by visiting Charles website.

Save Charles log:

You can save Charles log by clicking on save icon on the toolbar.

Sources:
https://www.charlesproxy.com/
https://images.google.com/

Feel free to contact javal@idyllic-software.com for any queries or connect on LinkedIn

Javal Nanda

Follow me on Twitter

Leave a Reply

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

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home

Contact

Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)