利用Charles做代理测试电脑上写的H5页面

做H5页面的同学可能经常会遇到一个场景,就是电脑上调试好的页面怎么在手机上访问测试呢?

下面就介绍一种自己经常使用的方式,利用Charles代理软件来实现!

安装Charles

直接去官网下载对应的系统版本安装即可。 下载地址

软件本身是收费,免费使用的话会软甲打开之前有个延迟提醒,忽略即可,或者你也可以去找破解版

代理配置

  • 双击打开软件找到代理配置这一项,选中系统代理(我这边使用的是Mac版本):

利用Charles做代理测试电脑上写的H5页面

  • 打开代理配置,设置好代理端口

利用Charles做代理测试电脑上写的H5页面

利用Charles做代理测试电脑上写的H5页面

  • 手机上设置 WIFI 代理为手动,端口和地址填入上面配置好的端口和电脑的IP地址
手机上配置wifi手动代理可以根据机型搜一下就知道了

手机访问测试

例如在电脑上有一个H5项目已经配置好了虚拟主机 域名是demo.yangbai.com,没有配置虚拟主机的直接使用ip和端口访问项目

这时候不出意外的话电脑上回弹出来一个是否允许这个手机连接这么一个弹窗,点击允许即可!

然后就可以访问到了,Charles左边还可以看到请求数据。

相关推荐