随着移动互联网的不断发展，微信公众号已经成为了企业与用户之间沟通的重要桥梁。为了更好的利用微信生态，越来越多的H5网页项目嵌入在微信公众号或企业微信应用中为用户提供服务。
然而，微信公众号H5网页项目只能在微信环境中打开，比如微信或企业微信客户端中，如果在浏览器打开，则会提示：
因此，在开发和调试移动端H5微信公众号网页项目时常常会遇到一些问题，本文将分享一些公众号网页项目的调试技巧，希望能帮助大家更高效地进行项目调试。
一、常见的移动端调试方式
调试移动端H5项目的方式有很多，比如通过手机真机连接电脑端同一局域网的WiFi来调试，但移动端不会像Chrome一样直接打开开发者工具，我们可以借助如 VConsole、Weinre 等工具在真机上调试页面、查看网络请求、Console 输出等信息，或者借助 whistle 进行代理劫持查看相关请求信息。
然而，以上方式都不能便捷的进行断点调试，如果是微信公众号项目，我们经常还可能遇到需要调试清理授权、清理缓存等场景，虽然我们也可以通过手动清理微信缓存的方式，但毕竟比较麻烦，而且还不容易那么快生效。
因此，调试公众号网页项目可能需要借助更加便捷的工具。很多朋友仅仅使用微信开发者工具来调试微信小程序，却不太了解微信开发者工具还可以用来调试公众号网页项目，接下来将重点分享如何使用微信开发者工具来调试移动端公众号网页项目。
二、使用微信开发者工具
首先，那自然是需要下载并安装微信开发者工具，这个不用多说，相信优秀的你自然知道。
01
选择公众号网页项目
打开微信开发者工具后，选择左侧Tab菜单中的【公众号网页项目】，如图：
02
登录微信账号
点击【公众号网页项目】菜单后则会打开一个新的窗口，为了更方便的使用微信登录态信息，建议打开后第一时间使用微信扫描工具界面上的二维码，将其与你的微信账号绑定，以便后续调试时能够与微信公众号建立连接。
03
了解调试界面
接下来我们来看看这个窗口的布局，顶部有类似浏览器的地址栏，在这里可以输入公众号网页链接，就是微信鉴权回调的那个链接，如：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=xxx&response_type=code&scope=snsapi_base&state=1wechat_redirect
输入链接并回车后则会跳转至对应的应用页面，左侧就是一个模拟移动端的页面显示窗口，右侧就是我们熟悉的开发者调试界面，在这里有类似于在浏览器开发者工具一样的元素查看、Console 窗口，以及网络请求监控等工具。
04
访问本地开发环境
通过开发者工具打开应用后，我们就可以像平时Chrome浏览器调试PC端Web应用一样去调试公众号网页项目了。在正式调试前，我们可能还需要配置代理，以更方便的调试本地开发环境。
Whistle 配置
借助 whistle，可以更方便的进行代理。首先我们通过 npm i -g whistle 命令安装好 whistle，然后在浏览器访问：http://127.0.0.1:8899，接着配置规则如：
https://www.test.com/s/web-h5/ http://127.0.0.1:8080/ excludeFilter://*/api
上面这段配置的意思是将页面访问请求代理到本地开发环境：http://127.0.0.1:8080/（端口换成自己本地项目实际启动的端口号），并排除 /api 开头的请求，因为我们可能需要希望后台接口实际访问测试环境。实际在开发者工具中访问的链接类似如下：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxx&redirect_uri=https%3A%2F%2Fwww.test.com%2Fs%2Fweb-h5%2F&response_type=code&scope=snsapi_base&state=1wechat_redirect
具体的appid和微信授权方式等参数根据实际业务进行调整。
HTTPS代理配置
另外，如果链接访问涉及到HTTPS，则需要安装证书才能正常代理。
配置步骤：打开http://127.0.0.1:8899，点击顶部的HTTPS，在出现的弹窗里面点击 Download RootCA（下载证书）。证书下载后在系统中安装证书，正确安装后才可以正常代理HTTPS的请求。
如果想要监听手机的HTTPS的请求，则需要使用手机扫弹窗中的二维码，并将 Capture TUNNEL CONNECTS 和 Enable HTTP/2 都勾选上。
Whistle 除了代理，还可以提供更多开发辅助，比如Mock数据，监听请求等等，具体可以查阅相关文档了解。
三、微信开发者工具代理
配置好 whistle 后，我们同时需要在微信开发者工具中指定所使用的代理。因为上面我们已经采用了 whistle 来实现代理，自然是将代理地址指向：http://127.0.0.1:8899。在微信开发者工具 - 设置 - 代理设置，选择：手动代理设置，配置如下图：
配置好之后即可使微信开发者工具实际访问到本地开发环境，这样我们就可以愉快的调试本地项目了。
四、常见问题
01
企业微信的开发者权限
如果是调试企业微信应用号中的网页项目，首先需要你的微信账号加入对应的企业微信主体，并成为管理员，如果组织管理权限限制，至少也是需要分配为【分级管理员】，然后自己登录到企业微信管理台，并勾选开发者工具权限。菜单路径为：我的企业 - 微信插件 - 开发者工具，如图：
02
开发工具提示获取不到userId
如果是调试企业微信应用号中的网页项目，微信开发工具可能提示企业微信获取不到userId的问题。
解决办法：需要使用开发者的微信在企业微信管理台【我的企业 - 微信插件】扫码关注对应的企业才能获取到userId，参考。
03
微信开发过程中遇到 50001
微信开发过程中遇到 50001: redirect_uri unauthorized
解决办法：检测可信域名配置。但是，有时候并不是可信域名没配置，而是自己链接上的appid没配置正确。
五、结语
在这篇文章中，给大家分享了一些常见的移动端调试方式，并重点介绍了如何使用微信开发者工具来调试移动端公众号网页项目。
通过微信开发者工具，开发人员可以在电脑上模拟移动设备的环境，实时查看页面效果，进行元素查看、Console 输出等操作。同时，还介绍了如何使用代理工具像 Whistle 来配置代理，以便更方便地调试本地开发环境。
总之，希望这些技巧能够帮助你更轻松地进行移动端公众号网页项目的开发和调试工作。
作者简介
erictang(唐潇)
基础科技产品部 / WEB前端开发岗
