After learning this Charles package capture tutorial, I uninstalled fiddler directly

0 1. Introduction to Charles

Charles is a very good package capture tool, which supports all platforms and can be used on mac, windows, and linux. It can capture both web-side packages and app-side packages.

The main functions of charles include the following:

• Intercept Http and Https network packets.

• Supports resending network requests to facilitate back-end debugging.

• Support for modifying network request parameters.

• Support the interception and dynamic modification of network requests.

• Support for simulating slow networks

A proxy server works as follows:

The client initiates a request, the request is forwarded to the server through charles, the server returns a response, and the response is forwarded to the client through charles.

Charles plays the role of a messenger, passing the information from A to B, and passing the reply letter from B to A. Because of his work as a messenger, he knows the content of the information (whether it is the original letter or the reply), Because of this, charles can also tamper with the content of the message, that is, tamper with the request and response.

0 2. Installation

• For mac computers, refer to this link for installation and cracking: https://www.jianshu.com/p/82f63277d50f

• Windows computer downloads the software in the network disk for installation and cracking

  Link: https://pan.baidu.com/s/1AkDV5VAbVWw_uWTBW3biyw  

  Extraction code: emj4

0 3. Basic settings

• Enable the proxy (it is enabled by default)

  

• https setup and install certificate

  1. Set up the proxy first

     

  2. Install the certificate

     

     

     

     

  3. set ssl proxy

     Click on the menu item "Proxy" -> "SSL Proxy Settings"

     

     Click [Add], in the pop-up "Edit Location" window, enter asterisks in the host and port text boxes, as shown in the screenshot below, click [OK] in the "Edit Location" window

     

     Then in the "SSL Proxy Settings" window, click [OK]

  4. individual settings for chrome browser

     For https capture on the chrome browser, you need to do as follows

     Save the charles certificate first, select binary when saving

     

     

     Open the settings interface of the chrome browser, search for the certificate, and enter the certificate management interface

     

     

     

     

     

     

0 4. Packet capture configuration on mobile phone

• Mobile phone connection proxy settings

  First make sure that the mobile phone and the computer where Charles is located are in the same local area network , then set the code connection of the mobile phone, long press the wifi of the mobile phone, open and modify the network

  The ip is the ip of the computer where charles is located , and the port is the port number 8888 seen in the charles proxy settings

  When connecting to the proxy for the first time, charles will pop up a confirmation box, remember to click Allow

  

• Enter chls.pro/ssl in the mobile browser and you will be prompted to download the certificate, just download and install it

• The ios phone also needs to trust the certificate in the settings - general - about this machine - certificate trust settings

0 5. Function icon

From left to right are

• clear current session

• stop recording

• Start current limit/stop current limit

• start breakpoint/stop breakpoint

• Write a new request based on what is written

• Resend selected request

• tool

• set up

0 6. Packet capture view

The request information captured by charles can be displayed in two ways, one is structured display and the other is serialized display

1. structure

   

   The structured display method will take a certain URL as the management foundation, and then classify and display according to the path level of each request. As shown in the figure above, the final pure interface we want

   The request is actually login2 under the api

2. sequence

   

   The sequence is arranged one by one according to the captured requests, one row is one, and each column represents a different meaning

3. Request information to view

   

Some label meanings in request initiation information:

• Header: request header information

• text: the textual form of the request parameter

• hex: The hexadecimal form of the request parameter

• form: the form of the request parameter

• Raw data: all the information initiated by the request, here you can see all the information initiated by the request

Some label meanings in request response information:

• Header: The header information of the server response

• text: the textual form of the response content

• hex: The hexadecimal form of the response content

• JavaScript: js form of response content

• JSON: The JSON format of the response content

• JSON text: JSON-formatted text form of the response content

• Raw data: everything the server responds to is here

0 7. Request filtering

Under normal circumstances, we may capture a lot of requests, so in order to facilitate us to find our target requests, we can set some specific filter conditions.

• quick filter

  

• Multi-condition filtering

  Proxy - Record Settings - Include - Add in the upper toolbar

  

08. Interface request debugging

1. Select the request to be debugged, right-click --> Compose

   

2. Modify parameters and execute

   

   

   This method can also be understood as a method of tampering with the request message and re-initiating the request

0 9 , breakpoint

Breakpoint means that the request will be suspended when it initiates or responds . Users can edit and tamper with the request message or response message according to their own needs to achieve ulterior motives.

• breakpoint setting

  In the upper menu bar Proxy-->Breakpoint Settings, click on it and add it. After adding, when the captured request hits the set information, it will be suspended

  

• Execute the request, tamper with the message

  Either re-visit on the page, or right-click in charles and request to click resend, you can enter the interface for editing the message

  

  

0 10. Interface request mapping

It is not very convenient to tamper with the message in the breakpoint, and it has to be changed every time. In order to modify the response information of an interface once and for all, the response information of the specified interface can be pointed to the local file I expect by means of interface mapping or remote interface

• local mapping

  The meaning of local mapping is to point the response content of an interface to a local file , so we first create a local file for the code students' full-stack interface project.

  The login interface is mapped locally, a txt file is created, and the following content is written. The code in the response message is changed to 500 in this content:

  {"code":"500","message":"success","data":"04cec0658e9a4e55906bdd37416e2841"}

  Set local mapping: Tools-->Local mapping in the upper menu bar

  

  Then resend (playback) the target interface and view the response

  

• remote mapping

  Let's look at a scene

  "There is a problem with the app online. You want to test whether there is a problem in the test environment. In fact, when you want to use the online package to send the request, do not send it online, but send it to the test environment. Or there is an app that needs to be tested, and the test environment The test has been completed, and it needs to be tested in the grayscale environment. However, there is no app corresponding to the grayscale environment, so what should I do?”

  There are two ways to solve it:

  ① One is to let the development repackage for you, and replace the address on the request line inside with the address of the test

  ②One is to do domain name mapping in charles. If the development is busy and there is no time to pack it for you, then we can directly map the domain name in charles

  Set up remote mapping: Tools --> Remote Mapping in the upper menu bar

  

  Visiting the original domain name will go to the target domain name

• 0 11. Rewrite

The rewrite function is suitable for performing some regular replacements on a certain type of network request to achieve the purpose of modifying the result.

The content of all elements of the interface can be rewritten: header, host, url, path, query param, response status, body.

For example, I want to simulate the abnormal situation of the response status code: Tools-->Rewrite in the upper menu bar

1. add a rule

   

2. Add matching request

   

3. Add rewrite rule

   

   After confirmation, the response status code of the login interface will be changed to 500 when accessing the page.

4. 

   5. In addition to the response status code, other interface information can also be rewritten, which can be selected in the rewrite rule

---

Finally, I would like to thank everyone who has read my article carefully. Watching the rise and attention of fans all the way, there is always a need for ritual exchanges. Although it is not a very valuable thing, if you can use it, you can take it directly.

These materials should be the most comprehensive and complete preparation warehouse for friends who do [software testing]. This warehouse has also accompanied me through the most difficult journey. I hope it can also help you! Everything should be done as early as possible, especially in the technology industry, and the technical foundation must be improved. I hope to be helpful…….