Android 原生与h5混合开发 框架 android和h5混合开发

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离线包应该存放的路径就会不同了
注意有些设备/平板无法显示页面视图,但是不影响调试,原因不明,有知道的可以在评论回复,如下图