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全套教程、且已安装配置好
环境
charles版本：4.6.7
示例应用：PC端微信小程序 ： 丰巢
接口过滤
打开charles工具，然后打开微信小程序，再观察charles接口的变化，我们就能确认丰巢的接口是什么，然后我们对接口过滤
修改接口数据
观察上图，大家发现小编是个穷逼，没钱开会员。
那么接下来，小编就要改接口数据，看看会员页面长什么样子。
步骤一：”通过观察接口，我们发现：是否为会员是通过这个接口来获取判断的
步骤二：然后我们对这个接口右键，勾选Breakpoints选项，对这个接口断点
步骤三：我们点击小程序的立即开通按钮，默认点击（未断点之前）来是这样的
步骤四：断点之后，看到这样的，然后点击这里
步骤五：修改接口数据，主要把memberStatus值改为2（盲猜的，具体对待）
步骤六：最后一次点击Execute按钮，我们就能看到会员状态已经修改好了，接口返回的数据，就是我们刚刚改过的
最后
小编近期写专栏《若依的nodejs版本后台的全栈教程》
前端也是可以写后端服务的，希望帮助更多的前端人员。
希望大家多多关注！感谢【磕头.png】