Charles packet capture tool: 90% high-frequency usage guide for cross-terminal needs

Windows developers may first think of Fiddler, but Charles is the "network demining oil" that can be used on all Win/Mac/Linux platforms, has a clean interface that is not bloated, and covers all debugging scenarios on the Web + mobile terminals** - the front-end interface can be changed without changing the environment, the mobile terminal can detect abnormalities without changing the code and send packages, and the back-end can check parameter strings and modify them without looking through device logs.

This article avoids fancy niche functions and only talks about the core configurations and techniques that can be used to set up the environment in 10 minutes and be used for daily development and testing. After reading this, you will be able to solve the problem directly.

1. Basic configuration check: first take the "road that can be taken"

Just installed and opened Charles. Don’t rush to fiddle with the SSL certificate or mobile phone. Confirm the 2 default cornerstone configurations first to avoid pitfalls later.

1.1 HTTP proxy port

Charles will enable the listening port for HTTP/HTTPS traffic by default. As long as there is no conflict, there is no need to change the default value:

// 推荐「开箱即用」配置（默认就是这个！）
{
  "http_proxy_port": 8888,   // 所有设备流量统一走的入口端口
  "socks_proxy_port": 9999,  // 仅抓非HTTP流量（如FTP早期版本）时用
  "enable_automatic_config": false // 手动配置设备代理更稳定
}

👉 View/Modify path: Top menu bar →Proxy → Proxy Settings → Proxiestab page

2. HTTPS decryption configuration: Charles’s “soul”

Undecrypted HTTPS traffic is all gray-green garbled binary stream in Charles, and no interfaces, parameters, or responses can be seen - this step is a necessary "hard configuration".

2.1 Charles terminal (PC) operation

① Enable global/specified SSL proxy

Pay attention to privacy when capturing the production environment (only capture core interfaces). In the test/learning environment, you can use wildcards to capture all:

// 实用场景的 2 种核心配置
// 场景1：学习 / 全量测试（通配符抓所有）
{
  "enable_ssl_proxying": true,
  "locations": ["*:*"]
}

// 场景2：生产排查 / 隐私敏感（只抓指定域名）
{
  "enable_ssl_proxying": true,
  "locations": [
    "api.example.com:443", // 生产单接口
    "test.xxx.cn:*"         // 测试环境全端口
  ]
}

👉 View/Modify path: Top menu bar →Proxy → SSL Proxying Settings

② Install and trust the Charles root certificate (local)

The principle of decryption is "man-in-the-middle hijacking → Charles issues sub-certificate → locally trusts Charles root certificate", so both the PC and the debugging device must trust it:

  • MacOS：Help → SSL Proxying → Install Charles Root Certificate→ Open "Keychain Access" → SearchCharles Proxy CA→ Right click →显示简介 → 信任→ Change "When using this certificate" to "Always trust"
  • Windows：Help → SSL Proxying → Install Charles Root Certificate→ Select "Local Computer" →下一步 → 将所有证书放入下列存储 → 浏览 → 受信任的根证书颁发机构 → 确定 → 完成
  • Linux（Ubuntu）：Help → SSL Proxying → Save Charles Root Certificate→ save as.pem→ move to/usr/local/share/ca-certificates/→ executesudo update-ca-certificates

2.2 Debugging device side (mobile phone/tablet) operation

⚠️ Core premise: The mobile phone and Charles' PC must be on the same non-isolated LAN** (for example, both are connected to the same WiFi at home/company, and cannot be connected to the combination of employee WiFi + internal dedicated line)

General steps for Android devices

⚠️ Android 7.0 (API 24)+ Pitfall: The certificate installed by the user is not trusted by default! If it is a test App that you wrote yourself, you need tores/xml/network_security_config.xmlRiga trust configuration; if it is a browser/third-party public app, some manufacturers (Xiaomi, OPPO, etc.) may need to manually turn on "Trust user certificate for VPN and applications".

  1. Check PC LAN IP: For Macifconfigtry to finden0(WiFi)inet;For WindowsipconfigLook for "IPv4 Address" under "Wireless LAN Adapter WLAN"
  2. With mobile phone WiFi agent: Long press to connect to WiFi →修改网络 → 高级选项 → 代理手动→ Fill in PC IP and 8888 port → Save
  3. Install the root certificate on the mobile phone: access via mobile browserchls.pro/ssl→ Download the certificate → Follow the prompts to install (for Android 11+, select "CA Certificate")

Common steps for iOS devices

