微信公众号如何使用域名直接调试本地开发环境代码的方案

Posted 2021-01-17 东篱南山

 微信公众号，必须通过域名才能进行访问。很多人调试时，都是把代码打包放到服务器上来调试，发现问题本地修改，再次上传调试，这样效率非常低。

我们通过这样操作可以实现本地的直接调试：

首先公众号里设置好域名，验证域名所有者。

我们假设，域名为：http://wechat.hz300.com，npm run dev开启的本地代码调试服务为：http://localhost:8090/。

再配置：

1、修改本地hosts，将wechat.hz300.com映射到127.0.0.1。修改c:windowssystem32driversetchosts文件即可。mac电脑修改/etc/hosts文件。

2、设置本地代理转发，将80端口转发到8090端口。可使用各种代理转发工具。我用的是自己写的工具：https://github.com/hzsrc/dynamic-mocker，执行npm run proxy80即可。

设置完这一步，你就可以再电脑上使用微信开发者工具访问域名http://wechat.hz300.com进行调试了。访问的走向是：wechat.hz300.com:80 => 127.0.0.1:80 => 127.0.0.1:8090，也就是你的本地代码调试服务。

3、如果需要用真机调试，可以将手机与电脑连接同一个局域网络，然后在电脑开启一个抓包代理（用Fiddler2即可，mac可以Charles），再将手机的wifi代理设置为你的电脑ip及8888端口。这样，在手机上访问网络时，将通过抓包代理到你的电脑上。微信访问http://wechat.hz300.com也将最终访问到你的本地代码调试服务。