微信开发如何做本地调试?
假装有人邀,刚好最近团队也碰到类似的问题,一点点经验拿来分享一下。只说说本地调试。
通常微信 web 端的页面都需要发布到外网,碰上极其难用复杂的发布系统,我们前端狗们也是吐槽无力,就算 ftp 一来一回的方便,但本身这样做就是不科学(优雅)的搞法。因为对于线上已有的版本,在没开发测试完之前谁也不敢甩到外网。
在传统的桌面 web 端开发流程里,本地开发完成后的环节是测试联调,所以先讲讲怎么给设备配 host。
1. 给设备配 host
世界上最遥远的距离,你在外网,我在测试环境。
改设备的 host 文件本身就是高级(变态)玩法,所以默认情况下是没有权限来更改的。但是,ios 设备在越狱后,android 设备在 root 后你就能随便乱来了,专门用来改host 文件的应用也是一搜一大把,当然前提是你得把设备越狱和 root 。
这儿只讲讲在没有越狱和 root 的情况下怎么给设备配 host。
主要的思路就是,通过一台主机作为代理服务器,手机通过 http 代理连接过来,手机上所有的 http 请求都经过主机代理,这样只要更改主机的 host 就可以达到目的了。
team 就只有我和 @xzheng 两个人,我们都是 macbookpro 办公的果狗,平台比较统一所以比较好办。
我们用到的工具:
一台接入到 wifi 的 imac
任意多台接入到同 wifi 网段的移动设备,ios 或 android 不限
用来开启代理服务和抓包的应用 charles (charles web debugging proxy • http monitor / http proxy / https & ssl proxy / reverse proxy)
host 管理应用 gas mask (2ndalpha/gasmask · github)
主要的步骤是:
将 imac 和设备都连接到同一 wifi 下 ,并保证他们在同一网段,比如:
imac 192.168.1.88
iphone 192.168.1.101
通过 charles 打开 imac 的代理服务,并抓包
把设备 http 代理设置成手动,服务器地址为 imac 的 ip,端口号默认为 8888
通过 gas mask 来修改 imac 的 host 文件
所以,整个的流程看上去是这个样子的:
顺带一提这样做的一个好处,微信内置的 webview 里很多的 js api 是要申请权限的,(理论上)微信会对当前 url 所在域名进行权限校验。所以,如果不用与外网真实环境一致的域名就不能调用到这些 api 的方法,host 就很好的避免了这个问题。
以上,手机上所有
http://dianhua.qq.com
的请求都经由 charles 的代理来到了主机上,主机因为被修改了 host,http://dianhua.qq.com
的请求间接的被转到了 host 文件里设置的 ip。
2. 本地调试
看到题主一遍一遍的提到 zend studio 我就乐了,php狗来嘛,host 都解决了,本地调试还不简单:
按上面提到的方法,将手机 http 代理连接到主机
在主机上开启一个本地环境,要问 php 环境哪家强,我默默地打住选了 xampp
将主机 host 改到本机 127.0.0.1
http://dianhua.qq.com
整个的过程是这样的:
以上,手机上
http://dianhua.qq.com
的请求经由主机,在 host 文件的影响下都跑去主机的 htdoc 目录。
这边保存,那边刷新,巴适惨得哭。
以上的例子是 mac 环境,windows 下 fiddler + willow 的无敌组合是一样的,如有需要可以试试。
这是我们做法,希望对题主有用,就这样。
以上就是微信怎样进行本地调试的详细内容。