作为一名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个地方):
- 服务器地址处填写我们之前获取到的PC端内网ip地址;
- 端口处填写“8888”(固定值)。
然后点击左上角【<无线局域网】返回键返回上一界面的同时会保存好我们配置的信息。
三、开始使用Charles监听数据
如果按上述操作进行操作后,你发现手机网络好像有点问题,出现这种情况是因为你没有打开PC端的Charles客户端。打开PC端的Charles软件,然后手机上随便访问几个页面,就会看到有很多请求数据了。具体数据的查看方法跟常规PC端浏览器开发者工具里的用法大同小异,不复赘述。下面放一张有数据的截图。
四、注意事项
关闭Charles后需要去掉我们刚才在手机上设置的代理ip和端口,否则手机访问网络会有问题。