Mac下使用webstorm和Charles搭建本地服务器使手机可访问本地html网页

写了一段时间的h5，页面主要是在手机App中使用，直接用谷歌的模拟器调试是比较方便，但有时候在谷歌浏览器中生效的在手机上不生效，这就比较烦，要想看手机上的效果就得发布到服务器上，还有问题又得重新改，然后重新发布再测试，很麻烦。
之前一直想用XAMPP搭建一个本地服务器，然后让手机访问，找了一堆教程，经过一系列繁杂的配置，也终于成功了，但因为电脑连的WiFi，第二天打开电脑，发现ip变了，果断的访问不了了，改来改去也没成功了，就这样放弃了XAMPP。
不搜XAMPP的了，也不搜h5手机调试了，因为都说最好的就是谷歌浏览器的模拟器，搜了下mac 怎么让手机访问电脑本地html网页，居然搜到了使用webstorm和Charles，抱着试一试的心态，居然真的可以！！！
下面介绍一下配置过程，当然了既然是使用webstorm和Charles，那么首先要有这两个工具，安装的问题就不说了，下面是配置流程，有图有真相：
第一步：配置webstorm，打上两个对勾，就这么简单


第二步：配置Charles



这两个配置好了之后，给你想要访问的手机连上你的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即可）。
亲测可用，有些小坑可看截图上的文字说明，非常感谢分享的博主，原博文地址为https://blog.csdn.net/hherima/article/details/82592400。