██FR█████ █INTELL███████████

HarmonyOS Next Network Packet Capture Configuration Practice


This content originally appeared on DEV Community and was authored by kouwei qing

HarmonyOS Next Network Packet Capture Configuration Practice

Background Introduction

In mobile application development, packet capture is the best way to debug network requests. Charles, a mainstream packet capture tool in the market, encountered some configuration issues when debugging IM network requests due to HTTPS requests in the testing environment. This article records the entire network request packet capture configuration for HarmonyOS Next.

Introduction to Charles

Charles is a network debugging and analysis proxy tool used to intercept and view communications between devices and servers. It supports monitoring network traffic of applications, modifying requests and responses, and simulating different network conditions. Key functions include:

  • Intercepting HTTP and HTTPS network packets.
  • Supporting retransmission of network requests for backend debugging.
  • Enabling modification of network request parameters.
  • Allowing interception and dynamic modification of network requests.
  • Simulating slow network conditions.

To use Charles, configure the application’s requests to be forwarded through the Charles client proxy to the server, enabling packet capture in the Charles client. After starting Charles, it automatically sets the browser to use the proxy without additional configuration. When sending network requests via the browser, Charles directly captures request and response information.

The latest version of Charles is 5.0.1, supporting packet capture on Mac, Windows, and Linux systems:

Charles运行界面

Charles Installation

Charles installation address: https://www.charlesproxy.com/

Charles下载页面

Charles Usage Steps

Device proxy settings after installation:

  1. View Charles IP address (typically the same as the PC host IP):

    • For Charles IP: Click Help → Local IP Address.
    • For PC IP (Windows): Open “Run” (Win+R or search in the taskbar), enter “cmd” to open the command line, then type “ipconfig”.
    • For Mac: Obtain from Network Settings. 查看Charles IP地址

  2. Set Charles debugging port number:

    • Click Proxy → SSL Proxy Settings → Click “Add” under Include → Add “*:*” (Host: “*”, Port: “*”) and “*:443” (Host: “*”, Port: 443) → Click “OK”. SSL代理设置
    • Click Proxy → Proxy Settings → Set “Port” under “HTTP Proxy” (default: 8888) → Check “Enable transparent HTTP proxying” → Click “OK”. HTTP代理设置

  3. Connect the phone and PC to the same LAN and set Wi-Fi to manual proxy with Charles’ IP and port:

    • On the phone, enter the Wi-Fi password page, click “Proxy” before inputting the password, select “Manual”, set “Proxy server hostname” to Charles’ IP and “Server port” to 8888, then connect to Wi-Fi.

At this point, HTTP packets can be captured normally. To capture HTTPS packets, continue with certificate configuration.

Certificate Installation

Install Charles root certificate into the PC trust directory:

  • Click Help → SSL Proxying → Install Charles Root Certificate → Click “Install Certificate” → Select storage location (current user or local computer) → Click “Next” → Select “Place all certificates in the following store” → Click “Browse” → Set the certificate storage path to “Trusted Root Certification Authorities”.

    PC证书安装步骤

  • Double-click the certificate, select “Trust” and “Always trust”:

    证书信任设置

Import the system root certificate to the phone:

Method 1:

  • Click Help → SSL Proxying → Install Charles Root Certificate on a Mobile Device or Remote Browser → Access http://chls.pro/ssl on the phone’s browser → Click “Download Now” to save the certificate to the phone memory. 手机证书下载页面

Method 2:

  • On PC, click Help → SSL Proxying → Save Charles Root Certificate… to save the certificate locally as a PEM file. Connect the phone to the PC, upload the PEM file to the phone via DevEco (right-click the target folder, select “Upload…”, then choose the PEM file). 证书文件保存界面

Certificate installation steps on the phone:

  • Go to Settings → Privacy & Security → Scroll down to click “Advanced” → Select “Certificates & Credentials” → Enter certificate installation options → Choose “Install from storage device” → Click “CA Certificates” → Click “Continue” → Browse to the downloaded certificate location → Select the certificate → Confirm “Certificate installed successfully”. 手机证书安装操作界面 证书安装成功提示

HTTPS network requests can now be captured normally. If issues persist, restart Charles and retry.

Notes:

  1. When configuring the environment, select “Allow” in Charles’ pop-up window to ensure connection with the phone.
  2. CRT format certificates are not supported; convert them to PEM format.

Summary

This article introduces capturing mobile network requests (including HTTP and HTTPS) via Charles on HarmonyOS Next, detailing SSL certificate installation steps and best practices.

HarmonyOS Core Technology##HarmonyOS Development Tools##DevEco Studio##

Social


This content originally appeared on DEV Community and was authored by kouwei qing