前端胖籽 | 微信web开发者工具

​微信

web开发者工具

它是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。

该工具界面主要由几大部分组成，如下图所示：

具体

的安装步骤（查看官方技术文档）：

https://mp.weixin.qq.com/wiki?id=mp1421141115&highline=jsapi_ticket

成功按照官方文档的说法，一步一步进行配置之后：

但是，这个开发者工具虽然是微信官方开发工具，但是毕竟是模拟器，现实情况的复杂会导致有些样式不兼容。例如vivo的微信客户端，显示总是错乱的（测试的同事发现的问题，她的手机可以还原场景，但是我的手机端是正常的）。所以，我们需要有针对性的在这款手机真机上调试，如何做呢？下面简要介绍如何利用微信开发者工具进行真机调试。

相对于iOS移动端调试，Android移动端调试更丰富一点，所以以安卓为例，ios调试方式同Android调试中的“普通调试”。

①普通调试

普通调试的步骤如下：

步骤

解释：

第一步：选择无线网卡地址，默认即可，工具会自动查询你的无线网卡ip v4地址

第二步：意思就是你的手机连接的网络要和第一步得到的ip v4在同一个网段内（什么是网段？看这里）。简单的做法就是把手机的网络和电脑的网络设置为同一个源（连接到同一个无线网上）

第三步：这个步骤很清楚了，还有一个快捷的方式就是“下拉工具栏——长按无线连接图标”然后就可以直接进入到无线列表在做后续操作了。iOS操作如下：

iOS： 设置 - 无线局域网 - 选中网络 - HTTP代理手动

第四步：设置好上面步骤以后，重启微信，这可能是让微信重新检测目前的网络情况，然后打开你想调试的页面（注意，要先打开要调试的页面才可以开始调试）

第五步：这个不在上面的说明里，但是需要说明下，打开调试的网页以后，在点击下面的开始调试按钮！

如果

你的操作正确，弹出框会是这样的：

开始调试成功的话，会有浅绿色提示当前调试的页面地址

如果你当前没有在微信打开调试页面或打开的本地页面地址错误，则会失败：

提示

你这并没有找到你要调试的页面

请注意，如果你想调试本地开发的页面，需要你开启web服务，使用http://host<:port>的方式来访问，如果只是一个本地页面，是无法打开调试的，形如webstrom里面快捷打开的页面地址：http://localhost:63342/17-app-calculate/index.html 这个是无法调试的。需要你搭建WEB服务，使用类似于http://192.168.0.108:8090/17-app-calculate/ 这种url。（http://127.0.0.1:8090/17-app-calculate/ 这种写法也是无法调试的，因为微信根本打不开）。

调试模式开启以后，我们就可以直接在手机上查看调试的结果或者修改东西：

我选中这里，手机就会有类似于PC端选中的状态一样被选中

扫描二维码

前端胖籽

版权说明

内容来源于网络，版权归作者所有；

图片来源于网络，如有侵权，请联系删除。