The trust step of iOS is one more step than that of Android, but it is more unified and standardized:

  1. Same as Android’s “Check IP → Configure WiFi Proxy”
  2. Installation Description File: Safari accesschls.pro/ssl→ Download →允许 → iPhone→ Close
  3. Activate and trust the certificate (this step is a must!):
  • activation:设置 → 通用 → VPN 与设备管理→ findCharles Proxy CA→ Installation → Enter the lock screen password
  • Global trust:设置 → 通用 → 关于本机→ Scroll to the bottom to find证书信任设置→ openCharles Proxy CAswitch → point继续

3. 90% high frequency function: learn to clear mines

After the environment is set up, these functions are used every day, and most network problems can be solved by mastering them proficiently.

3.1 Traffic filtering: Don’t be overwhelmed by irrelevant traffic

Charles captures all traffic by default - as soon as you open WeChat/browser on your phone, the list on the left instantly turns into a waterfall, which must be filtered at this time.

Temporary search filtering

The simplest way is to directly enter keywords in the white "Filter" search bar at the top of the Charles main interface:

  • You can search for domain name (such asapi.example）
  • You can search for interface path (such as/user/info）
  • Can search for request/response parameter values (e.g.id=123）
  • Supports fuzzy matching and takes effect in real time

Permanent Focus filter

If you only focus on a few fixed domain names, you can set them as "core focus":

  1. In the "Structure" tree view on the left, right-click the target domain name
  2. Select "Focus"
  3. Other unfocused domain names will be automatically folded into the "Other Hosts" gray folder below, without disturbing the line of sight at all.

3.2 Breakpoint debugging: real-time tampering request/response

Breakpoint debugging is the most "hard-core" practical function of Charles - you can test various boundary scenarios without changing a line of code, restarting the service, or repackaging:

2 ways to configure breakpoints

  1. Temporary single request breakpoint: the fastest way to debug
  • In the "Structure" or "Sequence" timing view, find the captured target request
  • Right click → Select "Breakpoints"
  • If you re-initiate the request, it will be intercepted by Charles.
  1. Batch rule breakpoint: suitable for intercepting all requests of the same type

👉 Path:Proxy → Breakpoints Settings→ Check "Enable Breakpoints" → Click "Add"

# 批量规则示例：拦截所有 /api/ 开头的请求，改完请求改响应
Protocol: HTTP/HTTPS
Host: *                # 所有域名，可填具体的
Port: *                # 所有端口，可填443
Path: */api/*          # 拦截路径包含 /api/ 的
Query: *               # 所有查询参数，可填id=123
Request: ✅             # 改请求阶段（参数/Header/Body）
Response: ✅            # 改响应阶段（状态码/Header/Body）

Breakpoint debugging process

After a request that meets the rules is initiated, Charles will automatically pop up the "Breakpoints" window:

  1. Edit Request: Modify the content you want to change (such as changinguserId=1Change touserId=999Test the administrator rights and change the headertokenDelete the test without logging in) → Click "Execute" after changing
  2. Edit Response: After the service returns the original response, modify the content you want to change (for example, change the status code to500To test the situation when the backend hangs, change theuserNameChange to "Test abnormal values") → Click "Execute" after changing, the modified content will be returned to the client

3.3 Mapping settings: One-click switching between online/test environment

Mapping settings can completely and transparently forward online requests to the local, test environment, or even another online interface - there is no need to change the interface address in the front-end code or repackage the app, which is very efficient.

Map Remote (remote address mapping)

The most commonly used mapping method, such as putting onlinehttps://api.example.com/v1/userMap to local development serviceshttp://192.168.1.100:3000/dev/user：

👉 Path:Tools → Map Remote→ Check "Enable Map Remote" → Click "Add"

# Map Remote 规则示例
# 【Source】原始线上请求
Protocol: HTTPS
Host: api.example.com
Port: 443
Path: /v1/user
Query: *

# 【Destination】映射后的目标请求
Protocol: HTTP
Host: 192.168.1.100
Port: 3000
Path: /dev/user
Query: *  # 可选「Remove」去掉原始参数，或「Append」追加新的

Map Local (local file mapping)

Suitable for testing fixed exception response scenarios (such as the interface returning an empty array, returning an extremely long string, and returning an error status code):

👉 Path:Tools → Map Local→ Check "Enable Map Local" → Click "Add"

The configuration is almost the same as Map Remote, except that "Destination" does not need to fill in the remote address, just select the local JSON/HTML/TXT file.

Summarize

The configuration of Charles seems to have several steps, but they are all about "configure once, use for a long time" - spend 10 minutes today to set up the port, SSL certificate, filtering/mapping rules, and you can quickly locate and solve network problems in the future.

If you have more advanced needs (such as WebSocket packet capture, current limit simulation, request resend batch testing), you can explore it later, but the content of this article is enough to handle 90% of daily development and testing scenarios!