Charles, who is a good gay friend of MAC development, I don’t know if you know how to use it. Believe that many children’s shoes are just familiar with a few simple functions, today for you to unlock several advanced posture…… I hope I can help you.

Charles is a what

Charles is what, I believe everyone will know, if there is really don’t know, please search… What I want to tell you here is what can Charles do for us? Consider several scenarios:

  • After developing the page locally, Mr. A wanted to connect the interface, but the interface was deployed on the test server.xxx.comAt this time, there will be cross-domain problems. How to solve them?

    There are many ways to solve this problem. You can just set up a proxy, but here’s just how to use Charles to implement temporary cross-domains. Charles can rewrite HTTPS request headers and response headers to add response headers (access-control-allow-Origin) for cross-domain addresses to realize cross-domain.

  • The mobile terminal of the online application is abnormal. How to confirm whether the problem is the data returned by the interface or the compatibility of the mobile phone?

    Intercept the HTTPS data packet from the mobile phone and check whether the interface data is normal. If the interface is normal, troubleshoot the interface problem and confirm the compatibility problem of the mobile phone.

  • The online application is abnormal on the mobile terminal, but the interface is normal. If the cause of the problem cannot be analyzed purely from the code level, how can we quickly locate and solve the problem?

    Use the resource mapping function of Charles to map the remote JS resource to the JS file in the local or test environment, and troubleshoot the problem by logging (intuitive alert).

  • .

There are many scenes will not be introduced one, only the above three high frequency scenes.

The purpose of Charles is summed up: agent, capture, change the package!

Who’s going to use Charles

Use MAC native front-end, testing, APP development, back-end development….

Position to be unlocked:

This article only unlocks the following important poses that can be used in all three scenarios.

  • Intercept HTTPS packets
  • Change the HTTPS request response header
  • Resource mapping

    The HTTPS packets in the MAC address are intercepted

    The position is unlocked in three steps:

  • 1. Install the root certificateCharles Root Certificate.

    Menu -> help -> SSL Proxying -> Install Charles Root Certifiate.

  • 2. Find the installed Charles root certificate and trust it.

    On MAC, go to Applications -> Utilities -> Keystring Access, open the keystring, select the Charles Proxy CA certificate, double-click it, and set the certificate to always Trust.

  • 3. Right-click a domain name and enable the HTTPS proxy.


After these three steps, we can catch the HTTPS request packet on the MAC, as shown in the figure below.


Intercepts HTTPS data packets on your phone

The position is unlocked in three steps:

  • 1. The OPERATION of intercepting HTTPS packets in the MAC address is complete.
  • 2. Set the proxy IP address to the MAC address.

    To view the MAC IP Address, choose Help -> Local IP Address.

  • 3. After the agent is set for the phone, at this time, Charles under MAC will pop up the window whether to Allow access, click Allow:


  • 4. Install and enable the Charles root certificate on the mobile phone
    • Menu -> Help -> SSL Proxying -> install Charles Root Certificate on a Mobile Device or Remote Browser
      • Open a browser on your mobile phone, type in chls.pro/ SSL, download the Charles root certificate, and install it
      • This step is especially important. On your IOS phone, go to Settings > General > About Local > Certificate Trust Settings to enable the Charles certificate you just downloaded.

  • 5. Last step, still select a domain name on Charles, right-click, and allow proxy.



    After completing these steps, we can see the HTTPS packets on the phone on Charles.

    Change the HTTPS request response header

    The previous section describes a scenario, how to implement cross-domain in the development stage, and also describes how to use Charles to modify the HTTPS response header to achieve the implementation. The specific operation steps are as follows:

    Here’s an example: I want my ifanqi. Me domain page to visit an interface under Baidu. The steps are as follows:

  • 1. Open the Settings panel from the menu -> Tools -> Rewrite.
  • 2. Add a rule

  • 3. Add the response header

After this fierce operation, ifanqi. Me under the page can access the interface of Baidu. Interested students can try, by modifying the request header and response header, we can call the interface of other websites at will, at the same time to deepen their understanding of HTTP (S) protocol.

Resource mapping

Resource mapping, in simple terms, maps a request from a resource on a line to another resource on a line or to a local file. For example, resource mapping can help me actually request mmm.com/index.js, or a js file on my local hard drive, when I request xxx.com/index.js. What good would that do? As mentioned above, it can quickly check and solve online problems.

Add logs (such as console or Alert) to local JS to quickly locate problems. When the problem is resolved, you can verify that the problem is resolved.

Let’s unlock these two positions.

Remote mapping

    1. Menu -> Tools -> Map Remote to open the Settings panel.
    1. Set the file address before and after mapping


The local map

  • 1. Choose Tools > Map Local from the menu to open the configuration panel.
  • 2. Set the file address before mapping and select the local file after mapping. After these two steps are set up, you can implement the local resource mapping.

Resource mapping is simple, but it can help us identify, solve, and verify online problems.

At this point, all the important Charles poses are unlocked. In addition, Charles has a lot of interesting functions, you can have some time to study, they are relatively simple. I’ll list them briefly here:

  1. Interrupt points for requests.
  2. Concurrent request tests.
  3. Reverse proxy.
  4. The speed limit.
  5. DNS deceit.
  6. .

These are relatively simple, interested in children’s shoes can go to research, develop new gameplay.