学妹：新手小白如何进行网络抓包？

抓包技术，在软件开发和测试过程中，都是一项特别重要的技能。

我在往期的视频和文章里，也都反复提到过抓包技术，通过抓包，我们可以排查70%以上的问题。

抓包的原理

大家可以先看上面这一部分，上边的是我们的APP的截图，大家可以先思考一下这上边的数据是怎么来的。

接下来谜底揭晓，这些数据都是通过客户端（或者说APP）发起一个HTTP请求，服务端接收到HTTP请求之后，经过数据库查询以及各种业务逻辑判断，然后把数据封装成一个Json格式的数据，丢给APP，APP拿到数据之后，进行数据渲染，才能展现出大家看到的精美界面。

但是还有一个问题，这个跟抓包有什么关系么？

大家可以仔细再看看这个图（Charles抓包数据），不抓包的话，我们怎么看到后端给前端返回的数据呢？

接下来，给大家看看Charles作为抓包工具，是如何去工作的。

上面的图描述起来比较复杂，我尽量精简着说，

首先，APP连接一个代理，这个代理就是Charles这个中间人，站在APP和服务器之间，以前APP和服务器可以看作是直接交互的，但是现在多了一个传话筒。

APP发起请求之后，先走到Charles这边，Charles可以知晓APP的请求内容，然后再传给服务端。

服务端接收到请求之后，再把请求进行处理，然后发出响应。

响应也是先经过Charles，Charles拿到响应之后，再返回给APP。

由于Charles站在中间，就可以拿到http请求和响应的数据，抓包的精髓就在这里，数据变得透明了。

大家有没有注意到，Charles为什么我标了绿色，不是臻叔喜欢绿色，而是这个是及其富有内涵的。假如说把APP和Server比作一对恋人，有一天突然插进来一个Charles，APP发出一条微信给服务器，让Charles捕捉到了，Charles继续和Server进行火热的聊天，并且再伪装成Server的样子，给APP发出一条爱味的短信，APP自己被绿了都是不知道的。

所以说，抓包是有利也有弊，大大方便了开发者和测试的同时，也无形之中，把风险暴露出来了。

抓包的工具都有哪些？

抓包实战

接下来，我给大家带来一段保姆级的表演，教大家如何去使用Charles进行抓包，这是官网：

官网下载：
https://www.charlesproxy.com/
大家可以自行访问去下载软件。
安装是傻瓜式的，直接下一步就行。
激活的话，直接在 Help -> Register… ，因为臻叔是激活过了，所以就没法演示如何激活了，但大家按要求去填写 Registered Name 和 License Key 即可，也不是什么难事。
Registered Name:
https://zhile.io
License Key: 48891cf209c6d32bf4

然后大家可以打开Charles，Charles主要分为以下几个区域
最顶部是菜单栏。
窗口部分是Charles软件的主体部分。

左边的区域，是请求的接口树；
左下角的区域，是筛选接口的区域；
顶部是工具栏，从左到右，分别是清空抓包记录、抓包启动、模拟网速、断点等操作；
右上角区域是请求的部分，我们可以看到请求Header、Cookies、请求参数等信息；
右下角区域是响应的部分，我们可以看到响应Header、Json数据等；

接下来我们对Charles进行一些简单的设置：

1、代理设置，可以设置代理的端口，选择顶部菜单栏的Proxy、然后选择Proxy Settings，再设置HTTP Proxy，代理端口默认是8888，也就是手机连代理时需要连接到8888端口。这个也可以不用改，除非你的8888端口已经被占用了，需要换一个的情况。

到这步，一般来说已经可以手机连代理抓包了。但是需要注意，这步之后，只能抓HTTP的请求，HTTPS的请求，抓不到。

2、设置SSL代理
所以，我们需要设置SSL代理，不设置的话，不能对HTTPS的数据包进行抓取。
图中第四点的地方，配置成 : 或者 *:443 都可以。

手机端的HTTPS证书安装我们后面再说。

3、手机HTTPS连接代理
3.1 首先查看Charles代理IP和端口号

3.2 手机连接代理（iOS为例）

别忘了，如果要抓包HTTPS的请求的话，你还需要安装charles证书。
下面演示一下具体的步骤：
首先需要先连上代理，然后在charles上看证书的下载地址。

然后安装证书、验证证书和信任证书。
手机浏览器打开：
chls.pro/ssl

OPPO、VIVO手机，可能需要改证书的后缀 cer、pem、cert

安装证书（以iOS手机为例）：

信任证书：

然后，我们就可以愉快的抓包了。

我们还是拿京东APP来作为例子，

我们在手机上操作，搜索一个牛奶，我们就会看到左侧有接口刷新出来了。然后右上角是请求的数据，右下角是响应的数据。

可以看到，手机界面上的牛奶，和搜索接口返回的这个字段，列表页渲染的商品名称等数据，数据来源都是从服务端传过来的。

当前展示的是全部的json数据，我们还可以把响应的数据变成树形结构，方面我们查看。

Charles还有其他高阶的功能，比如说：篡改请求、篡改响应、模拟弱网访问的情况。这里就不在一一展示了。感兴趣的话，大家可以自己再研究研究。

如果这篇文章对你有帮助，请给我点个赞！👍这样我才有动力继续更新下去！

最后我整理了一些资料，对于软件测试的的朋友来说应该是最全面最完整的备战仓库，为了更好地整理每个模块，我也参考了很多网上的优质博文和项目，力求不漏掉每一个知识点，很多朋友靠着这些内容进行复习，拿到了BATJ等大厂的offer，这个仓库也已经帮助了很多的软件测试的学习者，希望也能帮助到你。有需要的小伙伴可以关注我！

精彩推荐

在职阿里6年，一个29岁女软件测试工程师的心声

腾讯软件测试岗二面：web 测试问题被虐哭了，直到学长给了我这些知识点…

10年测试工程师 ——告诫大家要有自己的人生规划，选择远比努力更重要！