Charles profile

Charles is currently the most mainstream network debugging tool, also known as vase, for a developer to work with the network is a daily requirement, So a lot of times we need to debug the parameters, the data structure returned, look at the various headers of the network request, the protocol, the response time, etc. Charles sets himself up as the network access proxy server for the system, so that all the network requests go through it, To intercept and analyze network requests, Chareles can analyze network requests (HTTP and HTTPS) not only from local computers, but also from mobile devices

Installation, Charles

  • Method 1: Charles official website address, according to the computer operating system to choose the appropriate download method, students who are not poor can of course directly purchase
  • Method 2: Decrypt the software address, xclient.info/s/charles.h…

Charles initializes the Settings

Charles works by setting itself as the proxy server of the system to capture all network requests. Set Charles as the proxy server of the system to open Charles and set Charles as the proxy server of the system. Select Menu Proxy -> macOS Proxy and use the shortcut keys Shift + Command + P

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

  • Presentation of network requestsStructureandSequence
    • Structure: Divide and display all network requests by domain name
    • Sequence: Shows all network requests in chronological order

Filtering network Requests

We can capture all network requests from computers or mobile phones that have been set up, and our analysis of network traffic should be for a specific network under the capture analysis, in order to clearly see the demand for network requests

  • After setting up the configuration information all network requests are displayed on the panel with data filtered out at the bottom,FilterInput can be

Intercepts HTTP/HTTPS data

Intercepting HTTP requests

Charles’s main purpose is to capture network requests

  • The setting of Charles

To intercept iPhone web requests, you need to enable proxy. On the menu bar, choose Proxy > Proxy Settings, enter the Proxy port number, and select Enable transparent HTTP proxying

  • Settings on the iPhone

Open the wireless LAN of mobile phone, enter the current network, click to enter the details page of current WIFI (you can see the basic information of current WIFI, including subnet mask, port, IP address and router), configure proxy, set HTTP proxy select Manual, Fill in the COMPUTER IP address and port number at the server (usually the default is 8888) after setting up, open any application that requires network request on iPhone, you can see Charles pop up the confirmation menu of request, click Allow button to complete setting

Intercepts HTTPS requests

If you need to capture HTTPS network requests on your Mac, you will need to install Charles CA certificates

  • Click on the menu bar at the top and selectHelp -> SSL Proxying -> Install Charles Root Certificate
  • Set the newly installed certificate to permanent trust in the keychain
  • Even if the CA certificate is installed, Charles does not capture HTTPS network requests by default. Therefore, if we need to capture and analyze network requests under a certain host, right-click the network request and select itSSL Proxying Enabled

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

  • Select the top menu bar selectionHelp -> Install Charles Root Certificate on a Mobile Device or Remote BrowserYou can then see the installation instructions that Charles pops up

  • After the phone has set up the proxy situation, enter it in the mobile browserchls.pro/ssl, the installation prompts you to download the CA certificate

  • Verify the CA certificate you have just installed
  • IPhone open Settings -> General -> About This machine -> Certificate Trust Settings -> On switch

  • Charles menu barProxy -> SSL Proxying Setting -> Add

*: indicates a wildcard

Simulate weak network environment

During normal development, we often need to simulate the weak-network environment and perform adaptation work in weak-network environment by selecting Proxy -> Throttle Settings in the menu bar, and setting network request parameters (uplink, downlink bandwidth, utilization rate, reliability and other information) on the popup panel.

If you want to test the weak network environment for the specified host, you can click the Add button in the above picture, and set protocol, host and port on the popup panel to set the weak network for the specified host

Modifying a Network Request

For the captured network request, you need to modify the cookie, Headers, and Url of the network request. You need to select the network request to modify and edit, and see a “pen” button in the upper right corner. After you click the button, you can edit the selected network request

Modify the content returned by the server

Modify the data node or content returned by the interface, or even the status code, such as empty data, data exception, request failure, multi-page data.

Charles has a lot of super useful features

  • The Map function is suitable for long-term redirection of a request to another specified network address or to a local JSON file
  • The Rewrite function lends itself to some regular substitutions for network requests
  • The Breakpoints feature is good for making temporary changes to network requests (similar to the Breakpoints we developed)

The Map function

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

  • Map Remote redirects a network request to a local JSON file

It is suitable for switching from online to local or from test service to official service

  • Map Local redirects network requests to another network interface

Save a network data. Right-click a network and Save the interface’s Save Response as a data.json file

Then the request changes from the network to return my local data.json data

Their context function

The feature is only for the current network request, Breakpoints only exist in the current network request that has been set. After Charles is closed, Breakpoints will disappear next time when we open the network request that has been set Breakpoints, we will stop when we continue to access the request next time. Just like debug

  • Select a network request -> right -> clickBreakpoints

After requesting the network Edit Response, click execute and the server returns the result of the Text Edit

Server stress testing

Repeat stress tests server for concurrent access functionally Select a network request -> right-click -> Repeat Advanced -> Set number of iterations and concurrency -> Click OK

  • Iterations: indicates the number of Iterations
  • Concurrency: Concurrency

At the start of execution you 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

The request of the Reverse Proxy function allows you to specify local port mapping to the remote a different port, click on the top menu bar Proxy – > Reverse Proxies will be mapped to the local port 65407 remote on port 80, when continued access to the local port 65407, What is actually returned is the content provided by the remote port 80

Resolve conflicts with wall scaling software

Charles works by setting himself up as a proxy server for the system, Developers often use VPN flip wall to visit Google for information (flip wall software works by setting itself as the Proxy server of the system) to solve the coexistence of the two, you can fill in information such as the Proxy port of flip 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 will not actively modify the system agent