参考来源:微信web开发者工具
工具下载地址:
Windows 64位版本:下载地址
MD5: e74dd9499379ad93c68a952133eb7116
Windows 32位版本:下载地址
MD5: b69a7d94a045430a1d8216950cb27199
Mac版本:下载地址
MD5: 4024846d39293b492cec0d83edd97b73
注:支持 win7 及以上版本,支持OS X 10.8 及以上版本
下图是该工具的主界面:
如上图,功能简洁明了,操作容易上手,并且官网上介绍挺详细的,这里,我主要详解下移动调试使用;
往下看你就会发现 ,和chrome DevTools一样,官网上说微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致,可以快速上手。
移动调试使用步骤:
- 调试微信网页授权,登录使用
- 主界面的chrome DevTools;
- 移动调试配置图解,如下:
点击主界面 -- 移动调试
接下来,先点击验证,扫码试试你的设备是否支持X5 Bink 内核调试(用微信扫码),小超使用的安卓机子,是支持的;(开始我用浏览器扫码,显示不支持,着实吓了一跳);
其次,如图调试步骤,先数据线连接(一定的数据线连接),在扫码(同样式用微信扫),之后打一个界面,如上图勾选即可,最后记得重启微信;
接着点击图片的开始测试按钮;打开
找不到设备,原因无外呼是:
- [ ] 手机与电脑数据线连接失败,检查一下;小超使用应用宝连接的,有问题再应用宝检查;
- [ ] 上图调试步骤扫码打开的页面,勾选没有勾选上;
- [x] 没有重启微信 ;
正常情况下,会显示设备;如下图:
显示的数据是我使用微信,在微信里打开了公众号--有道云笔记,里的一篇文章;
点击 'inspect',就会打开新的界面,你会发现和chrome的开发者调试一模一样;
但注意了 ,点击 'inspect' 后,可能一直是空白页,对此,解决办法: 改VPN或者FQ,因使用的是chrome;
在之后,就如大伙常用的chrome 调试,一起来体验吧;
如若不支持X5 Bink,完全可以使用普通调试,(推荐);
而且不需要使用数据线,只需在同一网段下,改WLAN调为手动代理,填写ip地址,保存连接并重启微信;
注: 苹果手机使用方法与安卓普通调试一样;
WLAN手动代理图解
移动调试参考文档