一、Charles的安装

安装都不会,那就不用再往下看了。(*^__^*) 嘻嘻……

二、HTTP抓包

1.查看电脑IP地址

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第1张

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

2.设置手机的HTTP代理

手机连接到同一WiFi下设置HTTP代理:

服务器为电脑IP一样,端口号设置8888

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第2张

3.在电脑上打开Charles

点击“Allow”允许,出现手机的HTTP请求列表

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第3张

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第4张

三、HTTPS抓包

注意:HTTPS的抓包需要在HTTP抓包基础上再进行设置

设置前抓包HTTPS是这样的

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第5张

1.安装SSL证书到手机设备

点击 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or...

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第6张

 

出现弹窗得到地址 http://charlesproxy.com/getssl

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第7张

 

在手机Safari浏览器输入地址  http://charlesproxy.com/getssl,出现证书安装页面,点击安装
手机设置有密码的输入密码进行安装

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第8张

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第9张

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第10张

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第11张

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第12张

 

 注意:不要以为这样就结束了,还需要启用完全信任Charles证书

设置→通用→关于本机→证书信任设置 里面启用完全信任Charles证书

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第13张

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第14张

2.电脑安装SSL证书

选中Charles,在“Help”菜单中选择—>“SSL Proxying”—>“Install Charles Root Certificate”会自动打开钥匙串访问窗口:

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第15张

 

注意:如果点击没反应,点击 save Charles Root Certificate... ,保存到桌面即可,双击之后再看钥匙串访问

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第16张

 

 

 

在“钥匙串访问”中双击打开,选择始终信任

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第17张 

3.在Charles工具栏上点击设置按钮,选择“SSL Proxying Settings…”:

打开“SSL Proxying Settings”对话框:

点击“Add”添加:Host中输入*表示匹配所有主机。https默认端口号:443。

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第18张

 

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第19张

4. 测试

再次请求一下APP,见证奇迹的时刻

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第20张

 四、Charles如何打断点,修改Response数据

1、打开将要访问的网址,通过Charles抓到想要修改数据的接口

这里我们来修改一下首页的内容看看

请记住原来的首页是这个样的 今日推荐话题:get买家秀 

我们做的是修改这个文案

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第21张

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第22张

2. 点击右键选Breakpoints

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第23张

3.点击Charles工具中Proxy-Breakpoints

抱歉图片反了,对于优秀的你应该一样可以看

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第24张

4、弹出Breakpoints  Settings 弹层

双击Location中的想要打断点的接口,弹出Edit Breakpoints

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第25张

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第26张

5.将Query中的内容删除,输入*

如果修改Request数据,就将Request勾选

如果修改Response数据,就将Response勾选

6.此时重新访问该接口,Charles自动跳转到Breakpoints页面

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第27张

 8、此时修改Response数据,点击Edit Response,切换底部tab至Text 或者JavaScript,修改所需要的数据

这里我切换到javaScript,修改“get买家秀”为“get买家秀修改内容后” 点击excute 查看访问的页面,数据将会显示已修改的Response数据

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第28张

9.数据将会显示已修改的Response数据

下面就是见证奇迹的时刻了

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第29张

五、Charles模拟网络环境,限制网络速度 Charles Throtting

App开发完后,我们要测试多环境,特别是在慢网速下的case,现在用charles也可以达到这目的。

看这两张图片我想聪明的你就知道怎么设置了!

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第30张

Charles(V3.10.1)的抓包以及常见功能的使用 随笔 第31张

 

 PS:最后不使用了,记得把WiFi的代理改成自动哦

感谢各位大神~

参考文档链接:

https://www.cnblogs.com/weiming4219/p/7908668.html

https://blog.csdn.net/joyce_xiaobaibai/article/details/80693471

https://www.jianshu.com/p/b2582d790b52

https://www.cnblogs.com/weiming4219/p/7908668.html

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