Charles 使用手册速览-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_tom_168/article/details/148833582

Charles 使用手册速览

一、工具基础介绍

1.1 核心功能定位

Charles 是跨平台 HTTP 代理调试工具，提供以下核心能力：

全流量捕获：支持 HTTP/HTTPS/WebSocket/TCP 等协议
请求篡改：实时修改请求头、参数、Body 内容
响应模拟：构造自定义响应或映射本地文件
弱网模拟：配置延迟、带宽限制、丢包率
自动化测试：通过 Charles Script 编写测试逻辑
移动端调试：支持 iOS/Android 设备代理配置

1.2 工作原理架构

二、核心功能详解

2.1 实时捕获配置

代理设置：

PC 端：

# Chrome 代理配置
chrome://settings/search?q=proxy
设置 -> 高级 -> 系统 -> 打开代理设置

移动端：
- iOS：设置 -> WLAN -> 配置代理 -> 手动
- Android：设置 -> WLAN -> 修改网络 -> 高级选项

捕获过滤器：

# 语法：Protocol Host URL StatusCode
HTTP api.example.com /api/ 404

# 高级示例
(HTTP | HTTPS) && (Host: api.example.com || Host: admin.example.com)

2.2 请求篡改技术

手动修改：

在会话列表选择请求
点击 Edit 标签页
修改 Request Headers/Query/Body
点击 Execute 发送

自动修改规则：

// Charles Script 示例：自动添加认证头
if (request.url.host == "api.example.com") {
    request.setHeader("Authorization", "Bearer xxx");
}

批量修改：

// 批量修改 User-Agent
request.setHeader("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) ...");

2.3 响应模拟功能

Map Local：

右键请求 -> Map Local
选择本地文件（.json/.html 等）
支持动态变量：${request.url}

Map Remote：

// 规则配置
if (request.url.path == "/api/data") {
    response.body = '{"status":"mock","data": ...}';
}

Breakpoints：

右键请求 -> Breakpoints
设置触发条件（URL/Header/Body）
修改请求/响应后点击 Execute

2.4 性能分析工具

时间轴分析：

关键指标：
- DNS Resolve
- Connect
- SSL Handshake
- Send/Wait/Receive
优化建议：
- 并行请求数 > 6：需优化资源加载
- 首次字节时间 > 800ms：检查服务器响应

瀑布图优化：

gantt
    title 页面加载时序
    section 请求1
    DNS      :a1, 20ms
    TCP      :a2, after a1, 40ms
    SSL      :a3, after a2, 60ms
    Send     :a4, after a3, 20ms
    Receive  :a5, after a4, 100ms
    section 请求2
    DNS      :b1, 30ms
    TCP      :b2, after b1, 50ms
    ...

2.5 弱网模拟配置

自定义规则：

// 模拟 3G 网络（500ms 延迟，1.5Mbps 下行）
if (request.url.host == "api.example.com") {
    throttle.setBandwidth(1500000); // 1.5Mbps
    throttle.setLatency(500);       // 500ms
}

预设场景：

3G 慢速：延迟 300ms，带宽 768Kbps
LTE 良好：延迟 100ms，带宽 15Mbps
卫星连接：延迟 600ms，带宽 256Kbps

三、典型应用场景

3.1 API 调试实战

请求验证：

捕获 /api/login 请求
修改 password 参数为错误值
观察返回的 401 Unauthorized

Token 续期：

// 自动刷新过期 Token
if (request.url.path == "/api/refresh") {
    let oldToken = request.getHeader("Authorization");
    request.setHeader("Authorization", "Bearer " + refreshToken(oldToken));
}

3.2 性能优化案例

资源合并：

原始请求：12 个 JS 文件，总大小 1.2MB
优化后：合并为 3 个文件，总大小 800KB
效果：请求数减少 75%，加载时间缩短 40%

缓存策略：

# 优化前
Cache-Control: no-cache

# 优化后
Cache-Control: max-age=31536000, immutable

3.3 安全测试应用

SQL 注入检测：

' OR '1'='1' --

特征：参数包含特殊字符
防御建议：参数化查询 + WAF 规则

敏感信息泄露：

// 检测密码明文传输
if (request.url.path == "/login" && response.body.contains("password")) {
    alert("检测到密码明文传输！");
}

3.4 移动端调试

iOS 配置：

设置 -> WLAN -> 配置代理 -> 手动
服务器：PC 的 IP 地址
端口：8888
安装 Charles 根证书：chls.pro/ssl

Android 配置：

# 终端命令（需 ADB）
adb shell settings put global http_proxy 192.168.1.100:8888

四、高级功能集成

4.1 扩展插件生态

常用功能：

Rewrite：自动化规则引擎
Map Local：本地文件映射
Throttle：弱网模拟
Compose：手动构造请求

4.2 自动化测试框架

Charles Script 示例：

// 自动化测试用例
if (response.status == 404) {
    throw "检测到 404 错误！";
}

if (response.body.contains("error")) {
    throw "响应包含错误信息！";
}

持续集成：

# 命令行调用
charles --config=config.xml --script=test.js

4.3 性能调优工具链

与 Chrome DevTools 集成：

启动 Charles 代理
Chrome 访问 chrome://net-internals/#events
对比两者捕获的请求时序

与 JMeter 协同：

Charles 捕获请求
导出为 HAR 文件
使用 JMeter 插件转换 HAR 为测试计划

五、实战案例分析

5.1 HTTPS 解密

配置步骤：

Proxy -> SSL Proxying Settings
添加 * 主机和 443 端口
安装根证书：Help -> SSL Proxying -> Install Charles Root Certificate
信任证书：系统设置 -> 证书管理

验证：

# 解密后的请求头应包含
Connection: keep-alive
Upgrade-Insecure-Requests: 1

5.2 自动化测试脚本

场景：自动重试失败请求

// 规则配置
if (response.status >= 400 && response.status < 500) {
    let retryCount = request.getHeader("X-Retry-Count") || 0;
    if (retryCount < 3) {
        request.setHeader("X-Retry-Count", retryCount + 1);
        return proxy.sendRequest(request);
    }
}