一次开发多端使用的H5页面该如何调试

问题

在测试安卓APP中的H5的时候发现部分UI展示异常

例如该按钮的内容在IOS上正常，但是在安卓上却显示异常

异常

但是拷贝当前H5地址到安卓的浏览器上查看却是正常的

那是因为APP中内置的WebView与浏览器的WebView版本是不一样的

所以我们需要在对应WebView下进行调试查看

调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具，其中有我们熟悉的Dom树调试，JS调试，Network监视等等功能。

环境搭建

1. 开启手机上的USB调试功能
2. 打开Chrome浏览器，地址栏输入：Chrome://inspect，回车
3. Chrome会自动检测手机上打开的App，并列出可调试的WebView页面，如图：

页面

点击inspect就会弹出一个新的窗口

测试H5

注意：因为需要下载WebView所以需要翻墙

调试

这时我们就可以看到文字偏上是因为没有上下居中

span修改前

添加

line-height: normal

后内容就居中对齐了

修改后

小结

使用该方法可以调试小程序中嵌入H5、APP中嵌入H5的各种场景