Chrome Inspect调试微信出现空白页面的解决方法

时间:2023-01-24 08:33:22

首先,需要打开手机的USB调试和微信的TBS 调试开关。

如果不打开TBS开关,Inspect时会检测不到任何微信的H5页面

使用微信扫码下方二维码,打开TBS调试开关:

普通网页

Chrome Inspect调试微信出现空白页面的解决方法

小程序

Chrome Inspect调试微信出现空白页面的解决方法

微信扫描上方二维码后,会出现以下页面:

Chrome Inspect调试微信出现空白页面的解决方法

等待跳转或点击“开启远程调试开关”

Chrome Inspect调试微信出现空白页面的解决方法

打开Inspect调试,点击确定

然后,打开chrome://inspect,点击Inspect。此时,如果没有Fan墙或使用离线开发者工具包,会出现空白页面:

Chrome Inspect调试微信出现空白页面的解决方法

解决方法:

  方法1. Fan墙

  方法2. 使用使用离线开发者工具包

  方法3. 使用Android的WebView调试工具

如果出现左侧空白,简单修改css样式激活一下就可以了,如下动图演示:

Chrome Inspect调试微信出现空白页面的解决方法

 微信小程序inspect时出来3个页面,有的是打开page-frame.html页面,有的是index.html页面。可以都打开试试,有DOM树的才能显示。例如上图的百度网盘小程序。