首先,需要打开手机的USB调试和微信的TBS 调试开关。
如果不打开TBS开关,Inspect时会检测不到任何微信的H5页面
使用微信扫码下方二维码,打开TBS调试开关:
普通网页:
小程序:
微信扫描上方二维码后,会出现以下页面:
等待跳转或点击“开启远程调试开关”
打开Inspect调试,点击确定
然后,打开chrome://inspect,点击Inspect。此时,如果没有Fan墙或使用离线开发者工具包,会出现空白页面:
解决方法:
方法1. Fan墙
方法2. 使用使用离线开发者工具包,
方法3. 使用Android的WebView调试工具
如果出现左侧空白,简单修改css样式激活一下就可以了,如下动图演示:
微信小程序inspect时出来3个页面,有的是打开page-frame.html页面,有的是index.html页面。可以都打开试试,有DOM树的才能显示。例如上图的百度网盘小程序。