在实际的前端开发中，后台的接口的开发往往是滞后于前端界面的开发的，在UI界面搭建完成后，由于后台接口还没开发完，此时无法编写业务的逻辑交互代码，实际开发中常常利用假数据来代替后台接口返回的数据进行模拟开发，例如将包含假数据的JSON文件放入项目中使用，或在代码中引入包含假数据JSON字符串，这样可以很快的模拟接口返回的数据，但是这样的方式存在以下弊端：

• 引入了测试代码或者JSON格式的测试数据文件，在代码提交时需要频繁考虑是否提交。
• 无法进行完整的单元测试。
• 无法模拟网络延迟等业务交互逻辑。

针对以上问题，本文介绍利用Charles青花瓷抓包工具配合Wiremock来进行接口的调试，使用起来非常方便，且能进行完整的单元测试。

Charles青花瓷

Charles是使用较为广泛的一款抓包软件，在iOS开发中利用Charles来进行接口调试是非常方便的，支持请求参数的修改，返回数据的修改以及请求延迟时间等常用功能。

抓包原理

Charles实质是一个代理软件，在Mac上安装好Charles后，需要在iPhone上安装Charles的自签名的证书才能抓包Https协议的数据。

查看Mac的IP地址

点击Help ▸ Local IP Address其中en0的为Mac的IP地址。

设置iPhone的代理

配置iPhone的Wi-Fi的HTTP代理为手动，服务器地址为Mac的IP地址，端口号为8888（Charles的默认端口为8888）。

iPhone配置CA证书

当抓包Https协议的数据，因Charles采用的是代理，需要安装CA证书才可抓包解析Https协议的数据。

iPhone按照上面设置好了代理后，在Safari中输入chls.pro/ssl，然后进入设置 ▸ 通用 ▸ 描述文件 进行安装。

安装完证书后，需要在设置▸ 通用▸ 关于本机▸ 证书信任设置 里打开证书信任。

最后，在Mac上的Charles上选择Proxy ▸ SSL Proxying Settings勾上Enable SSL Proxying，并设置需要进行SSL代理的URL地址，这里可以设置通配符代理所有地址。

Charles常用操作

• Focusing on a Host

Charles抓包后会显示每一个请求，有时候想要筛选某一个域名下的所有请求，可以在右键该请求选择Foucs后，Charles会将其他的请求折叠在一起，这样方便我们聚焦某个请求。

• Using Breakpoints

利用Charles的断点，可以修改请求参数以及Response数据，方便调试接口，在Sequence界面下，选择某个请求右键选择Breakpoint即可，然后选择Proxy ▸ Breakpoint Settings双击刚刚添加的Breakpoint将Query清空，这样可忽略请求参数，对符合条件的请求打上断点。当再次请求时Charles会卡在断点，点击Edit Request可以修改请求参数，修改完毕后点击Execute会发送请求后在响应返回时继续进入断点，此时可修改响应数据，再次点击Execute会过掉整个断点。

• Map Local/Remote

在实际开发中，后台接口往往是滞后于前端开发的，采用Charles的Map可以将请求的响应映射到本地的JSON文件，当然也可以映射到远端另外的一个接口。

Map Local：

右键请求选择Map Local然后点击Choose选择本地包含响应数据的JSON格式文件，随后此请求的响应数据会用本地的JSON格式文件代替。

Map Remote:

和Map Local类似，右键请求选择Map Remote填写需要映射的地址即可，这样原本的Response会被映射后的远端地址的响应所代替。

• Filtering Requests with Allow and Block Lists

实际开发中过程中接口有时候会返回错误或者链接丢失，采用Charles可以模拟此种情况，右键请求选择Block List即可，在Tools ▸ Allow List or Tools ▸ Block Lis可以查看所有设置过的请求。

• Rewrite

利用Charles的Rewrite功能可以将符合条件的请求与响应按照一定的规则进行替换，首先通过Tools ▸ Rewrite勾上Enable Rewrite打开此功能，点击左侧的Add进行添加，下面设置了一个名为People的Rewrite。

点击右上角的Add按钮设置Edit Location，主要设置哪些URL需要利用Rule进行Rewrite。

在点击右下角的Add按钮添加Rule规则，在Type栏选择首要规则，例如选择Path路径，对值为people的路径参数替换为planets，这样请求https://swapi.dev/api/people/时会被改变为请求https://swapi.dev/api/planets/。
image.png

• Repeating Requests

可以直接利用Charles重复相同的请求，点击工具栏上的Repeat selected requests即可。

当然有时候需要对后台的接口做压力测试，这时可以选择Tools ▸ Advanced Repeat设置迭代次数以及并发数。

• Simulating Slow Networking

实际开发中还需要模拟网速很慢甚至超时的情况，选择Proxy ▸ Throttle Settings设置相关参数即可，包括网速，延迟时间等等。

Wiremock介绍

这个框架可以将远端接口的返回映射为本地JSON文件（当然Charles也可以实现），当然开发中使用Wiremock最多的是用来进行单元测试，在单元测试时为了测试网络请求，由于实际开发往往封装了网络请求类，这样利用网络请求类配合Wiremock可以非常方便的进行单元测试，具体使用可以参见WireMock官网 http://wiremock.org。

下载以及安装

保证Mac拥有至少Java 7的环境，下载地址为http://wiremock.org/docs/running-standalone/，下载好后用终端cd到WireMock目录下执行java -jar wiremock.jar --port 9999 --verbose命令启动wiremock，启动后在浏览器中输入http://localhost:9999/__admin/mappings网址，出现以下代表启动成功，此时会生成__files和mappings二个文件夹。

{
  "mappings" : [ ],
  "meta" : {
    "total" : 0
  }
}

• __files文件夹包含需要映射的本地JSON文件，例如如下：

{
    "body": [
        {
            "addrCode": "110000",
            "addrName": "北京市"
         }
                ]
}      

• mappings文件夹包含相关请求信，例如如下所示：

{
  "request": {
      "method": "GET",
      "url": "/swapi.dev/api/city"
  },
  "response": {
      "status": 200,
      "headers": {
      "Content-Type": "application/json; charset=utf-8"
     },
      "bodyFileName": "character-list.json"
  }
}

设置完毕后，在浏览器中输入http://localhost:9999/swapi.dev/api/city会返回__files中的JSON文件内容，这样成功的将远端的URL的响应映射到了本地的JSON文件，配合Xcode的Launch Argument 可以很方便的分开控制主项目与单元测试的URL是否进行映射。

总结：

利用Charles青花瓷可以很方便的在开发中进行接口的调试，减少了在代码中引入假数据的步骤，同时可以模拟网络延时，压力测试，请求失败等多种情况，同时可以将返回映射为本地JSON文件；Wiremock框架则可以将远端返回映射为本地JSON文件，是桌面端的映射，非常适合进行单元测试中的接口调试。