用Chrome调试微信h5页面

96
sarlmoclen
0.2 2018.12.20 15:12* 字数 466

第一步:debugx5.qq.com


打开微信任意一个聊天界面,输入"debugx5.qq.com",发送,点击已经发送出去的这条消息,可以进入到"X5 调试页面",如图:

debugx5.qq.com
X5 调试页面

如上图勾选"打开TBS内核Inspector调试功能"和"打开TBS内核X5jscore Inspector调试功能"。

微信端的设置就这些,这个设置,应该等同于我们自己webview设置连接PC Chrome时,设置WebView.setWebContentsDebuggingEnabled(true)这句功能。

第二步:打开手机开发者选项和USB调试


手机开发者选项和USB调试

当然这一步中需要我们在电脑安装adb等工具,可以使手机连接电脑,对于Android开发人员,这一步就不详细介绍了。

第三步: Chrome设置


在浏览器地址栏中输"chrome://inspect/#devices”,如图:

chrome://inspect/#devices

可以看下这5个标注的地方,东西不多,很简单。连接成功后就会出现上面那些信息。这个时候点击"inspect",如图:

1545289403(1).jpg

这里我在微信打开的是百度的网页,连接成功后,同样的百度页面出现在了浏览器这个调试工具里面。


以上操作的基础是要连接外网!可以连接到谷歌服务器!大家找VPN连一下,只需第一次使用连接就行,后面有了缓存就不需要了。

延伸---浏览器中访问h5的调试


很简单,下载Chrome App,安装后在浏览器中直接打开h5就可以连接,毕竟这个调试工具就是谷歌开发的。

延伸---我们自己App中访问h5的调试


添加这个设置:WebView.setWebContentsDebuggingEnabled(true),打开自己App中的h5就可以连接。

Android
Web note ad 1