charles简介
Charles 是一款常用的网络代理工具,可以用来监控、调试和分析网络请求和响应数据。它可以截取 HTTP 和 HTTPS 流量,在代理服务器和目标服务器之间建立连接,允许用户便捷地查看和记录网络通信数据,包括请求 URL、请求头部、请求体、响应头部、响应体等信息。
使用 Charles 可以有助于调试和优化网络应用程序,例如通过重放网络请求来进行性能测试、诊断慢请求、查找代码中的 bug 等等。此外,Charles 还提供了其他一些功能,如 Map Remote、Throttling、Breakpoints 等等,让用户能够更加深入地理解和优化网络应用程序。
安装教程
安装教程的具体步骤,请看另一位博主的文章Charles全套教程
charles适用场景
下面暂时只列举这2个场景,其实有更多的适用场景,读者可自行发现并使用
1.调试APP、小程序、桌面exe等
这些应用不像网页、直接打开控制台就能查看接口及返回,所以需要借助抓包工具来调试及查看接口返回。
2.调试样式
例如,我们想要借鉴某小程序的样式,由于我们不是会员,只能看到非会员的样式,那么怎么查看会员的样式呢?
- a.充钱:别想了,能白嫖的我绝不充钱
- b.改接口数据:我们使用charles抓包,查看接口数据,假如我们看到当前vipStatus=0,那么我们尝试把接口数据改为vipStatus=1,然后我们就能在页面上看到会员样式了
注:具体情况具体对待,上述内容仅提供思路
实战教程
前提
下列教程仅假设你已阅读上面推荐的文章Charles全套教程、且已安装配置好
环境
charles版本:4.6.7
示例应用:PC端微信小程序 : 丰巢
接口过滤
打开charles工具,然后打开微信小程序,再观察charles接口的变化,我们就能确认丰巢的接口是什么,然后我们对接口过滤
修改接口数据
观察上图,大家发现小编是个穷逼,没钱开会员。
那么接下来,小编就要改接口数据,看看会员页面长什么样子。
步骤一:”通过观察接口,我们发现:是否为会员是通过这个接口来获取判断的
步骤二:然后我们对这个接口右键,勾选Breakpoints
选项,对这个接口断点
步骤三:我们点击小程序的立即开通
按钮,默认点击(未断点之前)来是这样的
步骤四:断点之后,看到这样的,然后点击这里
步骤五:修改接口数据,主要把memberStatus值改为2(盲猜的,具体对待)
步骤六:最后一次点击Execute
按钮,我们就能看到会员状态已经修改好了,接口返回的数据,就是我们刚刚改过的
最后
小编近期写专栏《若依的nodejs版本后台的全栈教程》
前端也是可以写后端服务的,希望帮助更多的前端人员。
希望大家多多关注!感谢【磕头.png】