current position:Home>Front end artifact - download, configuration and use process of Charles (vase) [Mac version]

Front end artifact - download, configuration and use process of Charles (vase) [Mac version]

2022-05-15 02:17:51Winding paths lead to seclusion~

1、 Preface

Have you ever encountered the following difficulties in cross terminal and cross browser development : Some bug Can only be reproduced on a browser of a certain model , Want to debug Do not know how to start . Only in dev Environment console Push back to the development environment , In use vscosole To view the ! So every time I think console You have to push one page at a time , And a waste of time , And its pain ! The tool introduced next can be configured at one time , Lifelong cool turn ~

Charles The role of

  • Implement request interception , Caught analysis ( Can span terminals , As we'll see )
  • Proxy out the local domain name , It can be accessed by other terminals in the LAN .

2、 download

Support genuine !!!
Genuine download address :https://www.charlesproxy.com/
For non-commercial , Students who debug themselves can make a small crack .
Crack tools :https://www.zzzmode.com/mytools/charles/

3、 To configure

3.1、 Check out the ip Address

Turn on network preferences , In the red box is ip Address
 Insert picture description here

3.3 Download and trust certificates (mac piece )

If you don't do this department , It may cause the computer to be unable to access the Internet

 Insert picture description here
Click here to install the certificate , Hold down alt + The space calls out the focus search , Then search the keychain , Set the in the red box to always trust
 Insert picture description here

3.2、 To configure mac Grab the bag

 Insert picture description here
Complete this step , We can catch mac The request package on the computer .
And then there's the play , Grab the request packet of other terminals , With ios Mobile phone as an example

3.3、 Enable SSL agent

The first thing you need to do is mac Start up on the computer ssl agent
 Insert picture description here

3.4、ios Mobile phone grab

Click the mobile phone to the following position first
Set up -> WLAN -> Configure agent -> Manual Make the following settings
 Insert picture description here
This is a pop-up window on the computer , choice allow That's it
 Insert picture description here

3.5、 Mobile phone installed SSL certificate

On the cell phone Safari Browser input address https://chls.pro/ssl, The certificate installation page appears , Click on the install
The phone is set with a password for installation .
 Insert picture description here
iOS 10.3 System and above , Need to be in Set up → Universal → About the machine → Certificate trust settings It uses full trust Charles certificate , Open the trust formal button
 Insert picture description here

Reference resources :
https://blog.csdn.net/etemal_bright/article/details/111578849
https://www.jianshu.com/p/5539599c7a25

copyright notice
author[Winding paths lead to seclusion~],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120523553883.html

Random recommended