“This is the 23rd day of my participation in the August Gwen Challenge.

One, foreword

When it comes to front-end analysis tools, I flip through them. The Chrome/Safari/Firefox/IE… Performance tools turned over a time, really feel tools are multifarious, but…..

The principle hasn’t changed.

Think also should write a public number article, to let others know what I am doing. But what subject?

Performance analysis under http1.1/2.0 protocol? I don’t think there’s an audience based on the topic.

The logic of front-end processing by different browser kernels? One might ask: What is a kernel? It hurts.

.

And from the historical article, step by step the basic operation of the article is more popular. So I got the idea to write this article.

When I was sorting out front-end tools, I found that Charles tool was good. Although it was a charging tool, it supported many platforms.

However, there are a lot of articles on the Internet saying that Charles does not record HTTPS applications on Android /IOS clearly. Here step by step to write out for your reference.

The text starts here.

Second, the environment

  • MacOS Sierra Version 10.12.6

  • Charles 4.2.5

  • IPhone Version 9.1 (slightly different versions, as long as you can find the corresponding configuration)

  • Huawei EMUI Version 5.0.3 / Android Version 7.0

3. Proxy configuration

  1. First open Charles, the main interface is as follows.

  1. Take a look at the proxy configuration. Point the Proxy Setting… . Also turn on the record button (which is on by default)

Remember this port, the default is 8888.

  1. Install Charles’ own root certificate. Click Help >SSL Proxying > Install Charles Root Certificate

  1. Check whether the Charles certificate in the keychain is always trusted.

  1. Save Charles’ root certificate. Click Help >SSL Proxying > Save Charles Root Certificate. Do I need to tell you where to store it? If anything, suit yourself!

  1. Check the local IP address. Click Help >Local IP Address.

That’s all for your computer, but let’s start configuring your phone. Because IOS and Android have different configurations, I’m going to write this in two parts.

4. IOS configuration

  1. Open the wifi information screen and click Manual to configure the proxy server. The IP is the IP you saw earlier, and the port is the port you configured earlier.

2. After the previous step is configured on the mobile phone, the following information is displayed on the PC. This must be the dot Allow.

  1. The following prompt appears when you type in an HTTPS url on your phone. Click trust. Another way to do this is to go to Settings -> General -> About Native -> Certificate Trust Settings -> find Charles Proxy Custom Root Certificate and turn on trust.

  1. Open the HTTPS page on your phone. View the recording effect on the computer. Up here is Charles’s recording on the computer; Below is the open page on the phone.

5. Android configuration

  1. Configure the proxy on the mobile phone. How to find the following page? To hold down the wifi connection, a menu appears, then click Modify Network, and in a new window click Show Advanced Options.

  1. After the previous step is configured on the mobile phone, the following prompt is displayed on the computer. This must be the dot Allow.

3. Install the certificate on the mobile phone. 3.1. Upload the saved root certificate file to the mobile phone. (I sent it through wechat’s file Transfer Assistant. You can use whatever you want.If you can find out where the files are, right). 3.2. Click Install from SD Card to find the certificate file (the one on the top right below).

3.3. Enter the screensaver password and certificate name. I know there are people here who say, why do I take a picture of this step instead of a screenshot? Ha ha. That’s because you’re not allowed to use screenshots in this step!

  1. Open the HTTPS page on your phone. View the recording effect on the computer. Up here is Charles’s recording on the computer; Below is the open page on the phone.

This concludes the text.

Six, the summary

In this does not speak illusory principle and logic in the article, step by step operation does not let you have a very down-to-earth feeling? In fact, I tried not to write Charles’ principle and logic of capturing packages (actually a proxy, what’s the point?).

Such packet capture process is not how complex the principle is, but the logic is a bit convoluted (not the operation of the feeling of logic, but the explanation of logic is a bit convoluted), open it is not difficult to understand, is how packets in the network go. As long as you understand this, no matter what phone it is, no matter what system it is running such a packet capture tool, it can be configured.