本文正在参加「金石计划 . 瓜分6万现金大奖」。

在开发微信大众号网页时，咱们最关心的一个问题便是调试。

• 怎样调试线上环境？
• 调试是否满足便利？

本文分享一种能够极大进步功率的微信大众号网页开发调试技巧，能够实现在本地开发时直连线上出产环境。假如你还不清楚这种场景下的调试技巧，不妨花几分钟阅读本文。

微信生态内容管控

在了解调试技巧的基本原理之前，咱们有必要先搞明白微信在内容管控上是怎样做的，知己知彼才干找到突破口。

微信小程序

在小程序方面，因为小程序本质上是微信这个超级运用下的子运用，上线发布都是要经过微信审阅的，布置时也是在布置在微信的服务器上，而不是开发者自行管理 Web 服务器，这便是说微信对小程序有肯定的管控权。

同时，在微信开发者东西中，微信也会校验许多身份信息，比方开发者东西的会话信息是否有用（经过微信扫码登录），小程序的 APP ID 是否正确，开发者是否具有这个 APP ID 对应的小程序的开发权限，某些敏感的 API（比方付出）还会校验服务端域名、签名等信息，当然还有许多地方也会触及各种校验，这儿就不一一列举。

经过这些手段，微信基本上能识别出坐在电脑前的开发者身份，因此能够信赖咱们在微信开发者东西上调试小程序供给的各种 API。

微信大众号网页

那么微信大众号网页是否也如此呢？事实上不是，微信大众号网页本质上仍是网页，这个网页是由开发者自行布置和维护的，管理权在开发者手里。可是对于微信来说，它作为一个渠道，必然要对内容进行校验和监管。在网站方面，能用来校验所有权的方式不多，最直接有用的方式当然是校验域名。假如开发者需求运用微信生态供给的才干（比方授权，JSSDK 敞开才干等），就必须先在微信大众渠道后台中将域名装备好，而且按要求验证域名所有权。此外，不同类型、是否微信认证经过的大众号也有着不同的调用权限。

(截取了一部分)

而在监管方面，因为大众号网页内容是由开发者自行设计实现，发版上线也是由开发者控制的，微信并不能做太多的干涉（不方便利加审阅环节），这就导致微信在大众号网页内容监管上无法做太多事情，万一呈现 hdd 等不良信息，除了加黑名单封杀也别无他法。监管才干和审阅机制对渠道来说是很重要的，不然哪天搞得欠好就分分钟翻车，这也是微信挑选力推小程序生态的一个重要因素。

大众号网页调试

在调用微信大众号 JSSDK API 或进行网页授权时，首先会校验的便是域名，域名假如与微信后台装备的不一致，就无法成功调用相关才干。

而咱们在装备域名时，通常会把测验环境/出产环境的域名都装备上，便利调试。

可是本地开发时，咱们的 devServer 装备一般是以 localhost 或许 127.0.0.1 作为主机名，再加上某个端口拜访网页，可是这种形式是不被微信开发者东西认可的，因为它只承受已备案的而且经过微信后台校验的域名。

所以当触及到授权或调试微信敞开才干时，许多人的调试链路是：本地盲改 -> 发布到测验服务器上 -> 在测验环境测验功用 -> 假如存在bug，本地持续修正，重复以上过程。

这会糟蹋许多时刻！那么有没有一种更便利的调试形式，让咱们能够在本地开发时就能调用微信的各个敞开才干，本地调试没问题后再发布到服务器上呢？答案是肯定的！

模仿线上环境调试

第一步是搞定微信开发者东西的调试流程。

尽管付出等特别场景在开发者东西上不方便利测验，可是搞通开发者东西的调试流程也满足应对大部分场景了。

咱们知道，微信首先会查看域名，那咱们就从域名上下功夫。

先说一个不知道算不算冷门的知识：webpack 的 devServer 能够指定 host 为一个域名，Vite Server 相同也能够。port 参数也能够指定为 80。

基于此，假定咱们的线上域名是，咱们能够先在本地开发时指定 host 为, port 为 80。

此刻咱们翻开浏览器经过http://:80这个地址拜访，80 端口是 http 的默认端口，所以带不带 80 其实都一样，此刻咱们的恳求会根据 DNS 解析拜访到线上服务器，因为代理服务器装备了 301 重定向，http 80 端口的恳求会被重定向到 https 443 端口，

所以浏览器会再发起一次恳求到https://，终究得到的呼应仍是来源于咱们的线上环境。

