使用Chrome调试微信内置浏览器

微信有着巨大的用户量,所以通过微信访问网站的用户也很多,有时会遇到一些只在微信内置浏览器中才发现的问题,这个时候如果无法获取到微信中的调试信息,就会特别难调试。

微信提供了vConsole可以用来查看一些信息,以及访问数据存储。但是它还不够强大,也不够方便。

另外还有微信的web开发者工具,只能调试自己公众号下的网站,如果我想分析别人的微信H5网站,比如网页结构、抓包等,微信的调试工具是办不到的。

好在微信现在采用的X5内核基于Chrome,我们可以通过Chrome调试微信内置浏览器。

在开始之前,需要准备一台带有Chrome浏览器的电脑,PC和Mac均可,然后需要一部安装有微信的Android手机,以及一条USB数据线,用于USB调试。

然后,参考Google提供的官方文档:

远程调试 Android 设备使用入门 | 从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。

Google的文档中的方法适用于Chrome和Android上的Chrome连接进行调试,但是微信内置浏览器却不天然支持它。为了调试微信内置浏览器上的网页,我们还需要对微信做下配置。

在微信中任意的聊天窗口内,粘贴上网址:http://debugx5.qq.com

然后点击访问它,会打开一个配置页面。

在配置页面中,找到“信息”标签页,并勾选上它的打开TBS内核Inspector调试功能,然后就可以当成是 Android上的Chrome进行调试了。

没有tbs内核的手Q,第一次跳转到debugtbs.qq.com的时候要如何操作?
解决方案:

  1. 点击“安装线上TBS内核”,等待下载和安装TBS内核。
  2. TBS内核安装成功后,点击确认重启微信后再次扫码进入Inspect中转页面。

其余的步骤都和Google官方文档中所写的相同。

另外,还可以参考下腾讯官方给的指南文章:腾讯浏览服务-调试工具