Android+Chrome 真机调试H5页面实践

时间:2023-03-08 16:09:58

前言

  使用weinre在真机上调试H5页面,有一个突出的缺点,就是无法调试真机上的样式,真机上页面动态创建的dom在weinre的Elements面板显示不出来,所以调试真机上的页面样式也就无从谈起。如下图所示,单页应用动态创建出来的dom,压根就显示不出来。不知道网上吹嘘weinre可以调试真机dom样式文章的作者,有没有亲自做过实验,weinre调试真机dom样式的功能真的能用嘛?好用嘛 ?真的要是遇到生产问题,weinre能定位真机和PC端浏览器手机模拟器下样式不一致的问题嘛?weinre难堪大用,但是问题依旧要解决。那么真机调试页面应用场景解决方案是什么呢?答案就是手机平台提供的移动端真机调试方案。在Android上是Android +Chrome组合,在IOS上是IOS+Safari组合。笔者使用的是Android手机,所以侧重介绍在Android手机上,如何调试H5网页。

Android+Chrome 真机调试H5页面实践

调试准备

1.电脑和手机都安装了谷歌浏览器,并且PC端的谷歌浏览器可以*(这一点很重要)。

2.在PC端谷歌浏览器地址栏输入  chrome://inspect/#devices 回车,勾选Discover USB devices选项

Chrome会自动检测手机上打开的H5页面,列出可调试的H5页面

Android+Chrome 真机调试H5页面实践

3.让手机可以被PC上的Chrome浏览器检测到,许多人都卡在了这一步,导致功败垂成。正确的姿势是:

3.1 打开手机上的USB调试开关

笔者使用的手机USB调试开关设置方式是:

打开  设置==>开发人员选项==>USB调试,打开即可。

Android+Chrome 真机调试H5页面实践

开发者选项在Android 4.2及以上版本中默认是隐藏的。打开开发人员选项的方法是:打开 设置==>关于手机,连续点击版本号7次即可。

其它机型的打开方式也应该大同小异。

3.2 使用USB线连接手机和电脑

这里有个隐藏的大坑。如果你使用的是仅有充电而没有数据传输功能的USB线,如下面所示的这种USB 三合一 充电线。那么你的手机就无法被PC端的Chrome浏览器检测到。

Android+Chrome 真机调试H5页面实践

手机原配的USB充电线,都有数据传输功能。连接电源的话,没有多余的菜单选项。连接电脑之后,在手机的通知栏,会弹出USB连接方式的选项,默认USB连接是仅充电。要进行真机调试的话,除了不能选择仅充电和反向充电选项之外,另外几种模式都可以选。

Android+Chrome 真机调试H5页面实践

在手机上做完这两步配置,PC端的Chrome浏览器才能检测到需要调试的设备。注意:每次重新连接时,都得重新选择USB连接模式为非充电模式。

Android+Chrome 真机调试H5页面实践

用真机上的Chrome浏览器打开要调试的页面,要调试的页面就会显示在PC端Chrome浏览器扫描出的手机设备下方

Android+Chrome 真机调试H5页面实践

可是点击了某个想要调试的页面下方的inspect之后,却报网页找不到。因为国内用户访问不到https://chrome-devtools-frontend.appspot.com。这个网站会提供当前手机浏览器内核的真机调试功能,解决方法就是让PC端的Chrome浏览器可以*。

Android+Chrome 真机调试H5页面实践

做了*的配置之后,就能在PC端调试真机上的页面dom样式了。

Android+Chrome 真机调试H5页面实践

你会发现,在PC端无法滑动要调试的页面,如果要调试页面底部的样式,该怎么办,其实很简单,就是在真机上把页面滑动到底部,PC端的调试页面也会跟着真机一块滑动到页面底部。然后在PC端调试页面修改页面底部元素样式,在真机会看到,修改的样式会同步生效。

Android+Chrome 真机调试H5页面实践

Android+Chrome 真机调试H5页面实践

如果你想在 微信/企业微信 中调试H5页面,需要分别用微信/企业微信扫描下方的二维码

Android+Chrome 真机调试H5页面实践

页面打开之后,切换到信息面板,勾选--打开TBS内核Inspector调试功能。这个设置只需设置一次。

Android+Chrome 真机调试H5页面实践

然后在微信/企业微信中打开你要调试的页面,就能调试微信/企业环境的H5页面样式了。

参考文章

[1] 微信下调试H5页面

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