Content of the listing

  • The introduction of Charles
  • Installation, Charles
  • Charles initializes Settings
  • Filtering network requests
  • Intercepts HTTP/HTTPS data
  • Simulate weak network environment
  • Modifying a Network request
  • Modify what the server returns
  • Server stress test
  • The reverse proxy
  • Resolve conflicts with wall climbing software

The introduction of Charles

Charles is the most popular network debugging tool (Charles, Fiddler, Wireshark…) For one thing, working with the network is a daily requirement for a developer, so many times we need to debug parameters, return data structures, look at various headers of network requests, protocols, response times, and so on. So get to know Charles and use it

Charles intercepts and analyzes network requests by setting himself up as the system’s network access proxy server so that all network requests pass through it.

Chareles can analyze network requests (HTTP and HTTPS) not only on the computer itself, but also on mobile devices.

Charles is paid software, the author has developed such a great tool that is easy for developers to use, we encourage the use of legitimate software, but for those who are low on money or students, it is better to have a cracked version, don’t worry, I have all this ready, the next section will explain how to download and install.

Installation, Charles

  • Method 1: Charles website address, according to your computer operating system to choose the appropriate download method. Download down at this time is the need to charge, not poor money of course, students can directly buy. Buy links
  • Method 2: Go to the official website as shown in method 1 and download the corresponding JAR package. So, for example on the MAC, go to the Finder, select the application, select Charles, right click and choose “Show Package Contents”, you see the Contents directory, click in and select the Java folder, drag and replace the JAR that you downloaded. At this point, Charles’s hack is complete.

Charles initializes Settings

Charles works by setting itself up as a proxy server for the system to capture all network requests. So to use Charles, we have to set Charles as the proxy server for the system.

Open Charles, and when it first starts without buying or cracking, there will be a countdown, and then it will see the main screen of the software, and then it will ask you to grant it the permission to be a system agent. Clicking Authorization will ask you to enter the password of the current system user. Of course, you can ignore or reject the request and then set it as the system proxy server when you want to capture the packet. Step: ** Select “Proxy” -> “Mac OS X Proxy” from the menu. ** As shown below:

Any network requests on your computer will then be visible in Charles’s requests panel

Look at Charles’s home screen

  • Red circle 1: This represents how all network requests are presented. Named “Structure” and “Sequence” respectively.
    • Structure divides and displays all network requests by domain name
    • Sequence displays all network requests in chronological order
  • Red circle 2: Some network request Settings such as HTTPS and port information are set in this menu bar
  • Red circle 3: This is where all the certificate Settings take place

Filtering network requests

