前言
有时候生产上出现了一个BUG, 但是苦于没有开发者权限或者该页面是内嵌的一个H5页面, 但是我们又需要它接口的调试信息.
效果预览
电脑链接手机, 电脑浏览器直接调试手机微信正在打开的页面, 无需开发者权限, 无需vconsole.
前置要求
- 手机得是Android系统
- 浏览器得是chromium内核的(新版的edge或者chrome)
- 手机打开usb调试模式
- 微信打开调试模式
操作流程
手机打开usb调试
先开启开发者选项, 不同牌子的手机各不相同,直接去百度都有的.
开启USB调试即可
打开微信的调试模式
用手机微信打开这个地址即可 https://debugxweb.qq.com/?inspector=true
可以将链接发送给自己, 然后点击打开
点进去进到微信的首页就成功了
手机微信打开你需要调试的页面
开始链接调试
手机usb链接电脑, 选择正确的链接模式
有的手机选择仅充电就可以, 有的手机需要打开文件传输
不过链接成功一般会出现这个提示
和这个选项
选择确定即可
浏览器调试
打开DevTools调试页面
只要是基于chromuim内核的浏览器应该都有这个功能
edge打开: edge://inspect
chrome打开: chrome://inspect
我推荐用微软新版的edge浏览器
系统自带而且chrome的调试页面可能需要科学上网
打开后就是这个样子
需要等一会下面的那些选项才会加载出来
找到你需要调试的页面点击inspect就可以进到调试页面了
和浏览器的f12一毛一样, 所以功能一应俱全
注意
- 调试的页面必须数活跃的页面即手机现在打开的页面
- 有些页面的标题可能有点奇怪耐心的找一下
- 遇到问题可以联系我
