Charles网络抓包工具安装和使用

764 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第18天,点击查看活动详情

Charles是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果,达到分析抓包的目的。

1、下载Charles官网下载链接:www.charlesproxy.com/download/

2、下载安装完以后,pc端页面展示

image.png

如果打开后抓不到pc端浏览器的请求,需要设置Proxy->勾选macOS Proxy 和StartRecording,这样就可以抓到浏览器访问的请求了。

image.png

电脑设置代理端口:打开charles->Proxy->Proxy Settings,设置代理端口,

image.png

Charles支持抓http和https协议的请求,不支持socket协议。

此时抓包查看返回的如果是乱码,查看是http协议还是https协议,如果http协议,解决方法是找到该软件显示报内容,Contents目录下有info.plist文件,打开文件找到vmoption,添加-Dfile.encoding=UTF-8即可, 如果是https协议的请求出现乱码,此时需要按照CA证书

3.安装CA证书

电脑端证书按照设置:Charles->help->SSL Proxying-install Charles Root certificate, 安装完成后去系统的钥匙串访问中信任它。

image.png

完成后pc端浏览器的https协议的请求就可以抓到了。

手机设置代理: 注意点:需要保证手机和电脑处于同一个局域网

设置WiFi代理,HTTP代理改成手动->服务器地址为抓包电脑的IP地址(Windows可用ipconfig查询,mac用ifconfig)->端口为步骤1中charles设置的端口,一般默认为8888,

image.png

image.png

接下来设置手机安装Charles证书:help->SSL Proxying->Install Charles Root Certificate on a Mobile Device or Remote Browser->手机浏览器输入chls.pro/ssl,下载安装证书

安装完证书后,需要设置信任证书:设置->通用->关于手机->证书信任设置:信任证书

image.png

此时应该可以抓手机端的请求了。

4、charles的使用

4.1过滤内容设置:在 Charles 的菜单栏选择 Proxy->Recording Settings,然后选择 Include 栏,选择 Add,然后填入需要监控的协议,主机地址,端口号,这样就达到了过滤的目的。如下图:

image.png

如果想值展示url中包含某些内容的,可以在Filter中设置,如图:

image.png

还有一种过滤的方法,就是在选择 Focus,然后其他的请求就会被放到一个叫 Other Host 的文件夹里面,这样也达到了过滤的目的,

image.png 过滤后的样子: image.png

4.2断点调试:在charles发起一个请求时,我们是可以给某个请求设置断点的,然后来观察或者修改返回的内容,注意:请求的超时时间。 针对某一个请求设置断点,只需要在这个请求网址右击选择Breakpoints就给这个请求设置成断点了,见图

image.png 断点的相关设置:Proxy->Breakpoint Settings,见图

image.png

双击刚刚设置的断点的请求,进项设置 image.png

image.png 如果query有参数,可以填写成* image.png image.png

这个时候如果重新请求这个接口,网页会暂停,此时进入breakpoints ,可以对请求的接口修改参数和返回数据,来测试自己想要的场景。

修改好参数后,点击Excecute,就可以看到返回的数据。

4.3 模拟网速

模拟低网速设置:Proxy->Throttle Setting ,然后选择 Enable Throttling,在 Throttle Preset 下选择网络类型即可,具体设置你可以自行拿捏。设置完以后下次使用就可以直接点击小乌龟了。

image.png 4.4 请求重定向

请求重定向的作用是什么呢?开发中一般都是测试环境,如果我们想对比一下和线上版本的区别的话,可以讲测试的请求重定向到正式环境下。在选择 Tools->Map Remote image.png 点击Add,添加把www.baidu.com替换成www.mi.com

image.png

4.5 内容替换 有时候我们会测一下请求的参数不同会带来不同的返回结果以测试是否达到业务需求,或者需要不同的返回结果来验证我们对数据的处理是否正确,这时候需要后台的同事配合,但是有了 Charles,我们可以自己把控接口返回来的内容,比如数据的空与否,数据的长短等等。在 Tools->Rewrite Settings