首先,需要打开手机的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. Vue基础语法

    一.挂载点,模版和实例 二.Vue实例中的数据,事件和方法 1.v-html指令和v-text指令 v-html :不转义 v-text :转义过后的内容 <div id="root& ...

  2. Eclipse4.8.0的svn插件离线安装说明

    Eclipse4.8.0离线安装Subclipse(SVN插件)的方法: Subclipse迁到github上了,地址:https://github.com/subclipse/subclipse/w ...

  3. CentOS下安装yum源的流程和操作

    一般公司都用Linux来搭建服务器,Linux安装软件时能够用yum安装依赖包是一件非常简单而幸福的事情,因为你只需一个简单的安装命令yum install []即可安装相应的软件,yum工具会自动的 ...

  4. Team

    队名 正义联盟 团队成员 211606301 蔡振翼(队长) 211606445 肖志豪 211606382 吴文清 211606370 刘华强 211605240 谢孟轩 211614269 林凯 ...

  5. 基于for循环的呼吸灯

    #include "stm32f10x.h" #include "stm32f10x_gpio.h" //#include "led.h" ...

  6. XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Korea

    A. Donut 扫描线+线段树. #include<cstdio> #include<algorithm> using namespace std; typedef long ...

  7. vue中Prop父子传值方法

    在用vue做项目的过程中感觉很好玩,特做下笔记... 父组件中: <template> <div> <fpdx-modal :zbArr="polygonArr ...

  8. SpringMVC用到的jar包

    SpringMVC用到的jar包 自己搭建一个SpringMVC框架时需要用到相应的jar包,参考下载网址: http://repo.spring.io/release/org/springframe ...

  9. jquery复制图片

    <div class="img-div">           <a href="javascript:void(0);"><im ...

  10. 07_ for 练习 _ sumOfOdd

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...