鼠年全马铁人挑战 WEEK 36：封包测试工具 - Charles (一)

Photo on charlesproxy.com

前言

Charles 是在电脑上运行的 Web Proxy (HTTP Proxy / HTTP Monitor)
将 Web 浏览器（或 Internet application）配置为通过 Charles 访问 Internet
然後 Charles 可以透过记录和显示所有发送和接收的数据

在 Web 和 Internet 开发中无法得知 Client 端与 Server 间发送和接收的内容
但是透过 Charles 的设定就可以轻松查看发生的情况
让调试变得快速且可靠从而节省时间

补充说明：
Charles 是一个收费的软件，虽然可以免费试用，但是每次启动都需要等待 10 秒钟，并且每次使用时间不能超过 30 分钟。因此如果需要长时间进行封包调适时，会因为 Charles 强制关闭而遇到影响。

分享重点

安装 Charles
选项栏中的 Proxy 功能介绍
- Recording Settings
- SSL Proxying Settings
- Throttle Settings
- Breakpoint Settings
- Reverse Proxies Settings
- Port Forwarding Settings
- macOS Proxy
- Proxy Settings
- Access Control Settings
- External Proxy Settings
- Web Interface Settings

安装 Charles

前往 Charles 的官方网站进行安装
Download a Free Trial of Charles • Charles Web Debugging Proxy

可以依照自己的作业系统进行安装
以下内容将使用 MacOS  做操作分享

下载完成後点选档案将其解压缩
就完成安装罗～ ٩ʕ•͡×•ʔ۶

开启 Charles

安装完 Charles 後就可以来看看 Charles 的 GUI 介面了

介绍 Charles

Charles 选项栏中提供相当多的功能
File, Edit, View, Proxy, Tools, Window, Help
而其中又以 Proxy 与 Tools 内容的功能较为常用
以下将进一步分享 Proxy 中所提供的功能

选项栏 - Proxy

Start/Stop Recording
开始/停止捕获请求
Start/Stop SSL Proxying
开始/停止 SSL 代理
Start/Stop Throttling
开始/停止网速节流
Enable/Disable Breakpoints
开启/关闭断点
Recording Settings
进一步设定捕获请求的内容
此设定的内容将在 Start Recording 时被执行
可以透过 Import/Export 来汇入汇出设定内容
而其中设定的内容分成了三个
- Options：
  
  Recording size limits：
  可以设定捕获请求的最大限制
  当捕获请求超过限制 Charles 将会通知并停止录制
  Limit recording history：
  可以设定历史捕获请求的最大限制
  当历史捕获请求超过限制 Charles 将会自行清除旧的捕获请求
  Limit WebSocket transaction history：
  可以设定历史 WebSocket 的最大限制
  当历史 WebSocket 超过限制 Charles 将会自行清除旧的捕获请求
- Include： 只有与设定的位址匹配的请求才会被录制
- Exclude： 只有与设定的位址匹配的请求将不会被录制
SSL Proxying Settings
进一步设定 SSL 代理的内容
此设定的内容将在 Start Proxying Settings 时被执行
Charles 将会显示 SSL 请求和回传的纯文本内容
可以透过 Include/Exclude 设定匹配的位址
也可以直接在想要启用 SSL 代理的请求点击右键选择 Enable SSL Proxying
Throttle Settings
进一步设定网速节流的内容换句话说就是模拟网速
此设定的内容将在 Start Throttle Settings 时被执行
可以透过 Import/Export 来汇入汇出设定内容
"Only for selected hosts" 可以只想模拟指定网站的网速
- Throttle Preset：选择网络类型
- Bandwidth：频宽，单位是 kbps
- Utilisation：使用率(利用率)百分比
- Round-trip latency：往返延迟时间，单位是 ms
- MTU：最大传输单位
- Reliability：可靠率，测试丢包情况
- Stability：稳定率，测试网络抖动情况
- Unstable quality range：不稳定质量范围百分比，针对上一个内容进行设定
Breakpoint Settings
进一步设定断点的内容
此设定的内容将在 Enable Breakpoints 时被执行
可以透过 Import/Export 来汇入汇出设定内容

也可以透过 Add 填入需要监控的资讯，就可以达到设置断点的目的了
设定断点後可以用来观察或修改请求/返回的内容
也可以直接在想要设定断点的请求点击右键选择 Breakpoints 来设定断点
Reverse Proxies Settings
进一步设定反向代理的内容
可以透过 Import/Export 来汇入汇出设定内容

也可以透过 Add 填入新增反向代理的资讯

反向代理是在 Local 端上创建 Web server
该 server 透明的将请求代理到远程 Web server
反向代理上请求和回传内容都可以被记录在 Charles
如果 Client 端应用程序不支援使用 HTTP 代理或不想配置为使用代理
那就可以透过反向代理将 Client 应用程序连接到 Local 端
Port Forwarding Settings
进一步设定端口转发的内容
可以透过 Import/Export 来汇入汇出设定内容

也可以透过 Add 填入新增端口转发的资讯

可以将任何 TCP/IP 或 UDP 设为端口转发工具从 Charles 转发到远程主机
在 Macromedia Flash 中调试 XMLSocket 连接时，这特别有用
还可以将 Charles 当作 SOCKS 代理，因此无需设置端口转发
macOS Proxy
开启/关闭记录电脑上的所有请求
如果想要抓取电脑请求，勾选 macOS Proxy 选项即可
如果只要抓取手机请求，则取消勾选 macOS Proxy 选项
Proxy Settings
进一步设定代理的内容

代理端口预设为 8888 (可以编辑)
勾选 "Use a dynamic port" 可以开启使用动态连接端口
勾选 "Enable transparent HTTP proxying" 就可以在 Charles 上开启代理
Access Control Settings
进一步设定访问控制的内容
可以透过 Import/Export 来汇入汇出设定内容

访问控制列表列出可以使用此 Charles instance
通常是在自己的电脑上运行 Charles 因此 local 始终包含在访问控制列表中
也可以透过 Add 填入允许访问的 IP 来新增 IP 访问 Charles 的权限
External Proxy Settings
进一步设定外部代理的内容
可以透过 Import/Export 来汇入汇出设定内容

如果网路上有个代理服务器必须使用该代理服务器才能访问 Internet
此时就可以将 Charles 配置为在尝试访问 Internet 时使用现有代理

可以配置单独的代理地址和端口：
- Web Proxy (HTTP)
- Secure Web Proxy (HTTPS)
- SOCKS Proxy
Web Interface Settings
进一步设定 Web 介面的内容
可以透过 Import/Export 来汇入汇出设定内容

勾选 "Enable the web interface" 来启用 Web 介面
并透过 http://control.charles 来访问 Web 介面
Web 介面可以用来控制 Charles 也可以作为 Web 服务使用外部程序
透过 Web 介面也可以近一步达成自动化 Charles (像是 Selenium)