Met this caught tool is in 15 years, about the earliest a creation time for November 9, 2015, behind every time to change jobs after install a few times, in the new company computer is consider in this period, there are many online ready in place of the end of the article, I stole lazy, not to summarize, these links only recorded one by one, Facilitate subsequent viewing.

Transfer: 1, caught on Mac tools Charles:blog.csdn.net/jiangwei091…

2, iOS development capture tool Charles use: mp.weixin.qq.com/s?__biz=MjM…

3, how to use the under MacOS Charles: Http request analysis jingyan.baidu.com/article/335…

4, iOS developers will be a few skills, don’t know without you it OUT: www.cocoachina.com/articles/24…

5, Charles from entry to master “the great spirit of service can’t open, fortunately I wit, then the content and copy down 】 : blog.devtang.com/2015/11/14/…

I am a porter (link 5 content) :

Catalogue and update instructions

Update record:

December 2013, first edition. In November 2015, Rewrite was introduced. In August 2016, introduction to Charles 4 was added, reverse proxy functionality and setting up external proxies, and how to resolve conflicts with the flip wall software. The content of this paper mainly includes: Charles Main screen Filtering network requests Intercepting network packets on the iPhone Intercepting Https communications Simulating slow networks Modifying network requests Stress test the server modify the returned content of the server Reverse proxy set up the external proxy, resolve the conflict with the wall climbing software summary

Charles offers for a limited time

Charles 4 genuine limited time discount (limited time: August 8-15, 2016), 30 yuan discount, click to get the coupon.

Introduction to the

Charles implements interception and analysis of network packets by setting himself up as the network access proxy server of the system, through which all network access requests are processed.

In addition to debugging ports for mobile development, Charles can also be used to analyze communication protocols for third-party applications. In conjunction with Charles’ SSL capabilities, Charles can also analyze the Https protocol.

Charles is a paid software with a 30-day free trial. After the trial period, users who have not paid will still be able to use the app for no more than 30 minutes at a time, and there will be a 10-second delay on startup. Therefore, the payment plan is quite user friendly, even if you don’t pay for a long time, you can still use the full software features. However, when you need to do packet debugging for a long time, you will be affected by Charles forcing the shutdown.

The main functions of Charles include:

Intercepts Http and Https network packets. Supports resending network requests, facilitating back-end debugging. Network request parameters can be modified. Support network request interception and dynamic modification. Support analog slow network. Key new features include:

Http 2 is supported. Support IPv6.

Installation, Charles

Go to the official Charles website (www.charlesproxy.com) to download the latest Charles installation package, which is a DMG file. Once opened, drag Charles to the Application directory to complete the installation.

Set Charles up as the system agent

As mentioned earlier, Charles does packet interception by setting itself up as a proxy server, so the first step in using Charles is to set it up as a proxy server for your system.

After starting Charles, the first time Charles asks you to set system agent permissions for it. You can grant Charles this permission by entering the login password. You can also ignore this request, and when you need to set Charles up as a system Proxy, choose “Proxy” -> “Mac OS X Proxy” from the menu to set Charles up as a system Proxy. As follows:

It should be noted that Chrome and Firefox browsers do not use the proxy server Settings of the system by default, while Charles set himself as a proxy server to complete packet interception, so the network communication content of Chrome and Firefox browsers cannot be intercepted by default. If you need to intercept, you can use your system’s proxy Settings in Chrome, or simply set the proxy to 127.0.0.1:8888 to achieve the same effect.

Charles main interface introduction

The Structure view classifies network requests by domain names visited. The Sequence view sorts network requests by access time.

You can switch back and forth between these two views depending on your needs. Charles provides a simple Filter function that allows you to enter a keyword to quickly Filter out web requests with a specified keyword in the URL.

For a specific network request, you can view the detailed request content and response content. If the request content is a POST form, Charles will automatically display the form for you. If the response is in JSON format, Charles can automatically format the JSON content for you to view. If the response content is an image, Charles can display a preview of the image.

Filtering network Requests

In general, we need to filter network requests and only monitor requests sent to a specified directory server. For this need, there are several approaches:

Method 1: In the Filter text box in the middle of the main window, enter the keywords to be filtered out. For example, if the address of our server is yuantiku.com, you only need to enter Yuantiku in the Filter field.

Method 2: In Charles menu bar, choose “Proxy” -> “Recording Settings”, then select the Include bar, select add a project, and then fill in the protocol to be monitored, host address, port number. This allows you to intercept only packets from the target site. As shown below:

In general, we use method 1 to do some temporary packet filtering and method 2 to do some recurrent packet filtering.

Method 3: Right click on the network request you want to Filter, select “Focus”, and then check the Focussed item in the Filter column, as shown below:

Intercept network packets on the iPhone

