首先,需要打开手机的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. Metaphor of topological basis and open set

    The definition of topological basis for a space $X$ requires that each point $x$ in $X$ is contained ...

  2. eclipse 界面开发--windowbuilder

    插件地址: http://www.eclipse.org/windowbuilder/download.php http://www.eclipse.org/windowbuilder/

  3. window编程_消息分类

    Window应用程序利用Windows消息(Message)与应用程序及系统进行信息交换.消息分为:消息号:有事先定义好的消息名标识字节参数(wParam):用于提供消息的附加信息长字节参数(lPar ...

  4. exit()

    exit()通常是用在子程序中用来终结程序用的,使用后程序自动结束,跳回操作系统. exit(0) 表示程序正常退出,exit⑴/exit(-1)表示程序异常退出. exit() 结束当前进程/当前程 ...

  5. MyBatis(三)MyBatis的增删改查

    (1)接口中编写方法 public Emp getEmp(Integer id); public void addEmp(Emp emp); public void deleteEmp(Integer ...

  6. PHP 根据子ID递归获取父级ID,实现逐级分类导航效果

    代码: //当前路径 $cate=M('wangpan_class')->select(); function get_top_parentid($cate,$id){ $arr=array() ...

  7. 201771010126 王燕《面向对象程序设计(Java)》第七周实验总结

    实验七 继承附加实验 实验时间 2018-10-11 1.实验目的与要求 (1)进一步理解4个成员访问权限修饰符的用途: private--私有域或私有方法:只能在定义它的类中使用 public--公 ...

  8. python中matplotlib画图

    参考 https://blog.csdn.net/u010358304/article/details/78906768 https://www.cnblogs.com/onemorepoint/p/ ...

  9. Python学习之旅(三十八)

    Python基础知识(37):访问数据库(Ⅱ) 二.MySQL MySQL是Web世界中使用最广泛的数据库服务器.SQLite的特点是轻量级.可嵌入,但不能承受高并发访问,适合桌面和移动应用.而MyS ...

  10. Nginx+Https自己敲命令生成证书

    nginx配置https访问 一.准备 环境:centos6.8 nginx:1.13.6 二.开始       首先安装依赖包: yum install -y gcc gcc-c++ autocon ...