1. Introduction of Charles
1.1 Charles requires Java runtime environment support, including Windows and Mac;
1.2 Charles Principle: By setting itself as the network access proxy server of the system, all network access requests are completed through it, thus intercepting and analyzing network packets.
1.3 In addition to debugging ports in mobile development, Charles can also be used to analyze communication protocols of 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.
2. Set Charles 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:
After that, you can see a steady stream of network requests popping up in Charles’s interface.
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.
3. Introduction of Charles main interface
3.1 Control Bar:
3.2 Packet Capture Interface:
Charles provides two main views for viewing packets, called “Structure” and “Sequence.”
- 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.
4. Common functions of Charles
4.1 Filtering Network Requests
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 for temporary filtering and method 2 for regular filtering.
Method 3: Right-click the network request that you want to filter, choose Focus, and select Focussed in the Filter text box
4.2 Intercepting Network Packets on a Mobile Phone (aN iPhone is Used as an Example)
4.2.1 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:
4.2.2 Settings on iPhone 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:
In iPhone “Settings” -> “wireless LAN”, you can see the name of the currently connected wifi. By clicking the details button on the right, you can see the details of the currently connected wifi, including IP address, subnet mask and other information. At the bottom there is the item “HTTP proxy”, we switch it to manual, and then fill in the IP of the computer where Charles is running and the port number 8888, as shown in the picture below:
4.3 grab HTTPS
4.3.1 Capturing HTTPS Packets on the Web Terminal
Step 1: 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. Set trust to the certificate, as shown below:
Step 2: Add the domain name. Choose “Proxy”->”SSL Proxying Settings”->”Add”. The HTTPS port number is 443 and the asterisk represents all requests
4.3.2 Capturing HTTPS Packets of 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:
According to the tutorial we said before, after setting Charles as the agent on the device, visit the address: charlesproxy.com/getssl in the mobile browser to open the interface of certificate installation. After installing the certificate, you can intercept the Https communication content on the mobile phone.
Note: after installing the iPhone certificate, you need to go to “Settings “->” About this machine “->” Certificate Trust Settings” to turn on the installed Charles trust certificate
4.4 Charles simulates weak networks
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:
If we want to simulate the slow network of a specific site, we can check the “Only for Selected Hosts” TAB in the above image and add the specified hosts TAB in the lower part of the dialog.
4.5 Modifying 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:
We can modify any information of the request, including URL address, port, parameters, etc., and then click “Execute” to send the modified network request (as shown in the figure below). Charles allows us to modify and send the request multiple times, which is very convenient for us and the server-side debugging interface, as shown below:
4.6 Performing a Stress test for 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:
Then we can pop up in the dialog box, select the number of concurrent threads to suppress and suppress the number of times, after confirming, can start to suppress.
4.7 Modifying the Returned Content of 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.
4.7.1 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 Charles menu, choose “Tools” -> “Map Remote” or “Map Local” to enter the setting page of the corresponding function:
For the Map Remote function, you need to enter the source address and destination address of network redirection respectively. For conditions that do not need to be restricted, you can leave them blank. Here is an example where I redirected all ytk1.yuanku.ws (test server) requestswww.yuantiku.com (Online server):
For the Map Local function, we need to fill in the redirection source address and the Local target file. For some complicated network request results, we can first use the “Save Response…” provided by Charles. Function to save the result of the request locally (as shown below), and then modify it slightly to become our target mapping file:
Here is an example where I Map a specified network request to a Local modified file using the Map Local function:
A potential problem with Map Local is that it returns a different Http Response Header from a normal request. If the client validates part of the Http Response Header, the function is invalidated. The solution is to use Map Local as well, with the Rewrite functionality mentioned below, to Rewrite the relevant Http headers into what we want.
4.7.2 Rewrite 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:
We want to try modifying the network return value directly by changing tangqiaoboy to iosboy. So we turned on the Rewrite function (“Tools”->”Rewirte”->rules”add”) and set the following rules:
Once set up, we can see from Charles that the nicknames obtained by the subsequent API were automatically Rewrite to iosboy, as shown below:
4.7.3 Breakpoints 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.
- First, Charles catches the interface that wants to modify the data
- Right click on Breakpoints
- Click proxy-BreakPoints in the Charles tool
- Double-click the interface (Location) that you want to break in the popover to bring up Edit Breakpoints
- Delete the contents of Query, enter *, check Request if you modify Request, check Response if you modify Response
- Revisiting this interface automatically redirects Charles to the Breakpoints interface
- The following figure shows the API we temporarily modified to obtain user information by changing the user’s nickname. After the modification, click “Execute” to continue the network request:
Note that during the interception and modification of network requests using the Breakpoints function, the timing of the entire network request is not suspended. Therefore, a long pause may cause client requests to time out.
4.8 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 the native port 61234 to remote (www.yuantiku.com) on port 80. This way, when I visit the localIf port 61234 is used, the actual returned content is changed fromwww.yuantiku.comPort 80 provides:
4.9 Setting an External agent to resolve conflicts with the 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’ “Proxy”-> “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.