Charles--ios Development Tools-Network packet Analysis tool

Brief introduction

Charles is a common tool for intercepting network packets under Mac, and in iOS development, we often need to intercept network packets for debugging and server-side network communication protocols. By setting himself up as a network Access Proxy for the system, Charles enables all network access requests to be done through it, enabling the interception and analysis of network packets.

Charles is a freeware and can be used for a free 30-day trial. After the trial period, unpaid users can still continue to use, but each use time can not exceed 30 minutes, and start with a 10-second delay.

Therefore, the payment scheme is very user-friendly, even if you do not pay for a long time, you can use the full software features. Just when you need to do the package debugging for a long time, it will be affected by Charles ' forced shutdown.

Charles ' main features include:

1. Support SSL Proxy. You can intercept requests that analyze SSL.
2. Supports flow control. You can simulate slow networks and long wait times (latency) of requests.
3. Supports Ajax debugging. JSON or XML data can be automatically formatted for easy viewing.
4. Supports AMF debugging. The flash Remoting or Flex Remoting information can be formatted for easy viewing.
5. Support to re-send network requests, convenient back-end debugging.
6. Support for modifying network request parameters.
7. Supports interception and dynamic modification of network requests.
8. Check whether Html,css and RSS content meet the standards.

Install Charles

Go to Charles's official website (http://www.charlesproxy.com) to download the latest version of the Charles installation package, which is a dmg suffix file. When opened, drag Charles to the application directory to complete the installation.

Installing an SSL Certificate

If you need to intercept the analysis of the SSL protocol related content. Then you need to install Charles's CA certificate. The steps are as follows:

1. Go to Http://www.charlesproxy.com/ssl.zip to download the CA certificate file.
2. After extracting the zip file, double-click the. crt file in it, and then select "Always Trust" in the pop-up menu as follows:
3. You can see the certificate that was added successfully from the Keychain access. As shown below:

Set Charles as a system agent

As mentioned earlier, Charles was intercepted by setting himself up as a proxy server, so the first step to using Charles was to set it up as a proxy server for the system.

When Charles is started, Charles will ask you to set permissions on the System agent for the first time. You can enter the login password to grant Charles this permission. You can also ignore the request and then, when you need to set up Charles as a system agent, choose "Proxy" –> "Mac OS X Proxy" in the menu to set Charles as the System agent. As shown below:

After that, you can see a steady stream of Web requests appearing in Charles's interface.

Introduction to Charles Main interface

Charles provides 2 views of the package, named "Structure" and "Sequence", respectively.

1. The structure view classifies network requests by the domain name that is accessed.
2. The sequence view sorts network requests by the time they are accessed.

You can switch back and forth between the two views according to your specific needs.

For a specific network request, you can view its detailed request content and response content. If the response is in JSON format, Charles can automatically format the JSON content for you to see.

Filtering Network Requests

Typically, we need to filter the network requests and only monitor requests sent to the specified directory server. We have 2 ways to do this.

1. Fill in the filter bar in the middle of the main interface with keywords that need to be filtered out. For example, our server's address is: http://yuantiku.com, then only need to fill in the filter bar Yuantiku.

2. In Charles's menu bar Select "Proxy" –> "Recording Settings", then select the Include column, select Add an item, then fill in the protocol, host address, port number to be monitored. This allows you to intercept only the packets of the target Web site. As shown in the following:

Typically, we use Method 1 to do some temporary packet filtering, using method 2 to do some frequent packet filtering.

Intercept network packets on your iphone

Charles is often used to intercept local network packets, but we can also use them to intercept network requests on other devices when we need them. I'll take the iphone as an example to explain how to do it.

The settings on Charles

To intercept the network request on the iphone, we first need to turn on Charles's proxy function. In Charles's menu bar, select "Proxy", "Proxy Settings", fill in the agent port 8888, and check "Enable transparent HTTP proxying" to complete the setup on Charles. As shown in the following:

Settings on the iphone

First we need to get the IP address of the computer where Charles is running, open terminal, enter ifconfig en0 , and get the IP of that computer, as shown in:

In the iphone's "Settings", "Wireless LAN", you can see the current connected WiFi name, by clicking on the right of the details key, you can see the current connection of WiFi details, including IP address, subnet mask and other information. At the bottom of it is an "HTTP proxy", which we'll switch to manual, then fill in the IP of the computer where Charles is running and the port number 8888, as shown in:

After setting up, we open any program that needs network communication on the iphone, we can see Charles Pop-up iphone request connection Confirmation menu (as shown), click "Allow" to complete the setup.

Intercepting SSL Information

Charles does not intercept SSL by default, and if you want to intercept all SSL network requests on a Web site, you can right-click on the request and select SSL Proxy, as shown in:

In this way, all SSL requests for the host can be intercepted.

Analog Slow network

When it comes to iphone development, we often need to simulate a slow network or a high-latency network to test whether the application behaves properly under the mobile network. Charles has provided a good support for this requirement.

On the Charles menu, select "Proxy" –> "throttle Setting", and in the dialog that pops up, we can tick "Enable throttling", and you can set the type of throttle preset. As shown in the following:

If we only want to simulate the slow network of the specified site, you can tick the "only for selected hosts" item and then add the specified hosts to the lower half of the dialog box.

Modify Network Request Content

Sometimes in order to debug the server interface, we need to repeatedly try different parameters of the network request. Charles makes it easy to provide modification and re-sending of network requests. Simply right-click on a previous network request and select "Edit" to create an editable network request. As shown below:

We can modify any information about the request, including the URL address, port, parameters, etc., and then click "Execute" to send the modified network request (as shown). Charles supports us in modifying and sending this request several times, which is very convenient for us and the server-side debugging interface.

Summarize

With Charles Software, we can easily intercept and debug network request content, analyze packet protocols, and emulate slow networks in daily development. With good Charles, we can greatly facilitate the development and commissioning of apps with Web requests.

Reference Links:

1. Charles main list of features
2. Charles Official website

Posted by Don Qiao Dec 11th, IOS

Charles--ios Development Tools-Network packet Analysis tool