在没有开发者权限的情况下调试生产的微信小程序(H5) 微信公众号 微信服务号

前言

有时候生产上出现了一个BUG, 但是苦于没有开发者权限或者该页面是内嵌的一个H5页面, 但是我们又需要它接口的调试信息.

效果预览

电脑链接手机, 电脑浏览器直接调试手机微信正在打开的页面, 无需开发者权限, 无需vconsole.

前置要求

1. 手机得是Android系统
2. 浏览器得是chromium内核的(新版的edge或者chrome)
3. 手机打开usb调试模式
4. 微信打开调试模式

操作流程

手机打开usb调试

先开启开发者选项, 不同牌子的手机各不相同,直接去百度都有的.

开启USB调试即可

打开微信的调试模式

用手机微信打开这个地址即可 https://debugxweb.qq.com/?inspector=true
可以将链接发送给自己, 然后点击打开

点进去进到微信的首页就成功了

手机微信打开你需要调试的页面

开始链接调试

手机usb链接电脑, 选择正确的链接模式

有的手机选择仅充电就可以, 有的手机需要打开文件传输

不过链接成功一般会出现这个提示

和这个选项

选择确定即可

浏览器调试

打开DevTools调试页面

只要是基于chromuim内核的浏览器应该都有这个功能

edge打开: edge://inspect
chrome打开: chrome://inspect

我推荐用微软新版的edge浏览器
系统自带而且chrome的调试页面可能需要科学上网

打开后就是这个样子

需要等一会下面的那些选项才会加载出来

找到你需要调试的页面点击inspect就可以进到调试页面了

和浏览器的f12一毛一样, 所以功能一应俱全

注意

• 调试的页面必须数活跃的页面即手机现在打开的页面
• 有些页面的标题可能有点奇怪耐心的找一下
• 遇到问题可以联系我