Installation and use of web capture software Charles

Overview

Charles
Charles packet capture tool is a powerful network data packet capture software. Charles can perform network debugging of applications, help developers analyze the communication protocol of network programs, etc., support grabbing requests for http and https protocols, and does not support sockets.
Insert picture description here

Charles can complete HTTP proxy/HTTP monitor/reverse proxy , enabling developers to view everything between their machine and the InternetHTTP and SSL/HTTPS traffic. This includes requests, responses and HTTP headers (containing cookie and cache information). When the client initiates a request to the server, it first goes to Charles to filter, and then Charles sends the final data to the server; Note: The data that Charles sends to the server at this time is not necessarily the data requested by the client; Charles is receiving When requesting to the client, you can freely modify the data, and you can even directly block the request sent by the client; the returned data after the server receives the request will first go to Charles, filtered by Charles, and then sent to the client; for front-end developers It is very attractive, which is equivalent to controllable requests and responses, and Charles provides a lot of concise operations in order to control more aspects;

Charles is a commonly used network packet interception tool under Mac. When doing mobile development, we often need to intercept network packets for analysis in order to debug the network communication protocol with the server. Charles sets himself as the system's network access proxy server , so that all network access requests are completed through it, thereby achieving the interception and analysis of network packets.

In addition to debugging ports in mobile development, Charles can also be used to analyze the communication protocols of third-party applications. With Charles's SSL function, Charles can analyze the Https protocol.

Related tools : SwitchHosts, Chrome's Host Switch Plus, Fiddler, Chrome DevTool

Common application scenarios:
capture Http and Https requests and responses, packet capture is the most commonly used.
Resending the network request is convenient for back-end debugging. It is very cool to retransmit under complicated and special circumstances (the captured record, just repeat directly, you can modify it if you want to modify it).
Modify the network request parameters (when the client sends to the server, it can be modified and then forwarded).
Interception and dynamic modification of network requests.
Supports simulated slow network, mainly to imitate the 2G/3G/4G access process on the mobile phone.
Support local mapping and remote mapping. For example, you can map online resources to a local folder, so that you can deal with bugs and online debugging in some special cases (network css, js and other resources are used locally Code, you can modify these locally, data and the like are all online environments, online debugging);
you can grab the resources accessed by the mobile phone (if it is the environment where the HOST is configured, the phone can borrow the host configuration to enter the test environment)

charles official website : www.charlesproxy.com

Software installation and use

1) Software download address: Charles needs java environment to run, and java environment needs to be installed first.

Windows 64: https://www.charlesproxy.com/assets/release/4.2.8/charles-proxy-4.2.8-win64.msi

Windows 32:https://www.charlesproxy.com/assets/release/4.2.8/charles-proxy-4.2.8-win32.msi

macOS:https://www.charlesproxy.com/assets/release/4.2.8/charles-proxy-4.2.8.dmg

Linux:yum install charles-proxy -y
yum源:

cat <<EOF > /etc/yum.repos.d/Charles.repo
[charlesproxy]name=Charles Proxy Repository
baseurl=https://www.charlesproxy.com/packages/yum
gpgkey=https://www.charlesproxy.com/packages/yum/PublicKey
EOF

2) Software registration information (only for learning), please purchase the genuine version, and the trial period is 30 days:

Insert picture description here
Registered Name: https://zhile.io
License Key: 48891cf209c6d32bf4; // The registration code for any version of Charles, Charles 4.2 is currently the latest version and is available.

Online registration: https://www.zzzmode.com/mytools/charles/

3) Software use

Charles mainly provides two views for viewing packets, namely:

Structure : Structure/Structure view, classify network requests according to the domain name to be accessed . For example, if there are n resource requests under a domain name, then all requests under this domain name will be classified here in detail, so that it is easy to locate the need for analysis and Processed data, clearly view the requested data structure;

Sequence : Sequence/sequence view, which sorts network requests according to the time of access , and proceeds in the order of the user's sending requests. You can clearly see all requests, including resource requests, pictures, text, music, etc.

Introduction to the main interface of charles:
Insert picture description here

In the figure above, Contents in the upper right corner is the most commonly used label, where the upper part is the request and the lower part is the response; "Raw" is the unprocessed request information, and all items on the left of the raw are for raw information. Split and beautify for visual inspection;

For the first time, Charles will ask you if you want to set Charles as the system agent. We will set Charles as the system agent. Select "Proxy" -> "Mac OS X Proxy/windows proxy" in the menu to set Charles as a system proxy:
Insert picture description here
install Charles's CA certificate into the root certificate directory of the computer:
Insert picture description here
Insert picture description here
Insert picture description here
as shown in the figure above, the obtained link has some requests There is a lock sign, and some are not. The lock sign is because it is not allowed. You need to allow it before re-requesting the related request. Then you can view it normally; after enabling the SSL proxy, the request proxy is released.
Insert picture description here
Insert picture description here
In China, the * table in the Host allows all requests; 443 is Https; after the above settings are completed, network requests can be obtained normally, but only local requests from the computer are captured.

[Request to grab mobile app] :

After confirming the ip address of the machine, that is, the proxy ip address and proxy port (default 8888) of Charles, configure the HTTP proxy on the mobile phone. The example is as follows:
Insert picture description here

Insert picture description here
4) Mock function:
Charles' Map function is divided into two types : Map Remote and Map Local. As the name suggests, Map Remote is to redirect the specified network request to another URL request address, and Map Local is to redirect the specified network request to a local file . When you need to modify the data, you can use the map function to temporarily verify the effect, so that you can update and upgrade after confirmation. The operation process is as follows:

1. Select a request, save the response, and then copy the response data to the json conversion tool (online: www.bejson.com), and you can modify the content in the editing state;

2. Set the following settings in the Tools toolbar in Charles:
Insert picture description here
Insert picture description here
Insert picture description here
3. Verify the modification effect after re-request.

5) Speed ​​limit debugging:

Sometimes, it is necessary to simulate a slow network or a high-latency network to test whether the application is behaving normally under the mobile network (such as simulating the response time of the application when the network is slow). Charles provides a good answer for this requirement. stand by.

Insert picture description here
Insert picture description here
6) Breakpoint test:

Sometimes in order to debug the server's interface, it is necessary to repeatedly try network requests with different parameters. Charles can easily modify and retransmit network requests. Just right-click on the previous network request and select "Edit" to create an editable network request.
Insert picture description here
Insert picture description here
Insert picture description here
Refresh the page, request this interface again, and edit as required:
Insert picture description here
Insert picture description here
refresh the page and verify.

Guess you like

Origin blog.csdn.net/ximenjianxue/article/details/114406154