Charles is commonly used to intercept network packets on local devices, but we can also intercept network requests on other devices when needed. Let me take the iPhone as an example to explain how to do this.

Settings on Charles

To intercept a network request on the iPhone, we first need to turn on Charles’s proxy. On the Charles menu bar, choose Proxy > Proxy Settings, enter Proxy port 8888, and check Enable transparent HTTP proxying to complete the Settings on Charles. As shown below:

Settings on the iPhone

First of all, we need to obtain the IP Address of the computer where Charles is running. “Help” -> “Local IP Address” in the top menu of Charles, you can see the IP Address in the pop-up dialog box, as shown below:

Intercepts Https communication information

Install the certificate

If you need to intercept and analyze Https protocol related content. Charles’ CA certificate needs to be installed. The specific steps are as follows.

First we need to install the certificate on the Mac. Select “Help” > “SSL Proxying” > “Install Charles Root Certificate” from the top menu of Charles, and then enter the system account password to see the added Certificate in the KeyChain. As shown below:

Intercepts Https communication information on mobile devices

If you want to intercept Https traffic on an iOS or Android device, you also need to install the corresponding certificate on the phone. Click on the top menu of Charles and choose Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser You’ll then see Charles pop up with a simple installation tutorial. As shown below:

charlesproxy.com/getssl, you can open…

Simulate a slow network

When doing mobile development, we often need to simulate slow or high latency networks to test the performance of applications on mobile networks. Charles is very supportive of this need.

In the menu of Charles, choose “Proxy” -> “Throttle Setting”. In the dialog box that pops up later, you can select “Enable Throttling” and set Throttle Preset. As shown below:

Modify the network request content

Sometimes in order to debug the server interface, we need to repeatedly try the network request with different parameters. Charles can easily provide modification and retransmission of network requests. To create an editable Web request, right-click on the previous web request and select Edit. As follows:

Stress test the server

We can use Charles’s Repeat feature to simply test the server’s concurrency capabilities as follows.

Right click on the web request we want to suppress (POST or GET request) and select the “Repeat Advanced” menu item as follows:

Modify the content returned by the server

Sometimes we want the server to return some specified content so that we can debug special cases. For example, the list page is empty, the data is abnormal, and some time-consuming network requests time out. Without Charles, it would be a hassle to get the server to cooperate in constructing the corresponding data. At this point, charles-related functions can be used to meet our needs.

Depending on your needs, Charles provides Map, Rewrite, and Breakpoints capabilities to modify what the server returns. The functional differences among the three are as follows:

The Map function is suitable for long-term redirection of certain requests to another network address or local file. The Rewrite function lends itself to some regular substitutions for network requests. The Breakpoints feature is suitable for temporary changes.

The Map function

Charles’s Map function is divided into Map Remote and Map Local. As the name implies, Map Remote redirects a specified network request to another url request address, and Map Local redirects a specified network request to a Local file.

From the Charles menu, choose “Tools” -> “Map Remote” or “Map Local” to enter the Settings page of the corresponding function.

Rewrite the function

The Rewrite function is a good way to modify the results of a particular type of network request with some regular substitutions. For example, our client has an API request to get a user nickname, and my current nickname is “Tangqiaoboy”, as shown below:

Their context function

The Rewrite function is best for batch and long-term replacements, but most of the time, we just want to change the result of a network request temporarily. Using the Rewrite function will do the trick, but it is too cumbersome.

Breakpoints function is similar to the Breakpoints we set in Xcode. Charles will intercept a specified network request when it occurs, and we can temporarily modify the returned content of the network request in Charles.

The following figure shows the API we temporarily modified to obtain user information. We changed the user’s nickname. After the modification, click “Execute” to continue the network request.

The reverse proxy

Charles’s reverse proxy feature allows us to map a port locally to another port remotely. For example, in the figure below, I have mapped port 61234 from the native to port 80 from the remote (www.yuantiku.com). This way, when I access the local port 61234, the actual returned content will be provided by port 80 at www.yuantiku.com.

Set up external agents to resolve conflicts with wall climbing software

The principle of Charles is to set himself as the proxy server of the system. However, in China, due to work needs, we often need to use Google to search, so most programmers have their own wall-climbing software, and the basic principle of these software is to set himself as the proxy server of the system to achieve transparent wall-climbing.

In order to make them coexist peacefully, we can set the Proxy port and related information in Charles’ External Proxy Settings. At the same time, we should also turn off the automatic setting of the relevant wall climbing software, so that it will not actively modify the system agent, so as to avoid the failure of Charles.

conclusion

With Charles software, we can easily intercept and debug network request content, analyze packet protocol and simulate slow network in daily development. Good use of Charles can greatly facilitate the development and debugging of apps with network requests.

May this article help you become an expert on Charles, and have fun