开发和调试

一、Charles 工作原理二、搭建基础代理环境（Web 端与 App 端）1、Web 端2、App 端三、接口过滤、拦截和修改1、接口过滤1.1 直接过滤1.2 通过 Recording Setting 设置2、动态修改请求数据四、远程映射五、慢网络模拟六、应用常见问题在日常手工测试过程中，特别是 Web 端测试或者 App 端测试中。我们除了通过页面操作验证功能是否正确外，还需要验证接口的返回是否正确。有时候为了测试某些特殊的测试场景，还不得不去更改服务端的返回值，这部分操作就必须用到测试工具因此抓包可以对发现的功能问题进行简单的归因判断，就变得比较重要。Charles 正是我们常用的一个网络抓包工具

一、Charles 工作原理Charles 工作原理示意图如下：由图可见，任何通过 App 端（当然也报告 Web 端）发送给后端的请求，都将被 Charles 截获并转发给后端。同样，任何的后端返回值，也会经由 Charles 转发给客户端，这里的客户端即包括 App 端也包括 Web 端

由此可见，Charles 的工作原理类似于中间人代理，即任何客户端和服务端的通信都会经过 Charles，于是 Charles 便可以拦截来自客户端和服务端的任何请求，并进行修改

二、搭建基础代理环境（Web 端与 App 端）Charles 在使用前必须进行安装和配置，不同端的配置各有不同。我以 Mac 系统为例，大致说下注意事项

1、Web 端安装好 Charles 后，首先去安装根证书。根证书的位置在 Help—> SSL Proxying —> Install Charles Root Certificate证书安装后，点击 Charles 的菜单， 选择 Proxy—>macOS Proxy此时，当你在浏览器里访问一个网页的时候，就可以在 Charles 里看到网络请求了

当前绝大多数的软件都是 HTTPS 访问了，如果想抓包 HTTPS 的请求，则需要通过 Charles 的菜单Proxy—>SSL Proxying Settings 来进行设置勾选 Enable SSL Proxying 并在 Include 中点击 Add其中 Host 填*，Port 填写 443，这样就可以抓取 https 的请求了

2、App 端App 端使用 Charles 需要多几步操作首先到菜单 Proxy—>Proxy Settings 进行以下设置：填入代理端口 8888（也可以自定义填其他端口），并且勾上 Support HTTP/2 和 Enable transparent HTTP proxying接着确定安装 Charles 电脑的 ip 地址（手机和电脑需要连同一个 WIFI）

通过点击 Charles 的菜单help–>SSL Proxying–> Install Charles Root Ceriticate On a Mobile Device or Remote Browser：，然后切换到手机端，根据以下图片进行操作，具体步骤为：在 App 端，通过浏览器访问网页：chls.pro/ssl，并下载安装证书在 App 端，设置网络代理的值跟图中一致，这样就可以开始抓包了需要注意的是，有些设备特别是 Android 设备无法直接安装下载的证书，需要进入到设置->安全->凭据存储 ->从存储设备安装证书

三、接口过滤、拦截和修改按照上一节配置好后，即可在 Charles 面板中看到所有的网络请求

1、接口过滤因为所有的网络请求都会被抓取，那么信息太多也会造成干扰，所以可以过滤接口的请求。过滤接口的请求方式有 2 种

1.1 直接过滤直接过滤很简单，直接在 Charles 的 Filter 这栏中填写你要过滤的关键字即可

1.2 通过 Recording Setting 设置首先，通过 Charles 菜单选择 Proxy—>Recording Settings接着在弹出的对话框中，选择 Include， 然后点击 Add 按钮，并按照你的需求设置 Filter

2、动态修改请求数据当发送给服务端的数据需要进行修改时，最简单的方式就是找到这个请求，然后鼠标右键，并选择 Breakpoints这样，当你这请求再次被触发时，它就会被拦截此时，点击 EditRequest，你将会看到这个请求的所有参数，同时你可以直接进行更改后点击 Execute 让它执行点击 Execute 后，请求就会被发送。这时，你还可以对服务端返回给你的数据进行修改。点击 Edit Response，选择 JSON Text 标签，即可对请求的各项返回进行更改

如下所示，更改完毕后点击 Execute，服务端返回的内容，就变成你更改后的内容了除了一个接口、一个接口的打断点之外，还可以自定义 BreakPoint Settings， 方法如下：菜单栏选择 Proxy—>BreakPoint Settings

然后在 Breaking Setting 中，勾选“Enable BreakPoints”，然后点击 Add 按钮，添加对某个请求的断点设置如下：如此，即可可以根据需求，自己定义要抓取的请求地址

四、远程映射通过 Breakpoint 的方式进行修改请求数据虽然有效，但是修改请求这个操作需要人工干预，需要花费时间。那么就不需要先请求再更改数据，可以准备好返回数据直接进行模拟，类似 Mock方式为点击 Tools —> Map Local，然后在弹出的对话框中，勾选“Enable Map Local”，接着设置你要覆盖的请求

注意：Map From 是你的原始请求。Map To 是你期望的结果，这个结果你可以放在本地文件中，以 Text 或者 Json 的格式保持都可以。当你使用 Map Local 后，当有目标请求发生时，Charles 直接将你提供的文件内容当做返回值返回

五、慢网络模拟模拟各自不同网络速度的情况也比较常见，Charles 可以轻松做到慢网络模拟从菜单 Porxy—》Throttle Settings 进入，先通过 Add 添加你要进行网络速度限制的站点，然后勾选“Enable Throttling”，选择“Throttle preset”，这个时候你会看到不同的网络速度情况，可以根据需要选择，即可完成网络速度限制

六、应用常见问题【Question 1 】问：配置好 Charles 后，浏览网页提示“您的连接不是私密连接”答：打开 SSL Proxying Setting，在弹出的对话框中，做如下操作。

勾选 Enable SSL Proxying点击 ADD 按钮，编辑如下

Host 填*，Port 填写 443，这样就可以抓取 https 的请求了

【Question 2 】问：Charles 关闭，电脑端就无法上网了，为什么？答：查看电脑的网络设置->高级设置->代理，检查并取消选中 HTTP 和 HTTPS 代理选项。

【Question 3 】问： iOS 上证书安装了，但是无法抓包，为什么？答： 两个检查

检查是否信任该证书。 在手机设置->通用->关于本机->证书信任设置中信任。通用->描述文件与设备管理，选中安装的配置文件，并验证。

【Question 4 】问：App 端开启代理，为什么 Charles 没有出现“允许”提示？答： App 端和电脑端必须连接同一个网络。

【Question 5 】问：某些安卓机型证书下载后无法直接安装。答：通常见于安卓机，例如小米手机。证书下载后，从“更多设置->系统安全->从存储设备安装”这个路径进行安装。