Android+Chrome 真机调试H5页面实践
前言
使用weinre在真机上调试H5页面,有一个突出的缺点,就是无法调试真机上的样式,真机上页面动态创建的dom在weinre的Elements面板显示不出来,所以调试真机上的页面样式也就无从谈起。如下图所示,单页应用动态创建出来的dom,压根就显示不出来。不知道网上吹嘘weinre可以调试真机dom样式文章的作者,有没有亲自做过实验,weinre调试真机dom样式的功能真的能用嘛?好用嘛 ?真的要是遇到生产问题,weinre能定位真机和PC端浏览器手机模拟器下样式不一致的问题嘛?weinre难堪大用,但是问题依旧要解决。那么真机调试页面应用场景解决方案是什么呢?答案就是手机平台提供的移动端真机调试方案。在Android上是Android +Chrome组合,在IOS上是IOS+Safari组合。笔者使用的是Android手机,所以侧重介绍在Android手机上,如何调试H5网页。
调试准备
1.电脑和手机都安装了谷歌浏览器,并且PC端的谷歌浏览器可以翻墙(这一点很重要)。
2.在PC端谷歌浏览器地址栏输入 chrome://inspect/#devices 回车,勾选Discover USB devices选项
Chrome会自动检测手机上打开的H5页面,列出可调试的H5页面
3.让手机可以被PC上的Chrome浏览器检测到,许多人都卡在了这一步,导致功败垂成。正确的姿势是:
3.1 打开手机上的USB调试开关
笔者使用的手机USB调试开关设置方式是:
打开 设置==>开发人员选项==>USB调试,打开即可。
开发者选项在Android 4.2及以上版本中默认是隐藏的。打开开发人员选项的方法是:打开 设置==>关于手机,连续点击版本号7次即可。
其它机型的打开方式也应该大同小异。
3.2 使用USB线连接手机和电脑
这里有个隐藏的大坑。如果你使用的是仅有充电而没有数据传输功能的USB线,如下面所示的这种USB 三合一 充电线。那么你的手机就无法被PC端的Chrome浏览器检测到。
手机原配的USB充电线,都有数据传输功能。连接电源的话,没有多余的菜单选项。连接电脑之后,在手机的通知栏,会弹出USB连接方式的选项,默认USB连接是仅充电。要进行真机调试的话,除了不能选择仅充电和反向充电选项之外,另外几种模式都可以选。
在手机上做完这两步配置,PC端的Chrome浏览器才能检测到需要调试的设备。注意:每次重新连接时,都得重新选择USB连接模式为非充电模式。
用真机上的Chrome浏览器打开要调试的页面,要调试的页面就会显示在PC端Chrome浏览器扫描出的手机设备下方
可是点击了某个想要调试的页面下方的inspect之后,却报网页找不到。因为国内用户访问不到https://chrome-devtools-frontend.appspot.com。这个网站会提供当前手机浏览器内核的真机调试功能,解决方法就是让PC端的Chrome浏览器可以翻墙。
做了翻墙的配置之后,就能在PC端调试真机上的页面dom样式了。
你会发现,在PC端无法滑动要调试的页面,如果要调试页面底部的样式,该怎么办,其实很简单,就是在真机上把页面滑动到底部,PC端的调试页面也会跟着真机一块滑动到页面底部。然后在PC端调试页面修改页面底部元素样式,在真机会看到,修改的样式会同步生效。
如果你想在 微信/企业微信 中调试H5页面,需要分别用微信/企业微信扫描下方的二维码
页面打开之后,切换到信息面板,勾选--打开TBS内核Inspector调试功能。这个设置只需设置一次。
然后在微信/企业微信中打开你要调试的页面,就能调试微信/企业环境的H5页面样式了。
参考文章
[1] 微信下调试H5页面
[2] Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)
Android+Chrome 真机调试H5页面实践的更多相关文章
- Android:真机调试遇到的问题(INSTALL_FAILED_CANCELLED_BY_USER和INSTALL_FAILED_INSUFFICIENT_STORAGE)
Android:真机调试遇到的问题(INSTALL_FAILED_CANCELLED_BY_USER和INSTALL_FAILED_INSUFFICIENT_STORAGE) 刚开始做Android开 ...
- Android:真机调试遇到的问题(You need to use a Theme.AppCompat theme (or descendant) with this activity)
Android:真机调试遇到的问题(You need to use a Theme.AppCompat theme (or descendant) with this activity). 在调试&l ...
- android开发真机调试 相关东东
android开发真机调试 相关东东 我们做android开发的时候,可以用模拟器,也可以真机调试,但是电脑配置不高的话,模拟器,真的是慢的有的一说,所以我一直倾向于用真机调试,但是问题也就来了,模拟 ...
- Mac android studio真机调试步骤
Mac android studio真机调试步骤 这些步骤是在百度中查找的,当时记录下来了,过了个把月了,今天写出来,我也重温步骤. 1.找到android的SDK路径,一般是 /user/你的电脑名 ...
- android studio 真机调试
1.使用usb连接电脑,打开开发者选项,打开usb调试. 2.不能使用仅充电,修改为媒体设备(MTP) 3.如果无法连接可以使用豌豆荚或者金山手机助手连接. 4.运行android程序即可. 5.如果 ...
- android studio 开发android app 真机调试
大家都知道开发android app 的时候可以有2种调试方式, 一种是Android Virtual Device(虚拟模拟器) ,另一种就是真机调试. 这里要说的是真机调试的一些安装步骤: 1. ...
- Android在真机调试的设置方法
1. 设置android手机为USB调试模式.步骤: menu---> 设置 ---> 应用程序 ---> 开发 , 选择[USB调试] 2. 用USB连接手机和电脑,并确保成功.步 ...
- android机顶盒真机调试方法
最近接触电视APP开发,之前对Android开发也不太了解还一直以为不能真机调试.最近静下心来想一想肯定能真机调试的,我是我不知道而已.现在讲述一下真机调试的步骤: 1.进入设置--关于,连续点击版本 ...
- 【Android】Android Studio真机调试的问题统整
真机调试需要注意以下几个问题 [1]手机的USB调试需开启 [2]手机不能是仅充电模式,需要传输数据模式 [3]有些USB线会偷工减料,请拿一条没问题的线,例如买手机时原厂给的配线 [4]在PC端需要 ...
随机推荐
- CodeForces - 1250J The Parade 二分
题目 题意: 一共n种身高,每一个士兵有一个身高.你需要把他们安排成k行(士兵不需要全部安排),每一行士兵身高差距小于等于1.你要找出来最多能安排多少士兵 题解: 这道题很容易就能看出来就是一道二分, ...
- Codeforces Round #531 (Div. 3) C. Doors Breaking and Repairing (博弈)
题意:有\(n\)扇门,你每次可以攻击某个门,使其hp减少\(x\)(\(\le 0\)后就不可修复了),之后警察会修复某个门,使其hp增加\(y\),问你最多可以破坏多少扇门? 题解:首先如果\(x ...
- 在kubernetes集群里集成Apollo配置中心(1)之交付Apollo-adminservice至Kubernetes集群
1.部署apollo-adminservice软件包 apollo-adminservice软件包链接地址:https://github.com/ctripcorp/apollo/releases/d ...
- 弹性伸缩 AS(Auto Scaling)
根据业务需求和策略设置伸缩规则,在业务需求增长时自动为您增加 ECS 实例以保证计算能力,在业务需求下降时自动减少 ECS 实例以节约成本,弹性伸缩不仅适合业务量不断波动的应用程序,同时也适合业务量稳 ...
- Kubernets二进制安装(6)之部署主控节点服务--etcd
Etcd是Kubernetes集群中的一个十分重要的组件,用于保存集群所有的网络配置和对象的状态信息. 整个kubernetes系统中一共有两个服务需要用到etcd用来协同和存储配置,分别是 网络插件 ...
- Document This All In One
Document This All In One Document This 自定义注释 @author vscode 自定义注释 "docthis.automaticForBlockCom ...
- 如何用 js 实现一个 class 类函数
如何用 js 实现一个 class 类函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere ...
- GPU 加速 & WebGL
GPU 加速 & WebGL 开启 GPU 加速, 硬件加速 垃圾面试官,瞎忽悠 holy shit 美国想象力英语,前端 leader WebGL 加速 ??? 是什么鬼 ??? three ...
- windows 10 remote desktop
windows 10 remote desktop https://support.microsoft.com/en-us/help/4028379/windows-10-how-to-use-rem ...
- Paint Tool SAI
Paint Tool SAI PC 绘画工具 https://en.wikipedia.org/wiki/Paint_Tool_SAI refs https://www.systemax.jp/en/ ...