charles 抓包_码农手记 | Charles抓包Mock数据

栏目?：码农手记 ?

撰文✍?：极链科技 前端工程师

编辑?：@六六

关键词?： Charles网络封包截取工具 、 抓包Mock数据 、 json文件&数据 

✍️  码农手记  将会邀请 一直在幕后 用代码和算法改变世界的 技术大佬们 将会不定期推送他们 所写的在技术专业中的 技术经验/研究/论文 为你呈现 / 更前沿的技术思考 /  / 更专业的技术干货 / #码农手记# 第88期 文 | 极链科技Video++ 前端工程师

01

/ 前言   /

Charles 是在 Mac、Windows、Linux 下常用的网络封包截取工具，脱胎原Chrome浏览器插件的一款软件，它通过成为电脑或者浏览器的代理，然后截取请求和请求结果达到分析抓包的目的。

除了在做移动开发中调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。还有很多强大的功能如过滤网络请求、模拟慢速网络、修改服务器返回内容等，这次我们就来说下利用抓包进行moke修改服务器返回内容。

02

/ 步骤 /

   设置网络 

将移动设备和电脑设备连接到同一个WiFi下，在Charles-help-SSL Proxying-install Charles Root Certificate on a Mobile Device or Remote Browser中查看ip端口以及移动设备证书安装访问地址。

设置移动设备网络代理模式，进入连接的无线网修改网络模式，勾选显示高级选项，代理选择手动模式，服务器主机名填写查询到的ip地址，服务器端口填写查询到的端口无设置默认为8888，点击保存。

连接后在Charles弹窗中点击Allow同意连接：

此时连接后抓取的HTTPS会显示为乱码，那是因为移动端证书还未安装完成。我们使用移动设备访问查询到的证书安装地址：chls.pro/ssl进行证书安装，安卓为例，下载证书文件后在无线网-WLAN设置中选择安装证书，找到下载的证书文件点击输入解锁密码完成安装。

   进行抓包Mock数据 

操作移动设备Chales会拦截移动设备https请求，找到我们需要的请求返回结果：

选中点击鼠标右键选择save Response导出保存该json文件到本地文件夹：

文本打开保存的json文件会发现我们保存的json数据是成行混乱排列的，此时我们可以使用json格式化工具进行校验格式化修改我们想要变动的值，重新替换保存到原json文件中。

此时我们的本地代理数据已经准备完毕，在拉取接口获取的数据中，我们选中要修改的请求值，点击鼠标右键选择底部Map locale。

在Local path路径中选择我们保存到本地的json文件。

点击OK保存。

此时我们已经完成了数据的修改，让我们来对比下修改前后的数据变化：

当我们不需要代理数据时，在Tools-Map locale中进行管理：

取消勾选点击OK，即可取消数据moke，也可以选中数据点击Remove删除数据。当然Charles中moke数据的方法不止一种，还有很多其它妙用，为工作提供了便利。

?

 极链科技Video++   聚焦于AI消费的科技公司 

??点击「阅读原文」查看更多深度技术好文