有的读者或许就会问了，已然 devServer host 装备了线上域名，但终究的恳求仍是转到线上的机器去了，那这对我本地调试来说有什么意义？

这就要搞清楚 DNS 的解析流程是怎样回事了。咱们知道，IP 对应的服务器才是真正供给服务的，域名只不过是一个名字，而 DNS 服务便是担任把域名解析到 IP 上的。

而 DNS 解析的第一道关口便是本机的 hosts 文件，hosts 文件中找不到的记录，才会往 DNS 服务器去找。

那咱们只要把 hosts 文件给改了，让解析到我本地的 IP 不就行了吗？咱们来试试。

hosts 文件在 Windows 操作系统中通常是位于C:WindowsSystem32driversetc目录下，咱们修正一下这个文件，参加一条记录，接着需求用管理员权限保存。

127.0.0.1       

这相当于把域名经过本地 hosts 文件解析到127.0.0.1，这样一来，拜访等价于拜访 127.0.0.1。

接着运用http://:80进行拜访，会发现翻开的网页内容确实是由自己的本地服务供给的。

在微信开发者东西中也相同适用。

此刻咱们在微信开发者东西中调用网页授权或许JSSDK API是被微信认可的，这就相当于实现了在本地调试大众号网页线上环境的需求。

整个拜访链路大概是这样的：

咱们用的是 http 协议进行调试，注意在【大众号设置-功用设置】中，不要开启域名的强制https校验。

处理内核记住并强制拜访 https 的问题

假如不小心输入了 https 进行拜访，微信开发者东西的浏览器内核会强制后续都按 https 拜访，这样一来，就无法用上述技巧调试了。

这时候即使点击 Clear Cache 也无法处理这个问题，

尝试在 Chrome 中运用chrome://net-internals/#hsts Delete domain security policies 也无法处理此问题。

重启也没用的。怎样办呢？

此刻，咱们能够找到C:UsersYourNameAppDataLocal微信开发者东西目录，把其中的 User Data 目录给删去去。再从头翻开微信开发者东西时，便是一个全新的状态，也就能够持续用 http 调试了。

注意，删去 User Data 目录后，你之前导入的小程序项目都将消失，后续需求从头导入各个小程序。

当然，咱们也能够在本地搭建起 https 环境用于调试，不过这就超出本文要评论的领域了，本文中不方便翻开叙说。

80端口占用问题

在 windows 中有遇到过80端口被占用的问题。

能够用netstat -aon | findstr :80查看一下，假如感觉有可疑的进程，能够考虑用taskkill /pid xxx -f杀掉。

也能够查看下注册表HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesHTTP这一项，将 Start 设置为 0。

// 其他或许有帮助的查看命令
netsh http show servicestate

真机线上环境调试

更高档的问题来了，有些 API（比方付出）在 PC 端微信开发者东西中也不能调试，为了进步开发功率，咱们期望能够在真机中直连 PC 本地开发环境进行调试，功用调试正常后再发布到线上。而在真机上，微信也会校验咱们的拜访域名，那么真机怎样直连咱们的本地开发环境进行调试，然后还能被微信认可呢？

答案是仍是修正 hosts 文件，把真机的 hosts 文件改了，比方将解析到指定 IP，不过不是解析到127.0.0.1，而是解析到 PC 机的局域网 IP 上。

这要求真机和 PC 在同一个局域网内，不然后续恳求是走不通的。

可是安卓修正 hosts 文件不是一件简单的事情，因为 Android 便是 Linux 基础上发展来的，而厂商都把修正 hosts 这种底层的权限都屏蔽了，所以要修正 hosts 文件，最直接的办法便是先让手机获得 Root 权限，可是 Root 权限一旦翻开，危险也很高，那么有没有办法不 Root 也能修正 hosts 文件呢？

有一种办法是经过 VPN 处理，咱们在安卓端安装一个Virtual Hosts，Virtual Hosts 支持经过 hosts.txt 文件解析，这就能够将线上域名解析到 192.168.x.x 这样的 PC 端 IP 上。

假如不收效，或许是 DNS 缓存问题，这个时候或许要重启一下安卓机，或许等 DNS 缓存的时刻曩昔才干收效。

当然，不做开发调试时，仍是要把 hosts 文件和相关装备改回来，免得影响正常运用。

结语

这种修正 hosts 文件的行为，其实是 DNS 欺骗的一种表现形式。学会 DNS 欺骗后，许多相似场景的需求都能够方便的解决。欢迎留言评论。