一切不以解决问题为目的的小技巧都是耍流氓。

待解决的问题

当你测试一款APP时，发现点击页面上某个按钮没有任何反应，该怎么排查这个问题，如何判断是前端还是后端的问题？

我相信这个问题，大多数测试从业者在工作中都会遇到，也是面试题的高频考点，今天的小技巧就是用来解决这个问题。

解决问题的思路

1. 点击按钮后，查看前端是否发出了请求
2. 如果前端没有发出请求，则问题出在前端
3. 如果前端发出了请求，则查看后端是否正常返回了响应
4. 如果后端接口报错，没有返回响应，则问题出在后端
5. 如果后端接口返回了响应，此时需要分析具体的接口响应字段对接。可能是前端的问题，例如，后端返回了正确的字段但是前端解析出错，也可能是后端的问题，例如，后端返回的响应中某个字段缺失导致前端解析出错。

看完上面的解决思路，大家肯定有几个疑问：

1. 怎么查看前端是否发出了请求？
2. 怎么查看后端返回的响应？
3. 如果是前端问题，要怎么排查？
4. 如果是后端问题，要怎么排查？

解决问题的方法

今天提供的小技巧，就是用来解决上面的第一个和第二个问题，第三个和第四个问题，会在后面的小技巧中给大家介绍，敬请期待～

接下来请出我们今天的主角——抓包工具，市面上的抓包工具千千万，今天主要用到的是Charles。

第一步 打开Charles端口监听

• 打开Charles，点击工具栏 Proxy -> Proxy Settings查看监听端口，默认是8888

• 查看电脑IP地址，打开命令行窗口，Windows系统输入 ipconfig命令，Mac系统输入ifconfig命令查看

第二步 手机连接Charles

• 将手机和电脑连接到同一个WI-FI，处于相同的网络环境下。然后根据不同的手机型号找到WI-FI设置页面，例如iPhon12，点击设置-无线局域网，选择连接的WI-FI，找到HTTP代理配置项

• 配置代理：在「服务器」栏输入上面查询到的电脑IP地址，在「端口」栏输入Charles的监听端口，点击「存储」进行保存

• 配置完成后，在Charles就会弹出确认弹窗，点击「Allow」运行，就会发现Charles可以抓到从APP发出的请求了。

第三步 手机安装Charles证书，抓取https请求

• 开始抓包之后，如果你要抓包的APP使用的是https请求，你会发现无法解析请求内容，此时需要设置Charles开启https监听。点击工具栏 Proxy -> SSL Proxying Settings。

• 勾选 Enable SSL Proxying选项，Include中可以添加需要开启https监听的地址，图中 * 表示监听所有请求；Exclude中可以添加需要开启https监听的地址。配置之后点击「OK」按钮保存。

• 手机端安装Charles证书。在手机自带的浏览器（不要使用第三方浏览器）输入网址 chls.pro/ssl，按照说明下载证书。下载成功后需安装证书，这里以iPhone 12为例，其他的机型可自行百度。点击设置-已下载的描述文件，找到刚下载的Charles文件进行安装。

• 安装成功后，再进入 设置-通用-关于本机-证书信任设置中，对刚安装的Charles证书勾选信任。

  

• 接下来就可以愉快地抓包啦～

写在最后

看完不思考的喵不是一只成熟的测试喵～

本期遗留问题如下，大家可以思考一下，欢迎在评论区留言～：

• 什么叫同一网络环境下？为什么手机和电脑要处于同一网络环境下，电脑上Charles才能抓包？
• 如果发现是前端的问题，作为测试人员用什么方法排查？
• 如果发现是后端的问题，作为测试人员用什么方法排查？
• 按照教程一步步操作下来，结果为什么还是无法抓包？尤其是Android手机