使用Charles抓取Http/Https请求包

使用Charles抓取Http/Https请求包

 

 

一、前言

之前写项目的时候遇到很奇怪的问题,pc上调试后端的接口返回是正常的数据,放在真机(当时是ios手机)上就会少一些数据,浪费了很多时间,最后还是通过抓包找到问题。这里就分享给大家抓包教程,用的也是charles,之前有写过一篇使用charles实现本地数据mock,有兴趣的朋友可以看下。

 

二、抓取Http请求

  1. 获得电脑的ip地址(可以使用cmd的ipconfig或者 在charles中查看 :Help -> Local IP Address)

  2. Charles代理设置

    打开Charles的代理设置:Proxy->Proxy Settings,设置一下端口号,默认的是8889,这个只要不和其他程序的冲突即可,并且勾选Enable transparent HTTP proxying。

  3. 在手机设备、模拟器或者远程浏览器上设置代理,抓取手机设备上的请求包

    android:在手机wifi 上设置代理 -> 长按无线网络-->修改网络-->高级选项-->代理 手动-->手动输入输入IP、端口号

    服务器IP:PC机器的IP(通过步骤1获取的ip)

    端口号:8889(通过之前介绍的查看端口的方法)

    ios:如下图操作步骤

    存储后charles会弹出下面这个对话框,点击allow 

  4. 真机请求接口后charles就能抓取到请求。

 

三、抓取Https请求

抓取https数据需要在手机上安装证书,HTTPS的抓包需要在HTTP抓包基础上再进行设置

1.安装证书,步骤如下

用手机自带的浏览器输入chls.pro/ssl,下载并安装证书,拿苹果手机为例:

 

2.Charles设置Proxy代理

3.https请求就能抓取到了

 

总结:如果在开发中遇到pc端和真机请求数据返回不一致的情况,可以使用抓包查看问题哦

 

往期精彩回顾

React组件与生命周期

React函数组件和Class组件以及Hooks

适合中级前端的react面试题

2020年最火爆的Vue.js面试题

使用Charles实现本地数据mock

前端常用设计模式

前端面试汇总

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值