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

 

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

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

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

普通网页：

微信里给自己发送http://debugx5.qq.com。然后打开，设置Inspect调试

小程序：

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

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

打开Inspect调试，点击确定

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

解决方法：

　　方法1. FanQ

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

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

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

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