Software Testing | Teach you how to use Charles package capture tool (computer + mobile terminal)

Hey. Hello everyone, I'm 4U:
Students who have done APP testing will contact the packet capture tool. Through the packet capture tool, the interactive data between the client and the server interface can be obtained. In the process of actually testing the APP, we often find that the server Returned parameter field errors, data statistics errors and other issues can be found through packet capture, providing effective help for development and repair of bugs. So today I will continue to introduce the Charles tool, a packet capture tool.

insert image description here

1. Introduction to Charles

Charles is an HTTP proxy server, HTTP monitor, reverse proxy server, when the browser connects to Charles' proxy to access the Internet, Charles can monitor all the data sent and received by the browser. It allows a developer to view all HTTP traffic connected to the Internet, these include request, response and HTTP headers (including cookies and caching information).

The main functions are as follows:

  • SSL proxy is supported. Can intercept and analyze SSL requests.
  • Support flow control.
  • Can simulate slow networks and requests with long latency.
  • AJAX debugging is supported.
  • It can automatically format json or xml data for easy viewing.
  • AMF debugging is supported.
  • FlashRemoting or FlexRemoting information can be formatted for easy viewing.
  • Supports resending network requests to facilitate back-end debugging.
  • Support for modifying network request parameters.
  • Support the interception and dynamic modification of network requests.
  • Check HTML, CSS and RSS content for compliance with W3C standards.

Charles is a very practical, friendly interface (at least compared to fiddler), and a powerful package capture artifact. Because it is developed based on java, it can be used across platforms, Mac, Linux, and Windows, and Universal on Android and iOS devices.
Its principle is to analyze and capture packets by becoming a proxy for computers or mobile devices to intercept requests and request results.

2. Charles download and installation

Official website download address: https://www.charlesproxy.com/
insert image description here
insert image description here
After downloading, click Next to install it successfully. After installation, open Charles as follows:
insert image description here

3. Charles configuration

(1) The configuration of Charles-PC is as follows:

Step 1: Set the port number Proxy-ProxySettings default port number is 8888. insert image description here
Step 2: Check the computer IP, Help–LocalIPAddresses.
insert image description here
Step 3: After the mobile phone sets the proxy (for the steps, refer to the mobile terminal configuration in the previous section), set the proxy server and port number.
insert image description here
Step 4: Open the APP, send a request, Charles pops up whether to allow the phone to access, click Allow.
insert image description here
Step 5: After clicking Allow, you can see the list of allowed access to this proxy server in Proxy-AccessControlSettings.
insert image description here
Note: If you click Deny, you can manually add the mobile phone IP/Mac address to the allowed access list, the latter restart Charles, and the mobile phone can be accessed again.

After the setting is complete, you can capture packets.
insert image description here

(2) Filter network requests:

From the above figure, it can be seen that there are many network requests. Can we filter out the URL address we specified? There are two methods:

Method 1: Fill in the keywords to be filtered out in the Filter column in the middle of the Sequence interface. For example, when our server address is: *.xxxx.wsmall.com, then you only need to fill in wsmall in the Filter column.
insert image description here
Method 2: Select Proxy-RecordingSettings in the menu bar of Charles, select Include, enter the protocol to be monitored, the host address, and the port number, so that only the packets of the target website can be intercepted.
insert image description here
insert image description here

(3) Charles grabs the HTTPS request package preconditions:

The mobile phone has set up a proxy and can capture the http package. If the HTTPS package is not captured: If
insert image description here
the HTTPS package is captured:
insert image description here
Install the SSL certificate to the mobile device: Click Help–SSLProxying-InstallCharlesRootCertificateonaMobileDevice.
insert image description here
Enter the address chls.pro/ssl in the mobile phone browser, the certificate installation page will appear, click on the installation part of the mobile phone needs to set the mobile phone password before installation.
insert image description here
Charles sets Proxy: Proxy–SSLProxyingSettings.
insert image description here
Set the domain name to be grabbed, enter 443 for the port, and after setting, you can grab the HTTPS package.
insert image description here

(4) Charles grabs the HTTPS two-way authentication package:

Two-way authentication, a simple understanding is that both the server and the client have certificates. At present, some APPs use two-way authentication. If we cannot capture the package according to the above chapters, what should we do? Here we upload the client certificate one step more than grabbing the https request package. The preconditions are:

HTTPS packages can be captured

Client certificate: xxxt.p12 (can be obtained from the development)

Click Help-SSLProxying-InstallCharlesRootCertificate, install the certificate
insert image description here
insert image description here
Proxy-SSLProxyingSettings, set the domain name and port number.
insert image description here
Set the domain name and port number, and upload the client certificate. When uploading the certificate, you need to enter the certificate password.
insert image description here
Upload the root certificate. You need to enter the certificate password when uploading. After the setting is complete, you can grab the request package of the APP.
insert image description here

Follow me and get free learning materials

CONTACT US / Contact us
VX / Official public account: Lebo software test
BILIBILI / Bilibili: Lebo software test
Himalaya / Official account: Lebo software test
Free sharing of learning materials lebo5207
insert image description here
learning materials + teaching video + installation package + tools Package
Click "Like + Comment + Favorite" at the bottom to say one click and three clicks!

Guess you like

Origin blog.csdn.net/leboxy/article/details/121494967