Since Charles can capture all the network requests of the computer or the set mobile phone, and our analysis of network transmission should be the packet capture analysis under a specific network, in order to clearly and obviously see the network requests we are interested in, Charles’s ** “filter network request function” ** will usually be used.

  • Method 1: On the left side of Charles’s main panel, below all network requests, you can see a “Filter” input field, where you can enter keywords to Filter out network requests that interest you. For example, the network request I want to analyze comes from “www.baidu.com”, you can type “baidu” below.

  • Method 2: At the top of the Charles menu bar, you will see the “Proxy” option. Click on the menu bar and select “Proxy” -> “Recording Settings”. Select the “include”. There is an “Add” button on the panel. Click it and set the protocol, host name, port, path and parameters of the network request we need to analyze in the panel. Of course, you can only set some major information, such as the combination of protocol and host name.

  • Method 3: Generally, after Charles is opened and configuration information is set (such as the local computer or mobile phone with proxy Settings), all network requests will be displayed on Charles’ panel. At the same time, if the network requests we are interested in are also displayed on the panel, In the “Structure” mode, you can select the network request to be analyzed, right-click and select ** “Focus”. In “Sequence” mode, you can see a Focus** button in the lower right corner of the network request display panel of the panel. After clicking the check box, Charles will only show the network requests that you are interested in.

    Intercepts HTTP/HTTPS data

    Intercepts HTTP requests

    Charles’s main goal is to capture network requests. Here’s an example of how to capture packets on the iPhone.

    The setting of Charles

    Intercepting iPhone network requests requires enabling the proxy function for Charles. On the menu bar, choose ** “Proxy “->”Proxy Settings”. Enter the port number of the proxy and select Enable transparent HTTP proxying **.

    Settings on the iPhone

    Open the network in the “System Preferences” center of the computer to view the LOCAL IP address, open the “Settings” -> “Wireless LAN” of the mobile phone, enter the current network in use, click to enter the details page of the current WIFI (you can see the basic information of the current WIFI, including the subnet mask, port, IP address, router). In the bottom corner you can see the ** “DNS” and “HTTP proxy” sections. We click “Configure proxy” ** and select “Manual” to set the HTTP proxy. Enter the COMPUTER IP address for server, and write 8888 for port. After setting up, we open any application on iPhone that requires network request, and we can see that Charles pops up the confirmation menu of the request. Click “Allow” button to complete the setting.

    Intercept HTTPS requests

    If you need to capture HTTPS network requests, Charles’s CA certificate will need to be installed. The steps are as follows;

    • You first need to install the certificate on your MAC. Click on the menu bar at the top of Charles and choose “Help” -> “SSL Proxying” -> “Install Charles Root Certificate”.

    • Example Set the newly installed certificate to permanent trust on the keychain

    • Even if a CA certificate is installed, Charles does not capture HTTPS network requests by default. Therefore, if you need to analyze a network request on a host, right-click the network request and select SSL Proxying Enabled. So we can see the HTTPS web requests that we’re interested in.

    If you need to capture HTTPS network requests from mobile devices, you will need to install a certificate on the mobile device and do some simple setup

    • On the top menu bar of Charles, choose Help ->”Install Charles Root Certificate on a Mobile Device or Remote Browser”. You can then see the installation instructions for Charles pop up.

    • With the Charles agent set up on the phone, type “chls.pro/ SSL” in the phone’s browser. Installation prompt Download the CA certificate.

    • Verify the newly installed CA certificate

    • IPhone Go to Settings -> General -> About Local -> Certificate Trust Settings -> Turn on

    • On the Charles menu bar Proxy -> SSL Proxying Setting -> Click the Add button -> in the dialog box that pops up set the HTTPS field that you want to listen on (*: for wildcard)

    • Once you’re done, grab all the HTTPS web requests you want.

Simulate weak network environment

In peacetime development, we often need to simulate the weak network environment, and make the adaptation work under the weak network environment. Charles provided this service for us.

On the Charles menu bar, choose Proxy -> Throttle Settings. Set the network request parameters (upstream, downstream bandwidth, utilization, reliability, and so on) on the panel that pops up. See the figure below.

If you want to test a specific host on a weak network, you can click the “Add” button in the above image and set the protocol, host and port in the panel that pops up to set the weak network for the specified host.

Modifying a Network request

For the captured network request, we often need to modify the cookie, Headers, Url and other information of the network request. Charles provides the ability to edit and resend network requests. Click the “Pen” button in the upper right corner to edit the selected network request. After editing, you can see the Execute button in the lower right corner. So our edited web request can be executed.

Modify what the server returns

Many times we will need to modify the data nodes or content returned by the interface, or even the status code, to facilitate debugging of the code. Such as empty data, data exception, request failure, multiple pages of data. Charles provides us with super practical functions such as Map (Map Local, Map Remote), Rewrite, and Breakpoints, all of which can modify the data returned by the server. But there are differences and applicable scenarios:

  • The Map feature is suitable for redirecting a request to another specified network address or a local JSON file over a long period of time
  • The Rewrite functionality lends itself to some regular substitutions for network requests
  • The Breakpoints feature is suitable for making temporary changes to network requests (similar to the Breakpoints we developed)

The Map function

The Map function is divided into Map Local (redirects a network request to a Local JSON file) and Map Remote (redirects a network request to another network interface).

On the Charles menu bar, choose Tools > Map Remote or Map Local to access the corresponding function module.

