参考来源:微信web开发者工具

工具下载地址:

Windows 64位版本:下载地址

MD5: e74dd9499379ad93c68a952133eb7116

Windows 32位版本:下载地址

MD5: b69a7d94a045430a1d8216950cb27199

Mac版本:下载地址

MD5: 4024846d39293b492cec0d83edd97b73

注:支持 win7 及以上版本,支持OS X 10.8 及以上版本

下图是该工具的主界面:

getPhoneNumber 微信开发工具 微信开发工具使用_微信

如上图,功能简洁明了,操作容易上手,并且官网上介绍挺详细的,这里,我主要详解下移动调试使用;
往下看你就会发现 ,和chrome DevTools一样,官网上说微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致,可以快速上手。

移动调试使用步骤:

  1. 调试微信网页授权,登录使用
  2. 主界面的chrome DevTools;
  3. 移动调试配置图解,如下:
    点击主界面 -- 移动调试

getPhoneNumber 微信开发工具 微信开发工具使用_下载地址_02

接下来,先点击验证,扫码试试你的设备是否支持X5 Bink 内核调试(用微信扫码),小超使用的安卓机子,是支持的;(开始我用浏览器扫码,显示不支持,着实吓了一跳);

其次,如图调试步骤,先数据线连接(一定的数据线连接),在扫码(同样式用微信扫),之后打一个界面,如上图勾选即可,最后记得重启微信;

接着点击图片的开始测试按钮;打开

getPhoneNumber 微信开发工具 微信开发工具使用_微信_03


找不到设备,原因无外呼是:

- [ ] 手机与电脑数据线连接失败,检查一下;小超使用应用宝连接的,有问题再应用宝检查;

- [ ] 上图调试步骤扫码打开的页面,勾选没有勾选上;

- [x] 没有重启微信 ;正常情况下,会显示设备;如下图:

getPhoneNumber 微信开发工具 微信开发工具使用_下载地址_04

显示的数据是我使用微信,在微信里打开了公众号--有道云笔记,里的一篇文章;
点击 'inspect',就会打开新的界面,你会发现和chrome的开发者调试一模一样;
但注意了 ,点击 'inspect' 后,可能一直是空白页,对此,解决办法: 改VPN或者FQ,因使用的是chrome;

在之后,就如大伙常用的chrome 调试,一起来体验吧;

如若不支持X5 Bink,完全可以使用普通调试,(推荐);

而且不需要使用数据线,只需在同一网段下,改WLAN调为手动代理,填写ip地址,保存连接并重启微信;
注: 苹果手机使用方法与安卓普通调试一样;
WLAN手动代理图解移动调试参考文档