Odd technical guidelines

In the process of application development, it is common to debug the server interface through packet capture. Charles and Wireshark are two of the most commonly used pieces of software in development. So today, let’s take iOS as an example and talk about Charles capturing bags.

This article is contributed by QiShare team of qiqiqi dance troupe.

In daily development, we cannot see what is being sent and received between the application and the server, and without this visibility, it can be very difficult and time-consuming to determine the exact location of the failure. Charles is a Web proxy running on a PC. When we configure the application to access the network through Charles, we can record and display all the data sent and received on Charles, thus greatly improving the efficiency of debugging the program.

You can see Charles’s role below:

Charles has the following common functions:

  • Request preview: Preview and filter request data by grouping or sequence views

  • Request packet capture: Captures HTTP and HTTPS request data and response data.

  • Request breakpoint: intercept the specified request or response, preview the data in the middle;

  • Data modification: Modify request data and response data to match data testing;

  • Request retransmission: Specifies the request to be sent repeatedly to test back-end functionality and performance;

  • Network speed simulation: Set network speed delay to simulate 2G/3G/4G network on mobile phones;

Since Charles has many functions, it is difficult to give a detailed introduction in this article. Therefore, the author takes the use of Charles in the project as the starting point to introduce several of the most commonly used and useful functions.

1. Install Charles

Charles is a paid software with a 30-day free trial period,

After being used every 30 minutes, it is forcibly retired and can be used again after being restarted.

The Charles installation package is available on the Charles website.

Request a preview

Once Charles is up, it’s in packet capture mode. Since Charles automatically configures the proxy for your PC browser, you can preview the request information by opening a web page (as long as there is a network request).

PS: If you use the plug-in to set the independent proxy for the browser, please disable the plug-in or set it as the system proxy.

Charles provides Structure and Sequence preview modes. Structure groups requests by domain name, which can easily preview the request data under the same domain name and facilitate the analysis and processing of a certain service interface in daily development. The illustration is as follows:

Sequence Displays request information in chronological order and provides a direct preview of request information. In this mode, you can use Filter to Filter requests for specific analysis. The illustration is as follows:

In either mode, you can preview different types of Request information by toggling labels (Overview, Request, Response, etc.). Under the most commonly used Request and Response labels, you can also preview the details of the corresponding labels by switching the sub-labels (Headers, Cookies, Text, etc.). The illustration is as follows:

Request packet capture

Charles can switch between Start Recording and Stop Recording using the white round red dot button on the toolbar (the shortcut is “Command+R”). Using this button, you can enable the packet capture function when debugging is required, which can effectively reduce interference information and quickly capture the request to be debugged.

To capture packets sent from a mobile phone (iPhone as an example), ensure that the iPhone and PC work on the same LAN.

Step 1

Obtain the IP address of the PC

You can view the IP Address of the PC on the Charles menu bar -> Help -> Local IP Address. The illustration is as follows:

You can also run the ifconfig en1 command on the Mac terminal to view the IP address of the PC. The illustration is as follows:

Step 2

Configuring the iPhone Proxy

Choose iPhone Settings > wireless LAN > LAN Info (I) > Configure Proxy > Manual. Enter the IP address of the PC in the server input box and Charles’ proxy port (usually 8888) in the port input box. The illustration is as follows:

The specific ports can be viewed from the Charles menu bar -> Proxy -> Proxy Settings. The illustration is as follows:

After the iPhone proxy configuration is completed, Charles will pop up the connection prompt box, click Allow to use Charles to capture the packets sent from the iPhone request. The illustration is as follows:

Step 3

Packet capture HTTPS request

After configuring the iPhone proxy, you can preview the HTTP request data in the Structure or Sequence window. However, because the HTTPS request is encrypted, only garbled data can be previewed. To preview the data plaintext of HTTPS requests, you need to install certificate authorization on your PC and iPhone.

1) PC installation certificate

You can Install the Certificate for PC on the Charles menu bar -> Help -> SSL Proxying -> Install Charles Root Certificate, which can be viewed in the Mac keystring. The illustration is as follows:

