在前端开发过程中我们常常要用到代理工具来处理一些诸如改变请求参数，代理请求地址，以及抓包的问题。目前最流行的代理工具有两种 Fiddler & Charles。Fiddler是免费的，一直以来只提供了Windows版本，2016年10月之后也提供了Mac OSX版本，不过需要安装跨平台方案Mono。Charles是付费的，20$/license，不过Charles是java swing编写的，网上可以找到很多破解的方案，这里不再赘述。Charles的好处在于功能齐全，界面简单，提供了几乎所有可以用到的代理功能，在MacOS下十分好用，2018年3月之后甚至提供了IOS的版本。下面主要来讲一下Charles的使用。
Charles是什么
Charles是一个提供了HTTP代理/HTTP监控/反向代理的工具，通过这个工具，开发者可以查看本机与网络之间的所有HTTP以及SSL/HTTPS通信，包括请求与返回以及HTTP头部信息（包含cookie和缓存信息）。
Charles主要功能
Charles主要功能如下：
- 记录了本机与网络之间的所有通信流量
- 展示了所有的请求，返回数据，cookie和头部信息的内容
- 支持SSL和HTTPS
- 模拟慢网速环境
- 下载静态资源
- 请求高度可配置
Charles 安装
点击这里可以跳转到下载页面。
截止北京时间2018年9月27日16:09 最新的版本为4.2.7
Charles提供了以下版本
Windows
Windows 64 bit (msi, 64.7 MB)
Windows 32 bit (msi, 63.9 MB)macOS
macOS (dmg, 58 MB) (兼容 macOS 10.7 - 10.13)
Linux
Linux 64 bit (tar.gz, 56.1 MB)
Linux 32 bit (tar.gz, 55.6 MB)
Firefox浏览器下还提供了一个add-on来支持Charles.
Charles配置
在Windows及 MacOS系统中，只要赋予权限Charles会自动将自己配置为代理服务器，不过还有一些比较通用的设置，以MacOS为例
- 打开 Charles > Preference > Startup ，关掉Start throttling，Check for updates。
- 点击 Proxy > Mac OS X Proxy 启用系统代理。
在IOS中需要自己在wifi配置中手动设置。配置步骤如下：
- 打开 设置 > Wifi ，找到自己连接的网络然后打开
- 滑动到 HTTP代理设置，选择 手动 ，输入运行Charles server的IP与端口号（通常是8888）。
Charles 用法
以Charles 3.9.1为例，Charles的常用功能如下：
查看请求内容（抓包）
首先点击 File > New 或者 菜单栏的New Session创建一个session，然后点击 Proxy > Start Recording 开始记录请求。 在浏览器中发送请求，就可以在Charles中查看请求的相关信息。Charles支持以结构化（Structure）或者序列（Sequence）的方式展示请求，结构化展示会把同地址端口的请求汇总，序列化则会按照请求顺序展示请求。
可以在Proxy > Recording Setting设置记录的相关信息
支持：
- 限制请求数量与大小
- 仅记录固定地址列表
- 记录时排除某些地址
记录的信息是存储在内存中的，所以如果不需要记录的请求最好能够过滤掉，记录的数据过多时Charles也会提醒并关闭记录。记录的数据可以通过 File > Export 导出，也可以通过 File > Save as 保存为Charles可识别的.chls文件。
代理请求
打开 Tools > Map Remote/Map Local > Enable Map Remote/Enable Map Local ，点击 Add 可以添加新的代理映射
代理的作用是将请求的地址转向一个新的网络地址/本地地址，有些情况下可以用到
- 在生产环境测试时发现了问题，可以将请求的资源映射到本地资源，然后通过修改本地的代码预览修改后的效果。
- 可以配置生产环境，测试环境，开发环境的地址，通过在 Map remote 中切换环境地址来切换环境而不用修改访问的地址。
- 某些已发布的客户端请求的地址时固定的，可以通过 Map remote 来修改请求的地址。
查看HTTPS
通常情况下HTTPS请求是加密并无法被查看的，但是通过替换正常证书为Charles颁发的证书可以做到查看HTTPS请求。
打开 Proxy > Proxy Settings > SSL > Enable SSL proxying ，点击Add添加地址，通常端口号为443(HTTPS的端口号)。
然后打开网址，以Chrome为例，需要点击 高级 > 允许 来访问地址，这时就可以在Charles中查看HTTPS请求内容。
通过将Charles证书添加到“受信任的证书”可以避免浏览器的不信任阻塞。
如何将Charles证书添加到“受信任的证书”的方法根据操作系统及浏览器的不同而不同。
Windows/IE
Help > SSL Proxying > Install Charles Root Certificate > Install Certificate
MacOS
Help > SSL Proxying > Install Charles Root Certificate 打开钥匙串，搜索 Charles Proxy，双击打开，然后将 信任 > 使用此证书时 下拉框选择为“始终信任”
根据官网文档，如上步骤操作就行了，实际上因为Charles certficate 采用的SHA1加密算法，仍旧会被Chrome提示不安全，Safari不再提示不安全
截流
打开 Proxy > Throttle Settings > Enable Throttling ，可以模仿弱网环境下的请求。
支持：
- 对指定host截流
- 限制上传下载带宽，利用率，往返延迟，最大传输单元（MTU）
其它
Charles还提供了其它的一些功能：
- 请求内容的结构化展示
- 请求的断点与内容修改/重写
- 反向代理，将请求向本机的资源转发到远端的 web server 上
- TCP/UDP 端口转发
- IP访问控制
- 外部 HTTP/HTTPS/SOCKS 代理服务器连接
- Charles web化管理
- SSL连接
- no cache连接，包括特定地址的 no cache 连接
- block cookie连接，包括特定地址的 block cookie 连接
- DNS欺骗
- 发布Gist
