1.前言
Android & Html5 混合开发本身并不难,难点在于Webview加载H5的异常定位。
本人最近在开发中遇到一个坑,Webview加载H5页面,当Webview调用H5的js方法将 图片的base64、宽度和高度 这几个参数传给H5后,H5需要根据宽高设置图片显示。
webView.loadUrl("javascript:setPNG('" + webViewId + "','" + strBase64
+ "','" + bitmap.getWidth() / scale + "','" + bitmap.getHeight() / scale + "')");
问题来啦,网页上显示的图片大小和我传过去的宽高参数对不上,然后H5的开发人员一直说使用的是我这边给的参数。
真的是无语了。。。
为了证明是他的错,进一步查阅了相关资料,发现Chrome浏览器是可以调试Android中Webview的。
2.使用DevTools调试Android中Webview
2.1 设置Android中Webview
设置Webview,开启调试模式:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
根据代码可知:
此属性在 Android 4.4(KitKat)或更高版本 上才生效。
提示: WebView调试不受应用程序 manifest 中debuggable标志的状态的影响。如果你想要仅在debuggable为true时启用WebView调试,在运行时测试这个标志。
//使用Chrome调试WebView,Android4.4(KitKat)或更高版本上
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if(!PadApplication.isDebug){
WebView.setWebContentsDebuggingEnabled(true);
}
}
2.2 在DevTools中打开WebView
在PC端Google预览器的网址栏输入chrome://inspect
,可显示设备上可调试的 WebView 列表。
点击inspect
进入调试视图
发现,Android中Webview直接被投射到Google浏览器上,和浏览器中的开发者模式差不多。
接下来就可以查看问题所在了,哈哈哈哈。。。
2.3 调试WebView白屏问题解决方案
换台设备,再次点击inspect
,会出现白屏或404
原因:
对于国内的程序猿来说,由于无法访问 https://chrome-devtools-frontend.appspot.com,只能出现空白页面。
解决方法:
-
方案一:翻墙
首先,翻墙也不一定可以解决问题,必须要ping通chrometophone.appspot.com
才可以。
翻墙方案: 在 C:\Windows\System32\drivers\etc\hosts 文件中添加以下语句:61.91.161.217 chrome-devtools-frontend.appspot.com 61.91.161.217 chrometophone.appspot.com
基本失败,或者可以搞个翻墙软件。
-
方案二:下载离线开发者调试工具包(已支持56款手机,一劳永逸,永久使用!支持windows/mac/linux)
Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)
这个工具唯一的不好是:拦截号需要卖家那边一个一个添加,一开始我以为他文章里的拦截号都是默认就设置好的,然而不是,需要根据设备,一个个添加,还是有点儿坑的。