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）