栏目?:码农手记 ?
撰文✍?:极链科技 前端工程师
编辑?:@六六
关键词?: Charles网络封包截取工具 、 抓包Mock数据 、 json文件&数据
![82f5d5242f9f2f53b89eb8368d22f0cc.png](https://i-blog.csdnimg.cn/blog_migrate/b654a1feb688c92cf347413a443aae6b.png)
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端口以及移动设备证书安装访问地址。
![c8a052577c0bdeb8bff8bf29672defb8.png](https://i-blog.csdnimg.cn/blog_migrate/77374edcedb818bfbcf79caa5e200355.png)
设置移动设备网络代理模式,进入连接的无线网修改网络模式,勾选显示高级选项,代理选择手动模式,服务器主机名填写查询到的ip地址,服务器端口填写查询到的端口无设置默认为8888,点击保存。
![ad35da19ca5b86ce257a9c890b6a9fc1.png](https://i-blog.csdnimg.cn/blog_migrate/f073b97c9bb4958fa81598db0abda2ac.png)
连接后在Charles弹窗中点击Allow同意连接:
![dbdf5f16095142f9e7fafa242497af68.png](https://i-blog.csdnimg.cn/blog_migrate/67df95205a1873a64ab838b42f2c3ccc.png)
此时连接后抓取的HTTPS会显示为乱码,那是因为移动端证书还未安装完成。我们使用移动设备访问查询到的证书安装地址:chls.pro/ssl进行证书安装,安卓为例,下载证书文件后在无线网-WLAN设置中选择安装证书,找到下载的证书文件点击输入解锁密码完成安装。
![91d2edb4682861a2018f2cca44166924.png](https://i-blog.csdnimg.cn/blog_migrate/57f9e7e3a2303ceac5e7f4cc3201df6b.png)
进行抓包Mock数据
操作移动设备Chales会拦截移动设备https请求,找到我们需要的请求返回结果:
![82acece3b0d905149be5ecf0e6a1fc33.png](https://i-blog.csdnimg.cn/blog_migrate/b9f421d646f0c04d7e34f777ff1ccb26.png)
选中点击鼠标右键选择save Response导出保存该json文件到本地文件夹:
![fd8ac1852a330fab7c8ea5db6d44cedf.png](https://i-blog.csdnimg.cn/blog_migrate/2ace915dc1289ed5cb5f9586f771a73d.png)
文本打开保存的json文件会发现我们保存的json数据是成行混乱排列的,此时我们可以使用json格式化工具进行校验格式化修改我们想要变动的值,重新替换保存到原json文件中。
此时我们的本地代理数据已经准备完毕,在拉取接口获取的数据中,我们选中要修改的请求值,点击鼠标右键选择底部Map locale。
![8834638cd581b6240a0386f7149b5133.png](https://i-blog.csdnimg.cn/blog_migrate/4bb8fd4791627388fcf321db8ba62daf.png)
在Local path路径中选择我们保存到本地的json文件。
![b55c361e598a1d55075df008e21efbc5.png](https://i-blog.csdnimg.cn/blog_migrate/7d63802123c9b38f6d006764eafc5ed6.png)
点击OK保存。
此时我们已经完成了数据的修改,让我们来对比下修改前后的数据变化:
![c3fe315a088ec142d872812c238f2cc7.png](https://i-blog.csdnimg.cn/blog_migrate/8aab595e57dab28a5616656c4139d525.png)
当我们不需要代理数据时,在Tools-Map locale中进行管理:
![f4dc0c094450d08ab61e5a01a06347c2.png](https://i-blog.csdnimg.cn/blog_migrate/acd96f65211023a3a3111f9fe0e1815c.png)
取消勾选点击OK,即可取消数据moke,也可以选中数据点击Remove删除数据。当然Charles中moke数据的方法不止一种,还有很多其它妙用,为工作提供了便利。
?
极链科技Video++ 聚焦于AI消费的科技公司??点击「阅读原文」查看更多深度技术好文