微信web开发工具使用详解笔记

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

工具下载地址：

Windows 64位版本：下载地址

MD5: e74dd9499379ad93c68a952133eb7116

Windows 32位版本：下载地址

MD5: b69a7d94a045430a1d8216950cb27199

Mac版本：下载地址

MD5: 4024846d39293b492cec0d83edd97b73

注：支持 win7 及以上版本，支持OS X 10.8 及以上版本

下图是该工具的主界面：

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

移动调试使用步骤：

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

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

其次，如图调试步骤，先数据线连接（一定的数据线连接），在扫码（同样式用微信扫），之后打一个界面，如上图勾选即可，最后记得重启微信；
接着点击图片的开始测试按钮；打开

找不到设备，原因无外呼是：
- [ ] 手机与电脑数据线连接失败，检查一下；小超使用应用宝连接的，有问题再应用宝检查；
- [ ] 上图调试步骤扫码打开的页面，勾选没有勾选上；
- [x] 没有重启微信 ；

正常情况下，会显示设备；如下图：

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

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

如若不支持X5 Bink，完全可以使用普通调试，（推荐）；

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