WeChat调试网页

本地开发环境调试

微信x5调试工具：http://debugx5.qq.com

tbs调试页面工具: http://debugtbs.qq.com

强制开启使用x5调试: debugmm.qq.com/?forcex5=true

CASE 1: 微信不允许通过IP地址访问服务，所以需要通过微信提供的X5调试工具配置自定义Hosts

1、使用自定义域名绑定IP

1-1、访问 http://debugx5.qq.com

1-2、x5调试页面=>代理=>自定义Hosts: 192.168.0.108=odev.itszhaoqh.me

1-3、访问odev.itszhaoqh.me就可以访问到192.0.108

CASE 2: 使用chrome调试微信浏览器打开的页面

2-1、使用手机数据线连接电脑的USB接口

2-2、打开手机USB调试功能

2-3、微信中打开 http://debugx5.qq.com

2-4、x5调试页面=>信息=>打开TBS内核Inspector调试功能/打开vConsole调试功能

2-5、打开Chrome浏览器,并在地址栏里输入chrome://inspect/#devices

2-6、连接成功后使用微信打开网页连接后就可以在chrome://inspect/#/devices上看到自己的手机设备和微信浏览器打开的网址

2-7、在需要调试的网址下面点击inspect就会弹出DevTool调试页面

2-8、在微信浏览器上点击操作，DevTool调试页面会同步反应

图1：chrome://inspect/#/devices界面

图2：DevTool调试页面