首先,需要打开手机的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树的才能显示。例如上图的百度网盘小程序。

Chrome Inspect调试微信出现空白页面的解决方法的更多相关文章

  1. Android通过Chrome Inspect调试WebView出现404页面的解决方法

    无论是调试Web页面还是调试Hybrid混合应用,只要是调试Android的webview,都需要使用Chrome://inspect进行调试.但是国内开发者会出现404 Not Found错误: 解 ...

  2. Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)

    本文系博主原创,未经许可不得转载.如未经本人同意,私自转载或盗取资源提供下载,本人保留追究其法律责任的权利. 调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具 ...

  3. Chrome Inspect调试stetho出现空白的解决方法

    stetho可以使用chrome调试webview,有网友反映国内不行,亲测了一下是有解决方法的: Chrome://inspect 打开后会发现stetho的页面: 点击inspect,如果没有Fa ...

  4. Chrome DevTools调试微信X5内核页面

    起因:公司最近在做一个双十一的H5宣传页面,大概需求就是模拟微信视频来电,接通视频后弹出某某明星的视频巴拉巴拉@#%!!!~.看到需求我的第一反应是So easy,正当我码代码码的开心的时候,难题他来 ...

  5. Chrome Inspect调试微信出现404,需要FQ

    要么FQ,要么买个程序 见连接 http://www.cnblogs.com/slmk/p/7591126.html

  6. chrome://inspect调试html页面空白,DOM无法加载的解决方案

    chrome://inspect调试html页面空白,DOM无法加载的解决方案 先描述一下问题 有一段时间没碰huilder hybird app 开发了,今天调试的时候 chrome://inspe ...

  7. 混合开发使用Chrome Inspect调试WebView预览手机界面和定位元素

    使用Chrome Inspect调试混合应用可以帮助我们排查问题.例如定位元素,快速修改CSS样式并实时查看效果.其实微信开发也是一种混合开发模式,微信可以看做一个原生的Android App搭配了一 ...

  8. Cordova/Ionic开发的Android APP启用Chrome Inspect调试的方法

    Cordova/Ionic开发的Android APP,需要启用WebView的调试模式,才可以在Chrome浏览器中输入chrome://Inspect,然后使用大家熟悉的开发者工具进行调试.不启用 ...

  9. HBuilder离线打包启用Chrome Inspect调试

    解决方法: 修改这个文件 assets/data/dcloud_control.xml <msc version="1.9.9.39354" debug="true ...

随机推荐

  1. beta冲刺6/7

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(6/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 ppt制作 视频拍摄 接下来的计划 准备答辩 ...

  2. matplotlib等高线图-【老鱼学matplotlib】

    等高线图是在地理课中讲述山峰山谷时绘制的图形,在机器学习中也会被用在绘制梯度下降算法的图形中. 因为等高线的图有三个信息:x, y以及x,y所对应的高度值. 这个高度值的计算我们用一个函数来表述: # ...

  3. entityframework单例模式泛型用法

    public class yms_Entity<T> where T :DbContext { private static T _instance; public static read ...

  4. Windows10 永久激活查询/激活时间查询/激活查询命令/激活码查询

    1.使用 Windows + R组合快捷键打开运行命令框 运行: slmgr.vbs -dlv       命令 可以查询到Win10的激活信息,包括:激活ID.安装ID.激活截止日期等信息.看不懂的 ...

  5. linux(CentOS)磁盘挂载数据盘

    linux(CentOS)磁盘挂载数据盘:第一步:查看是否存在需要挂载的磁盘: sudo fdisk -l 第二步:为需要挂载的磁盘创建分区: sudo fdisk /dev/vdb 执行中:依次选择 ...

  6. jsp页面上的下拉框案例(Struts2)

    <s:select></s:select>包含的属性有:list=""  :name=""  :value=""   ...

  7. Tomcat Getshell

    安装环境 账号密码路径:Tomcat6.0/conf/tomcat-users.xml 弱口令扫描工具 后台默认登陆地址:html://xx.xx.xx.xx/manager/html 后台war f ...

  8. Android Notification 详解

    转载自  http://www.cnblogs.com/travellife/  Notification 概述 Notification,是一种具有全局效果的通知,可以在系统的通知栏中显示.当 A ...

  9. ecshop 2.x 3.x sql injection/rce payload

    首先,感谢ringk3y的分析:http://ringk3y.com/2018/08/31/ec ... %E6%89%A7%E8%A1%8C/ 大家跟一遍代码基本上都能弄明白漏洞的原理,整个漏洞的构 ...

  10. Python练手例子(5)

    25.求1+2!+3!+...+20!的和. 程序分析:此程序只是把累加变成了累乘. #python3.7 n = 0 s = 0 t = 1 for n in range(1, 21): t *= ...