立诚勿怠,格物致知
It's all about connecting the dots

Charles,web请求代理工具

作为一名web程序员,不论你是前端、后端还是全栈,你肯定都会碰到http请求。如果我们只是在PC端常规的网页浏览器上发起http请求的话,通过浏览器开发者工具自带的network相关工具可以很方便的查看请求头、请求参数、请求方法、响应头、相应内容等数据。但是如果我们开发的页面是放在移动端比如微信里面使用的,有时候我们会需要可以直接在电脑上查看手机上发出的http请求和响应数据,或者至少这在很多情况下会让事情变得简单。Windows系统里我们可以用Fiddler,对于我们Mac系统用户而言,Charles这个软件可以帮你解决这个需求。使用方法如下:

一、获取PC端本机内网IP地址

在终端输入ifconfig来查看本地的内网ip地址:

➜  ~ ifconfig
lo0: flags=8049<UP,LOOPBACK,RUNNING,MULTICAST> mtu 16384
	options=1203<RXCSUM,TXCSUM,TXSTATUS,SW_TIMESTAMP>
	inet 127.0.0.1 netmask 0xff000000
	inet6 ::1 prefixlen 128
	inet6 fe80::1%lo0 prefixlen 64 scopeid 0x1
	nd6 options=201<PERFORMNUD,DAD>
gif0: flags=8010<POINTOPOINT,MULTICAST> mtu 1280
stf0: flags=0<> mtu 1280
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1492
	ether 78:4f:43:88:6a:7b
	inet6 fe80::18a2:a62a:a8cc:8cdf%en0 prefixlen 64 secured scopeid 0x4
	inet 192.168.0.102 netmask 0xffffff00 broadcast 192.168.0.255
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect
	status: active

如上所示,本机内网ip地址为192.168.0.102。

二、配置手机代理

配置前请先确保手机和PC连接的是同一个wifi网络,即它们处于同一个局域网内。手头现在用的是iPhone 5s,故此处以该机截图为例进行展示。

设置=》无线局域网,得到下图:

选择PC端所连的wifi网络,然后点击右侧的蓝色感叹号,在新界面拉到底部,得到下图:

按上图进行配置(一共配置2个地方):

  1. 服务器地址处填写我们之前获取到的PC端内网ip地址;
  2. 端口处填写“8888”(固定值)。

然后点击左上角【<无线局域网】返回键返回上一界面的同时会保存好我们配置的信息。

三、开始使用Charles监听数据

如果按上述操作进行操作后,你发现手机网络好像有点问题,出现这种情况是因为你没有打开PC端的Charles客户端。打开PC端的Charles软件,然后手机上随便访问几个页面,就会看到有很多请求数据了。具体数据的查看方法跟常规PC端浏览器开发者工具里的用法大同小异,不复赘述。下面放一张有数据的截图。

四、注意事项

关闭Charles后需要去掉我们刚才在手机上设置的代理ip和端口,否则手机访问网络会有问题。

赞(0) 打赏
文章名称:《Charles,web请求代理工具》
文章链接:https://www.orzzone.com/charles-web-debugging-proxy-application.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册