写了一段时间的h5,页面主要是在手机App中使用,直接用谷歌的模拟器调试是比较方便,但有时候在谷歌浏览器中生效的在手机上不生效,这就比较烦,要想看手机上的效果就得发布到服务器上,还有问题又得重新改,然后重新发布再测试,很麻烦。

之前一直想用XAMPP搭建一个本地服务器,然后让手机访问,找了一堆教程,经过一系列繁杂的配置,也终于成功了,但因为电脑连的WiFi,第二天打开电脑,发现ip变了,果断的访问不了了,改来改去也没成功了,就这样放弃了XAMPP。

不搜XAMPP的了,也不搜h5手机调试了,因为都说最好的就是谷歌浏览器的模拟器,搜了下mac 怎么让手机访问电脑本地html网页,居然搜到了使用webstorm和Charles,抱着试一试的心态,居然真的可以!!!

下面介绍一下配置过程,当然了既然是使用webstorm和Charles,那么首先要有这两个工具,安装的问题就不说了,下面是配置流程,有图有真相:

第一步:配置webstorm,打上两个对勾,就这么简单

linux charles使用_本地服务搭建


linux charles使用_linux charles使用_02


第二步:配置Charles

linux charles使用_手机访问电脑_03


linux charles使用_谷歌浏览器_04


linux charles使用_谷歌浏览器_05


这两个配置好了之后,给你想要访问的手机连上你的Charles的代理,即在WiFi那里选择手动设置代理,在对应的地方填写你电脑的ip和Charles的端口号,代理链接成功之后,使用你自己配置的host代替你本地的localhost。

举个例子:我本地浏览器访问地址为http://localhost:63341/test/index.html?_ijt=tqr08qpr3m06rsa8tilo3fiuv5

那么我手机上的访问地址就是http://zhanqin/test/index.html?_ijt=tqr08qpr3m06rsa8tilo3fiuv5(因为我的Map from设置的host为zhanqin,所以直接用zhanqin代替localhost:63341即可)。

亲测可用,有些小坑可看截图上的文字说明,非常感谢分享的博主,原博文地址为。