ZhenYu's 知识库

外观

代理工具

约 956 字大约 3 分钟

代理抓包FiddlerCharles

2026-04-15

概述

代理工具用于拦截、查看、修改 HTTP/HTTPS 请求，是前端开发和调试的重要工具。

Fiddler

简介

Fiddler 是一个免费的 HTTP 抓包工具，支持 Windows 和 macOS。

基本配置

Tools → Options → Connections
├── Port: 8888
├── Allow remote computers to connect ✓
└── Act as system proxy on startup ✓

手机抓包配置

# 1. 电脑端 Fiddler 开启远程连接

# 2. 手机端设置代理
#    IP: 电脑IP地址
#    端口: 8888

# 3. iOS 安装证书
#    浏览器访问 http://IP:8888
#    点击 "FiddlerRoot certificate"
#    下载并安装证书

# 4. HTTPS 抓包
#    Tools → HTTPS → Decrypt HTTPS traffic ✓

过滤器

# 按域名过滤
# 左侧过滤器输入框
example.com

# 按路径过滤
example.com/api/*

# 按状态码过滤
statuscode:200

# 按方法过滤
method:POST

断点调试

┌─────────────────────────────────────┐
│ Before Requests                     │
│   请求发送前，可以修改请求内容         │
├─────────────────────────────────────┤
│ Before Responses                    │
│   响应返回前，可以修改响应内容         │
└─────────────────────────────────────┘
# 设置断点
# 快捷键 F11

# 修改请求
bp post /api/user

# 修改响应
bp Response 200

AutoResponder 自动响应

// 1. 勾选 "Enable rules"

# 2. 添加规则
#    URL: http://example.com/api/user
#    Action: 指向本地文件或自定义响应
#    D:\mock\user.json

Charles

简介

Charles 是一个跨平台的抓包工具，macOS 下更常用。

SSL 证书配置

# macOS 安装证书
# Help → SSL Proxying → Install Charles Root Certificate

# iOS 安装证书
# Help → SSL Proxying → Install Charles Root Certificate on Mobile Device
# 手机浏览器访问 chls.pro/ssl
# 下载并安装描述文件
# 设置 → 通用 → 关于本机 → 证书信任设置 → 开启 Charles 证书

映射本地文件

// 1. 右键请求 → Map Local

// 2. 配置
//    Map From:
//      Protocol: HTTPS
//      Host: api.example.com
//      Path: /user
//    Map To:
//      Local path: /Users/xxx/mock/user.json

// 3. 启用 SSL Proxying

弱网模拟

Proxy → Throttle Settings
├── Enable Throttling ✓
├── Throttle preset: Custom
└── Bandwidth:
    - Utilisation: 50%
    - Latency: 300 ms
    - Download: 100 KB/s
    - Upload: 50 KB/s

重写规则

// 1. Tools → Rewrite Settings

// 2. 添加规则
//    Location:
//      Host: api.example.com
//      Path: /user
//    Type:
//      Body: 修改内容
//      Header: 添加/修改请求头

Whistle

简介

Whistle 是基于 Node.js 的跨平台抓包工具，通过配置规则来操作 HTTP 请求。

安装

# 安装
npm install -g whistle

# 启动
w2 start

# 端口默认 8899

基础配置

# 1. 手机代理设置
#    IP: 电脑IP
#    端口: 8899

# 2. 访问 http://IP:8899/ 打开界面

# 3. 安装根证书
#    访问 http://IP:8899/cert/mobile

规则语法

// whistle 规则文件

// 本地文件映射
example.com/api/* http://127.0.0.1:3000/$1

// 本地 Mock
example.com/api/user statusCode://200 body://{name: 'test'}

// 请求延迟
example.com delay://2000

// 修改请求头
example.com api://{key: value}

// 日志过滤
^example.com@filter://status:200

常用命令

# 启动
w2 start

# 重启
w2 restart

# 停止
w2 stop

# 查看端口
w2 status

# 访问界面
open http://127.0.0.1:8899

代理工具对比

工具平台费用特点
FiddlerWindows优先免费功能全面，Windows首选
CharlesmacOS优先付费界面美观，macOS首选
Whistle跨平台免费轻量，命令行友好
ProxymanmacOS免费/付费现代界面
mitmproxy跨平台免费命令行，可编程

移动端配置

iOS

设置 → Wi-Fi → 点击已连接网络
├── HTTP 代理
│   ├── 服务器: 电脑IP
│   └── 端口: 8888
└── HTTPS 代理
    └── 需要安装证书

Android

设置 → WLAN → 长按已连接网络
├── 修改网络
├── 显示高级选项
└── 代理: 手动
    ├── 服务器: 电脑IP
    └── 端口: 8888

证书安装问题

系统解决方案
iOS 10+需要在设置中信任证书
Android 7+应用不再信任用户安装的证书（需要 root 或使用配置）
macOS钥匙串访问 → 系统 → 始终信任

最佳实践

  1. HTTPS 抓包: 开发环境关闭 SSL 验证更方便
  2. 过滤规则: 使用过滤器减少噪音
  3. 本地映射: 前后端并行开发时使用
  4. 弱网测试: 上线前务必测试弱网场景
  5. 安全意识: 公共网络谨慎使用代理