Mobile debugging is a skill that every front-end engineer must master. There are many different situations in the mobile environment, and we need to use some tools to debug. This article describes how to install Charles on a Mac, capture packets, and some application scenarios.

  1. Scenario 1: An error occurs on the internal environment interface of the APP and the user wants to check whether the requested data is incorrect
  2. Scenario 2: When you invoke wechat Pay in the wechat environment, you need to verify the domain name (aaa.bbb.com) before debugging. Change a line of code and I’ll post it, okay? It’s a hassle.
  3. Scenario 3: H5 in app side, call jsBridge, and communicate with the end, the local development environment does not have these jsBridge methods, then I change a line of code AND I will publish it? And then debug it on the end, okay?

Common Debugging Tools

  1. Eruda /vConsole Weinre, spy-Debugger, etc
  2. Charles caught

Download, Charles

Charles Download

Download and install Charles and open it

Mac agent

1. Install the certificate on the Mac

After the installation is complete, we can only capture HTTP url, want to capture HTTPS package need to install a certificate

Click Help — SSL Proxying — Install Charles Root Certificate

2. Trust certificate

A trust certificate is required after the installation is successful

3. Enable Mac OS Proxy

4. Add the required Proxying domain name to SSL Proxying

5. The HTTPS packet is captured successfully

6. Failed to capture packets?

Close other network agent on computer!! Failure to close may cause the Charles agent to fail

Android Phone Agent

1. Start the tool

Click Help — SSL Proxying — Install Charles Root Certificate on a Mobile Device or Remote Browser

2. Connect the mobile phone to Wi-Fi and configure the network proxy

Connect to current wifi, hold down current wifi- Modify network – Advanced Settings – Proxy Manual – Enter IP address and port number

3. Enter CHLS. Pro/SSL to download the certificate

4. Install the certificate

  • Search for credentials in your phone’s system Settings – click Encrypt and Credentials
  • Click Install from storage device
  • Select the certificate you just downloaded in your browser

5. Add the required Proxying domain name to SSL Proxying

Set SSL Proxying in the same way as Mac.

If you do not want to set the IP address of Proxy – > SSL Proxying Settings, set Host and Port to * if you do not want to set the IP address of Proxy – > SSL Proxying Settings

6. So far android packet capture can be successful

Open a Baidu link on your phone and check Charles structure to see if you can catch the network request.

Replace online files with Map Remote local files