Android&Html5混合开发WebView调试必备神器DevTools
Android开发和Html5开发,对于其对应的专业程序开发人员来说都不是太难.但是对于两者结合的混合开发来说,很多人都望而却步.混合开发其本身并不难,真正让大家不安的是WebView加载H5的异常定位.调试困难症在我们团队出现过,我在面试的过程中也刻意去了解大家对Android中js调试的掌握程度,但现实是:大家都是浅尝辄止,使用最原生的js调用Android方法打印调试信息.这样的调试,效率之低下,问题定位之困难,可想而知.
然而,为了项目的需求,我们为了更好的保证效果和布局跨平台,Android&H5混合开发是我们不错的选择.那么解决Webview+H5的调试问题变得尤为重要,很庆幸google爸爸已经早有准备,今天就让我们一起去探索吧.
一、准备工作
注意：
手机端安装Google浏览器移动版 [手机端安装Google浏览器一定要比PC端安装的Google浏览器的版本低]
手机端和PC端的google浏览器都要打开
二、前提条件
Android版本应该在Android 4.4（KitKat）或更高版本上
使用Chrome开发人员工具调试原生Android应用中的WebView，Android版本应该在Android4.4（KitKat）或更高版本上
使用DevTools在原生Android应用中调试WebView内容。
三、使用步骤
1.在需要调试的应用中必须调用WebView类上的静态方法setWebContentsDebuggingEnabled 启用WebView调试。此设置适用于所有应用程序的WebView。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}提示： WebView调试不受应用程序 manifest 中debuggable标志的状态的影响。如果你想要仅在debuggable为true时启用WebView调试，在运行时测试这个标志。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
{ WebView.setWebContentsDebuggingEnabled(true); }
}切换成web定位元素
public void contextWebview( ) {
Set<String> contextNames = driver.getContextHandles();
for (String contextName : contextNames) {
logger.info("Context Names Found ："+contextName);
}
BasePage basePage=new BasePage();
basePage.driver= (AppiumDriver<MobileElement>) driver.context((String) contextNames.toArray()[1]);
logger.info("I switched from native to "+driver.getContextHandles());
}切换成Native APP定位元素
public void returnToNayive() {
driver.getContextHandles().forEach((context) -> {
if (context.toString().contains("NATIVE_APP")) {
BasePage basePage=new BasePage();
basePage.driver= (AppiumDriver<MobileElement>) driver.context(context.toString());
}
});
}需要配置参数chromedriverExecutableDir，谷歌驱动所在位置
capabilities.setCapability("chromedriverExecutableDir",
DeviceAppEntity.CHROMEDRIVEReXECUTABLEDIR);
public static final String CHROMEDRIVEReXECUTABLEDIR = "C:\\Program Files\\Appium\\resources\\app\\node_modules\\appium\\node_modules\\appium-chromedriver\\chromedriver\\win";
2 在 DevTools 中打开一个 WebView
在PC端Google预览器的网址栏输入chrome://inspect，可以显示设备上可调试的 WebView 列表
点击inspect可以进入调试视图
四、调试WebView白屏问题解决方案
1.点击inspect白屏的原因:
对于国内的程序猿来说，由于无法访问 https://chrome-devtools-frontend.appspot.com，只能出现空白页面：
2.解决的方案:
Host文件大全：https://github.com/tangdekun/hosts-1
但是很不幸,我都尝试过,但是失败了
方案二: 下载离线开发者调试工具包（已支持56款手机，一劳永逸，永久使用！支持windows/mac/linux）
本人是采用方案二,花10块钱,轻松解决问题,还提供相关答疑,服务挺到位,挺一下.
Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法（不需要FQ）
有需要的也可以评论区私我,但是毕竟是别人的作品,大家能买就不要私我
3.chrome浏览器多开的方法
需求:
离线开发者调试工具包有一个通用包和一个专用包,用来处理不同的情况.这时候需要通过两个不同的浏览器打开,需要chrome浏览器多开.
Chrome浏览器在上网的过程中，会保存一些用户数据，如缓存、cookie、收藏的网页等信息。
这些信息的保存位置是可以设置的。方法也很简单：
桌面上复制一个Chrome的快捷方式，编辑属性，添加–user-data-dir参数即可
新建E:\chrome文件夹
--user-data-dir = E:\chrome
注意:
–user-data-dir之前需要有一个空格,否则路径找不到
多开之后,每个浏览chrome离线包应该存放的路径就会不同了
注意有些设备/平板无法显示页面视图,但是不影响调试,原因不明,有知道的可以在评论回复,如下图