The certificate can be viewed in the Mac keystring. Double-click the certificate to set the trust permission to always trust. The illustration is as follows:

2) iPhone installation certificate

In the iPhone browser visit http://charlesproxy.com/getssl certificate can be downloaded and installed. This address generally does not change, Charles menu bar -> Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote View the latest official certificate download address in Browser. The illustration is as follows:

After installing the iOS certificate trust mechanism and trusting the certificate, you need to enable the root certificate in iPhone Settings > About Local Computer > Certificate Trust Settings. The illustration is as follows:

This way, you can use Charles to capture the HTTPS request from the iPhone and preview the plaintext data.

HTTPS requests on the packet capture simulator require clicking Install Charles Root Certificate in iOS Simulators to Install the Certificate.

3) Enable the SSL permission for packet capture

From the Charles menu bar -> Proxy -> SSL Proxying Settings, select Enable SSL Proxying. Then add hosts and ports to Locations to capture packets. The illustration is as follows:

Alternatively, on the packet capture page, right-click a request or group, and click Enable SSL Proxying in the displayed options list to Enable SSL Proxying. The illustration is as follows:

‍

Request breakpoints

In Charles’s request preview screen, right-click on a request/group and the Breakpoints option pops up in the list of options. The illustration is as follows:

Clicking Breakpoints sets a breakpoint for the request. By default, Request/Response on the Request is subject to breakpoint control, which pauses before the Request data is sent to the server and before the Response data is sent to the client. Breakpoint parameters can be edited from the Charles menu bar -> Proxy -> Breakpoint Settings. For example, you can uncheck Request by simply adding a breakpoint to Response. The illustration is as follows:

In the breakpoint state, you can preview and modify the intermediate data of the request, and then click the unexecute button to continue executing the request.

5. Data modification

Rewrite and Breakpoint Editing can both play a role in modifying request data.

1) Rewrite

Rewrite can be turned on from the Charles menu bar -> Tools -> Rewrite, click the Add button to Add a setting, and Add a request path to Rewrite and a Rewrite rule to the right Locations and Rules, respectively. The illustration is as follows:

Rewrite is good for bulk and long-term changes to requests, with a high impact on request data (often forgetting to remove rules after testing). So, in some lightweight data modification scenarios, I often modify data in conjunction with Breakpoint.

2) Breakpoint Editing

Combined with breakpoint function, the Request/Response data can be modified temporarily. After you set a breakpoint for a request, the breakpoint window automatically jumps to when the request occurs. Click on the Edit Request/Response screen, you can see the intermediate information, select the appropriate data format (HTML, Json, etc.) to modify. After the modification is complete, click the Execute button to view the modified effect on the terminal. The illustration is as follows:

Request retransmission

In Charles’s request preview screen, right-click on a/group request, and the list of options that pops up includes Repeat and Advanced Repeat. The illustration is as follows:

Clicking Repeat repeats the request once, often used to test whether the service interface can be accessed properly, whether the client can receive the returned data properly, and so on. Clicking Advanced Repeat brings up the retransmission parameter edit page, as shown below:

On this editing interface, you can customize Iterations (number of retweets), Concurrency (number of Concurrency), and Repeat (Repeat delay), which are commonly used to stress test service interfaces.

Seven, network speed simulation

From the Charles menu bar -> Proxy -> Throttle Settings you can enable Throttling and customize Locations (restricted service interface) and Throttle Configuration. Support Throttle (preset data transmission mode), Bandwidth Utilisation, round-trip latency, MTU Reliability Stability and other parameters are edited. Throttle Preset supports simulating 3G/4G network environments. The illustration is as follows:

Throttle makes it easy to Throttle Internet bugs that are easy and difficult to troubleshoot online.

World of you when not

Just your shoulder

There is no


360 official technical official account

Technology of dry goods | | hand information activities

Empty,

For more iOS and surrounding technology articles, click here.

Pay attention to QiShare.