The Map function of Remote

This scenario is suitable for switching online to local and testing services to official services. For example, the following image shows switching from a formal service to a test service

The Map function of the Local

We need to fill in the original address information and the local destination file for the redirect. We can first Save the Response content of an interface (select the corresponding network request, right click Save Response) into a data.json file. Then we edit the status, message, data and other information inside to map the file to the target we want.

As shown below, I mapped the content of a network request to my local JSON file. Then the content of the request is changed from the network to the data returned to my local.

Map Local may have a small defect. The HTTP Response Header returned by Map Local is different from the normal network request. If the program sets the verification Header information, Map Local will fail. The solution is to also use the Rewrite function to Rewrite the relevant HTTP headers into the information we need

Rewrite the function

Rewrite is suitable for regular substitution of a network request in order to modify the result.

If the function modules and click events displayed on the interface of my App are completed according to the interface, I want to achieve the purpose of replacing the name of the function module. Step: Click on the top menu bar ** “Tools” -> “Rewrite”**. On the panel that is displayed, select Enable Rewrite. Click the Add button in the lower left corner and write the Name of this configuration in the upper right corner at **Name: ** (if you have more than one Rewrite, make it easier to distinguish later).

  • You can Rewrite specific network requests. You can do this by clicking the Add button in the upper right corner under the Location panel. Set the network request configuration information on the panel that pops up. Note that you need to set the Protocol, Port, Host, and Path information at the same time (MY test added the Protocol, Host, and Port are invalid)

  • Then Rewrite the specified Type and Action.

    The types include Add Header, Modify Header, Remove Header, Host, Path, and so on.

    Where can select Request and Response. Refers to whether the following changes are made for Request or Response

  • Click the Apply button after completing the Settings to take effect. The next time you request the network, you get back what we just set up. For example, the current “policies and regulations” should be changed to “ha ha ha, I am fake policies and regulations”. This is where you can use the Rewrite function

Their context function

Compared with other modification network requests, Breakpoints are only for the current network request, and Breakpoints only exist in the current network request that has been set. After Charles closes, the next time the network request is opened, Breakpoints disappear. The network request Breakpoints step is the easiest to modify, as is the Breakpoints set in our debugging tool.

For a network request for which we have set Breakpoints, Charles will stop the next time we continue to access the request, just like a debug. At this point we can Edit the Request by clicking the Execute button in the lower right corner after modifying the Request. Then wait until the server returns and the breakpoint state continues, you can Edit Response. Step: Select a network request -> right -> click “Breakpoints”.

As shown below, Breakpoints are set for this interface. After requesting the network Edit Response and clicking execute, the server returns the result that we have edited.

Server stress test

We can use Charles’s Repeat feature to stress test concurrent access to the server. Step: Select a web request -> Right click -> Repeat Advanced -> Set the total number of Iterations and Concurrency in the pop-up panel -> Click “OK”. ** Start execution can see the size of the set number of concurrent accesses up to the set total number of iterations. (Professional stress testing tool: Load Runner)

The reverse proxy

Charles’s reverse proxy capability allows us to map requests from a locally specified port to another port remotely. Setting: On the top menu bar Proxy -> Reverse Proxies.

As shown below, I mapped the local port 8080 to the remote port 80. After clicking OK, WHEN I continue to access the local port 80, I actually return the content provided by the remote port 80.

Resolve conflicts with wall climbing software

Charles works by setting himself up as a proxy server for the system, but we developers often use VPNS to go over the wall to Google to find information (these wall climbing software also set himself up as a proxy server for the system) in order for the two to coexist. We can fill in information such as the Proxy port that passes over the wall in Charles’ External Proxy Settings. At the same time, we need to turn off the automatic setting of the wall climbing software and change it to ** “manual mode” **. (so that it does not actively modify the system agent)

conclusion

Charles has powerful functions and simple interface. After reading this article and doing some exercises, I believe you can quickly master it. “If you want to do a good job, you must first sharpen your tools”. Enjoy yourself

Refer to the link

Tang Qiao’s blog