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 SettingsSSL Proxying SettingsThrottle SettingsBreakpoint SettingsReverse Proxies SettingsPort Forwarding SettingsmacOS ProxyProxy SettingsAccess Control SettingsExternal Proxy SettingsWeb 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：频宽，单位是 kbpsUtilisation：使用率(利用率)百分比Round-trip latency：往返延迟时间，单位是 msMTU：最大传输单位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)

---

结尾

以上是这週的 Charles 内容
主要分享了安装与选项栏中的 Proxy 功能
下週主要会以选项栏中的 Tools 功能做分享

因为小弟也是新手使用的分享文
所以介绍的内容可能有遗漏或是错误，还请各位大哥大姐提点
小弟将继续往下週迈进。 ─=≡Σ((( つ•̀ω•́)つ

---

参考文献

官方网站 (载点)

Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy

相关文章

Charles弱网设置 - IT阅读