iOS Development Tools-Network packet analysis tools Charles

Transfer from Tang Qiao Technical blog: http://blog.devtang.com/blog/2013/12/11/network-tool-charles-intr/Charlesis commonly used in MAC interception of network packets, in the development of iOS, in order to debug and server-side network communication protocols, often need to intercept network packets to analyze. 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:

• Go to Http://www.charlesproxy.com/ssl.zip to download the CA certificate file.
• 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.

Modify Server return content

Sometimes we want the server to return some of the specified content, so we could debug some special cases. For example, if the list page is empty, the data is abnormal, and some time-consuming network requests are timed out of the situation. Without Charles, it would be cumbersome to construct the appropriate data for server mates. This time, the use of Charles-related features to meet our needs.

Based on the specific requirements, Charles provides MAP functionality, Rewrite functionality, and breakpoints functionality, all of which can be used to modify the server's return content. The functional differences between the three are:

1. The MAP feature is suitable for long-term redirection of some requests to another network address or local file.

2. The Rewrite feature is suitable for some regular substitution of network requests.

3. breakpoints function is suitable for making some temporary changes.

Map function

Charles's map function is divided into map remote and map local two, as the name implies, map remote is to redirect the specified network request to another URL request address, map Local is to redirect the specified network request to a local file.

From the Charles menu, select "Tools", "Map Remote" or "map Local" to go to the Settings page for the respective feature.

For the map remote function, we need to fill in the source address and destination address of the network redirect separately, for the condition that does not need to restrict, can leave blank. Is an example, I redirect all ytk1.yuanku.ws (test server) requests to www.yuantiku.com (on-line server).

For the Map local feature, we need to fill in the redirected source address and the local destination file. For some complex network request results, we can first use the "Save Response ..." feature provided by Charles to save the request result locally (as shown), and then modify it to become our target mapping file.

Is an example, I mapped a specified network request through the map local feature to a locally modified file.

Rewrite function

Rewrite function function is suitable for some kind of network request to make some regular substitution, in order to achieve the purpose of modifying the result.

For example, our client has an API request to get a user nickname, and my current nickname is "Tangqiaoboy", as follows:

We want to try to modify the network return value directly and replace the Tangqiaoboy with Iosboy. So we enable the rewrite feature and then set the following rules:

After the setup is complete, we can see from Charles that the nickname after the API is automatically rewrite into Iosboy as shown in:

breakpoints function

The rewrite features provided above are best suited for batch and long-term replacements, but many times we just want to temporarily modify the results of a network request, and this time, using the rewrite function can achieve the goal, but too cumbersome, for temporary changes, We'd better use the breakpoints feature.

Breakpoints function is similar to the breakpoint we set in Xcode, when the specified network request occurs, Charles intercepts the request, and at this point we can temporarily modify the return of the network request in Charles.

Is that we temporarily modify the access to user information API, the user's nickname has been changed, after the completion of the modification click "Execute" can let the network request continue.

It is important to note that the timing of the entire network request is not paused when the network request is intercepted and modified using the Breakpoints feature, so a prolonged pause can cause the client's request to time out.

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.

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.

iOS Development Tools-Network packet analysis tools Charles