“Charles is a tool that you often use when you’re having a bad day.” –Karl von Randow, Charles author
We’re going to have to disagree with you there, Karl. At HotelTonight, we use Charles Proxy all the time to stress test and debug our mobile application — even on good days.
Charles helps us solve problems large and small; and here are four tasks we use it for:
An important part of the testing and debugging process is seeing how the mobile app performs under different (read: weak) network conditions. For example, we can test whether a failure notification properly displays by simulating a server timeout with Charles’ built-in network throttling and breakpoint functions.
Let’s see what it looks like when we test the promo code function with a simulated slow connection.
Then we run the app. You can see below that over a slow connection, our app successfully displays the on-screen loading spinner while waiting for the server to respond, just as planned:
We also run interruption simulations with Breakpoint Tools. Let’s see how it works when we simulate a timeout by setting a breakpoint on the response:
Finally, using a breakpoint, let’s test a complete network failure that occurs during an API request. But this time, we’ll abort the request after it’s made:
One of the first things to do when debugging an error is determine whether the problem is being caused by the app or coming from the server side. Charles can help us figure this out by letting us examine the code while we run the application.
Here, the app is being used in English to view hotels in Montreal, and it’s delivering a mix of local (French) and native (English) copy. Naturally, this is a big problem. And the bug that’s causing it is a problem too.
Here we can use Charles to look into the request headers while our server determines which copy to display. Let’s take a look at the Request tab to see the Accept-Language value the app is sending:
Which is fitting, as sometimes devices can be stubborn and continue to set the wrong language-locale request header values even after the device’s language and local settings have been updated.
Like many mobile apps, we use a client-server architecture, which allows us to utilize data caching on API requests to improve response times for clients. Often during testing, we’ll want to see how the changes we’ve made on the server display on the app, but we’ll get the cached input instead of the updated changes.
If we make the same request within a certain time frame, we get a 304 (Not Modified) error, which tells us that the server is trying to return the cached information rather than the updated information.
Charles allows us to easily turn off caching for a specific API endpoint by simply right-clicking on the endpoint and selecting “No Caching” from the contextual menu:
We have multiple test environments in addition to the production environment. Sometimes when content is created in the test environment, the test server response includes a URL for the production server in the API response for that content (we know, we know — not ideal).
Here’s an example of that for a launch modal that points to the production environment, instead of the test environment, to get an :
The beauty is that we can choose which fix to apply based on other configurations on the app. It won’t always make sense for us to completely change the server route, so we can use the breakpoint to manually edit the location, which comes in handy if it’s an individual problem.
Long story short: Charles is awesome, and we use it almost every time we test our app. The ability to monitor the interaction between the server, the client (our app), and even third-party API calls is integral to understanding how our app works and its overall performance. It’s an excellent debugging tool and has become an essential one that we couldn’t do without.
Before we go, here are a few tips on working with Charles that our team put together:
Switching Proxy Settings Changing the manual proxy settings on each device to enable multiple instances of Charles on multiple test devices for multiple team members…is a multiple of tedious and painful. Similarly, finding out that you forgot to disable Charles on a test device when you start to see a bunch of new requests added to your recording session by someone else can be troublesome.
On Android Lollipop (5.x and earlier), we recommend using the Proxy Settings app to quickly toggle proxy settings for Charles. On iOS and Android M and higher, we have yet to find a good solution. While we did have limited success in creating an iOS configuration profile with the manual Charles proxy settings already set and then installing it on the device, doing so seems to work for only a little while and to stop working over time. If you have any iOS or Android suggestions, let us know here!
About Charles and Getting Started There are many sources online explaining what Charles is and how to configure it for mobile devices. To use Charles on a mobile device, follow these instructions, install a cert on the mobile device, and (as needed) enable SSL proxying for desired host names.
Candidate Caught cheating in interview | lip sync | proxy | [Software Engineering Interview]
Charles Proxy is a web debugging tool that allows developers to view HTTP and SSL traffic between their computer and the internet. If you are applying for a position that involves web development, it is likely that you will be asked questions about Charles Proxy during your interview. Knowing how to answer these questions can help you demonstrate your understanding of the tool and impress the hiring manager. In this article, we review some of the most commonly asked Charles Proxy questions and provide tips on how to answer them.
I think that Charles Proxy has been a better option for debugging web traffic for a few reasons. First, it has a lot more features and options than Fiddler, which makes it a lot more powerful. Second, it is a lot easier to use and set up, which makes it more user-friendly. Finally, it is updated more frequently, which means that it is more likely to have the latest features and bug fixes.
To install Charles Proxy on Windows 10, you will first need to download the Charles Proxy installer from the official website. Once the installer has been downloaded, you will need to run it and follow the on-screen instructions. After the installation is complete, you will need to launch Charles Proxy and configure it to work with your web browser. To do this, you will need to open the Proxy menu and select the Proxy Settings option. In the Proxy Settings dialog, you will need to select the Web Browser tab and then choose the appropriate settings for your web browser. Once you have done this, you will be able to use Charles Proxy to monitor and debug your web traffic.
The process used by Charles Proxy to decrypt secure (HTTPS) connections is referred to as SSL Proxying. In order to decrypt the traffic, Charles Proxy must be configured as a man-in-the-middle between the client and server. This means that Charles Proxy will generate its own SSL certificate for the server, which the client will then need to accept in order to establish the connection. Once the connection is established, Charles Proxy will be able to decrypt and view the traffic passing through it.
Yes, it is possible to check the status of all incoming and outgoing packets in Charles Proxy. To do this, simply go to the Proxy menu and select the Proxy Settings option. From here, you will be able to see a list of all incoming and outgoing packets, as well as their status.
A veterinarian is a medical doctor who examines, diagnoses and treats animal diseases and health issues. Veterinarians often work in a clinic with an assistant or technician, though they might also work in a zoo, at a racetrack or with farm animals. They regularly interact with owners, obtaining medical histories and giving advice on the care of their animals.
Debugging Network Issues That Only Occur On Devices
Have you ever encountered a bug that you weren’t able to reproduce in the iOS Simulator but only later discovered that it is only reproducible on the actual device?
For me, that situation occurs more often than I’d like but it’s not all that surprising because as good as the Simulator is, at the end of the day, it is meant to simulate a real device. The best test is on the actual device(s) and platform(s) that your users will be using your app on.
For network related issues that are only reproducible on the actual iOS device, Charles Proxy can help you identify the cause of the bug (On a side note, there’ve been many cases where what I thought was NOT a network bug turned out to be indirectly caused by a network issue). You can test your app on your actual iOS device and see the network calls that it’s making and the responses that your app is receiving right from Charles on your laptop.
Here are the quick and easy steps to set this up:
Step 1 of 6: Make sure that your iOS device and your laptop are connected to the same wireless network.
Step 2 of 6: On your laptop (OSX) go into System Preferences -> Network to find your IP Address.
Step 3 of 6: Then on your iOS device, go into Settings, Wi-Fi
Step 4 of 6: Click the little arrow beside your wireless network to see the details of the network
Step 5 of 6: For the proxy settings at the bottom of the screen, select “Manual” and enter the IP Address you found on step 2 and the default port that Charles Proxy listens to is 8888.
Step 6 of 6: Now your iOS device will be connecting to the internet through your laptop on the port that Charles is monitoring. All your network requests from your iOS device will be viewable in your Charles window
Now you can test your application and see what network calls your app is making, and what responses it is getting back to help you troubleshoot all of those hard-to-resolve network related bugs.
Connect Mobile Device to Charles
First of all, you need to find the ip address of the device that runs Charles Proxy. Secondly, you need to modify your wifi connection’s Proxy settings. That settings should be manual. Proxy host name should be the IP address that you previously found. Proxy port will be 8888 as Charles’ default.
Finally, go http://www.charlesproxy.com/getssl on mobile browser and download the security certificate. Then install it by clicking on it.
Finally, open your mobile web browser and see the request coming from the device.
Most of the time, all the steps applies the same in IOS devices too.
FAQ
What is the use of Charles Proxy?
Why is Charles Proxy used in testing?
What is a proxy server interview questions?
- What is a proxy Server ?
- What is purpose of Proxy Servers ?
- What are different types of proxies ?
- What are different deployment modes of proxies ?
- Share some names of commonly used Proxy servers ?
- What is the default port of squid and how to change its operating port?
How do I test using Charles Proxy?
- Go to “Settings”
- Go to “Wi-Fi”
- Long tap on the Wi-Fi network to which the device is currently connected.
- Tap on “Modify network”
- Tap on “Show advanced options”
- Select “Manual” in the “Proxy” menu.
