缘起
对于前端程序员来说,开发的主体工作、调试基本可以用chrome的手机模拟器完成。但有时还是需要在真机上调试一下。这种情况下,笨办法是:“估摸着”改改,将代码推到服务器,再在手机上看效果。恩,这太痛苦了。有没有办法可以让手机访问你本地(即开发机)的服务呢?当然有了!
如果你的开发机和手机连的是同一个wifi,那么,手机可以直接访问你开发机的ip。但也只能用ip访问——不知道如何在手机上设置hosts。这有个致命缺陷:因为不能用域名,而网站登录一般是将身份种在当前域名下的cookie中,所以凡涉及到登录的就没治了。
幸运的是,有Charles / Fiddler这类代理工具帮忙,可以实现用域名访问的目标。本文以MAC+Charles+iPhone5s为例说明,其他组合同理
原理
将你开发机上Charles作为http proxy,供手机连接。那么,你在开发机上能访问的东西,手机上同样也能访问。
前提:手机和开发机连接的是同一个wifi
操作步骤:
(开发机)启动Charles
-
取端口号:从菜单Proxy -> Proxy Settings -> Proxies (tab)-> Port(输入框)中得到,默认为8888
-
取ip:
(手机)设代理:在你手机当前连接的wifi属性中设置(设置->点击当前所连wifi -> 往下滑,看图
至此,设置完成。在你手机的任意浏览器访问你开发机上的服务,Charles会弹出提醒(需要允许你的手机连接)