首先,需要打开手机的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. Servlet(七):session

    Session 学习:问题: Request 对象解决了一次请求内的不同 Servlet 的数据共享问 题,那么一个用户的不同请求的处理需要使用相同的数据怎么办呢?解决: 使用 session 技术. ...

  2. 安卓开发app在后台运行时页面数据被系统清除后操作之重启APP

    在安卓开发过程中,当点击HOME键,将app运行在后台时,然后再点击app图标进入时,遇到了如下两种情况: 1.每次打开时,app的入口页面总是被执行. 2.当运行内存被其它应用占用完时,在进入app ...

  3. python基础篇_006_面向对象

    面向对象 1.初识类: # 定义一个函数,我们使用关键字 def """ def 函数名(参数): '''函数说明''' 函数体 return 返回值 "&qu ...

  4. 20165220 mybash

    使用fork,exec,wait实现mybash - 写出伪代码,产品代码和测试代码 - 发表知识理解,实现过程和问题解决的博客(包含代码托管链接) 1.fork 功能:创建一个新的进程 一个现存进程 ...

  5. Java 实现视频下载功能

    public static boolean httpDownload(String httpUrl, String saveFile) { // 1.下载网络文件 int byteRead; URL ...

  6. BZOJ.2616.SPOJ PERIODNI(笛卡尔树 树形DP)

    BZOJ SPOJ 直观的想法是构建笛卡尔树(每次取最小值位置划分到两边),在树上DP,这样两个儿子的子树是互不影响的. 令\(f[i][j]\)表示第\(i\)个节点,放了\(j\)个车的方案数. ...

  7. In the beginning, Coders create the repos and blogs

    ---恢复内容开始--- 这是一个新的博客 print(‘hello new world’) 这个博客叫做 brain in a jar, 不知道以后会不会改名. 只是因为偶然想到了普特南的缸中之脑理 ...

  8. [jzoj]2538.【NOIP2009TG】Hankson 的趣味题

    Link https://jzoj.net/senior/#main/show/2538 Description Hanks 博士是BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫H ...

  9. 08-Xml & Tomcat

    Xml & Tomcat Xml >eXtendsible   markup  language     可扩展的标记语言 XML  有什么用? 1. 可以用来保存数据 2. 可以用来做 ...

  10. nginx/php的redis模块扩展

    redis模块介绍 redis2-nginx-module 可以实现 Nginx 以非阻塞方式直接防问远方的 Redis 服务,可以启用强大的 Redis 连接池功能,进而实现更多的连接与更快速的访问 ...