This article was first published on the public account “AntDream”. You are welcome to search “AntDream” on wechat or scan the QR code at the bottom of this article to follow it. We will make progress every day

During the daily development process, it is inevitable to capture packets to check whether the data returned by the server is normal, and Charles is a good tool to capture packets.

Download and install it at www.charlesproxy.com/

The principle of the author

After the configuration, Charles actually made the computer become an intermediate proxy server. All requests on our mobile phone would pass through the computer and be intercepted by Charles. Then Charles disguised himself as a mobile phone and sent requests to our remote server address, so Charles could record the request information we sent.

When the server responds to the request, it actually responds to Charles’s request. Charles gets the request from the server and forwards it to our mobile phone, so Chaerles can get the detailed information of the response from the server.

The use of Charles

Common HTTP packet capture

After installing Charles, we can see a lot of requests, because Charles starts by default to fetch all Mac network requests:

If you want to turn it off, go to the top menu bar Proxy–>macProxy and check it off

What about the web requests we want to capture from mobile apps?

First of all, we need to make all network requests of the mobile phone pass through the Mac computer with Charles. To achieve this effect, we only need to set a proxy for the mobile phone’s network. The proxy IP is the IP of Mac, and the proxy port is the port set in Charles

Charles also provides a tool to query the Local IP Address: help >Local IP Address is available at the top

After getting the IP address of the computer, we also need to know the port of the agent. Charles’ default port is 8888, which can also be checked and set. Open the top menu Proxy–>Proxy Setting

Next is to set up the mobile phone network agent, the setting way is also very simple.

  • Open the Wi-Fi details page of your phone’s current connection to find oneThe agentThe option to
  • Then selectmanual, will appearThe host nameandport“, fill in the IP address and port number found above and save
  • At this point, Charles on the computer will pop up a prompt, which basically says to choose whether to listen to capture packets or not, selectAllowCan be

With a few simple steps above, Charles can grab the phone’s bag.

Https caught

Many web links are now Https, and the Settings above only catch Http requests. To catch Https requests, we need a few more Settings.

One of the features of Https is that the request will verify the certificate, and from the principle of Charles introduced briefly at the beginning of this article, we can also know that Https packet capture can be achieved by adding an Https certificate on the basis of Http packet capture. This Https certificate consists of two:

  • Charles needs to configure an Https certificate so that Charles can communicate with the server
  • Another is the Https certificate on the phone, so that the phone can communicate with Charles normally
  • In effect, Charles went from a normal Http proxy server to an Https server
(1) Charles installs the Https certificate

First open the Charles menu at the top: Help–>SSL Proxying, and you can see that there are many options

  • chooseInstall Charles Root CertificateThat is, install Charles’ root certificate
  • In the open key chain, selectCharles Proxy CA, double-click open, select always trust

(2) Install the Https certificate on the mobile phone

Or the same menu entry above, this time depending on the phone to choose different

After selecting the corresponding mobile phone model, a prompt box will appear, which contains the address for downloading the certificate http://chls.pro/ssl. Open the corresponding link on the mobile phone to download and install the certificate

(3) Charles Settings

After installing the phone certificate, open the Charles menu: Proxy–>SSL Proxying Settings

After the above steps, Charles can now capture packets using Https.

other

After using Charles, remember to remove the agent from the mobile phone, otherwise the mobile phone will not be able to access the Internet

Welcome to follow my wechat public number, and make progress with me every day!Copy the code