32450新蒲京网站 Android WebView调试利器之 Chrome De

2019-10-18 15:01 来源:未知

  工欲善其事必先利其器,之前做WinCE开发时,经常写一些小工具以提高开发调试的效率,如WinCE驱动调试助手、WinCE串口调试助手、WinCE6.0寄存器访问工具、WinCE远程桌面助手和S3C2410 IIC调试助手等,虽然有些功能不算完善,但在实际工作中还是发挥了一些作用。现在搞Android开发,基本不用自己造轮子了,Linux下有瑞士军刀美称的Busybox就足以处理大多数问题。

前言

Android开发时不时需要与H5交互这个时候如果没有能调试的工具效率简直是极低,我们项目就有一个活动页面需要与H5交互,当时还不知道有这么一个调试工具的时候只能用alert()(关键是这个问题他在本地运行是ok的在服务器才有问题这种问题最不好定位如果有这么一个工具那简直是So Easy)。当我觉得效率这么低的情况下,我在想是不是应该会有调试工具呢?(因为IOS有)
所以我就直接查google文档以下是官方文档

setWebContentsDebuggingEnabled

Enables debugging of web contents (HTML / CSS / JavaScript) loaded into any WebViews of this application. This flag can be enabled in order to facilitate debugging of web layouts and JavaScript code running inside WebViews. Please refer to WebView documentation for the debugging guide. The default is false.

启用对加载到此应用程序的任何WebView中的Web内容(HTML / CSS / JavaScript)进行调试。 可以启用此标志,以便于在WebViews中运行的Web布局和JavaScript代码的调试。 有关调试指南,请参阅WebView文档。 默认值为false。

我们看到这里查不到具体的用法,不过上面可以看到请参阅WebView文档那么下一步就看WebView documentation for the debugging guide.
了解到Android4.4或更高版本可以使用DevTools 可以在原生 Android 应用中调试 WebView 内容。

32450新蒲京网站 1

webviewdebug.gif

  今天就以测试一个字符设备驱动为例简单介绍下BusyBox的使用。

配置 WebViews 进行调试

必须从您的应用中启用 WebView 调试。要启用 WebView 调试,请在 WebView 类上调用静态方法 setWebContentsDebuggingEnabled。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

此设置适用于应用的所有 WebView。

  Busybox官网下载地址:

在 DevTools 中打开 WebView

32450新蒲京网站 ,在google浏览器中输入以下地址
chrome://inspect 页面将显示您的设备上已启用调试的 WebView 列表

32450新蒲京网站 2

1501923431031.png

上图有一个WebView远程调试也就是我起的标题,下面有一个inspect点击就进入到调试页面了如下图

32450新蒲京网站 3

1501923226512.png

Sources区域
Sources选项选择后在预览页的右边有一个Sources显示区域我这里需要调试的代码都写在test.html里面的,如果你是写在js里面的这个区域同样会显示您的Js文件点击打开后就显示内容区域了。
现在我们就可以调试了
Console区域
可以看到打印的log和当前变量的值和Android一样可以输入一个对象名就可以看到具体的值了如图我输入了一个test出来了对应的标签
内容区域
test.html是我的内容区域
可能出现的问题
1.如果上面的调试代码也加了再输入chrome://inspect 还是看不到列表(当然前提是应用要打开到webview页面)有可能第一次需要翻墙因为我的墙一直是开的这个是同事发现的。
2.这里我用的是JsBridge用的时候可能会出现点击没有反应
原因是(应该是二者没同步导致的)JsBridge和Js通讯写在js文件中的需要将代码库的WebViewJavascriptBridge.js文件放在当前项目的assets下面

  Android安装Busybox的方法及步骤可参考:

核心代码

Java

        //需要调试必要加入这一段代码否则在google浏览器里面看不到设备(如果是用的我这个库可以不用加因为库里面已经加了)
//        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//            WebView.setWebContentsDebuggingEnabled(true);
//        }
 mWebView.loadUrl("file:///android_asset/test.html");
        findViewById(R.id.activity_tv).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //callHandler app调用h5

                mWebView.callHandler("getH5", "test", new CallBackFunction() {
                    @Override
                    public void onCallBack(String data) {
                        Toast.makeText(WebViewActivity.this,"apploadh5",Toast.LENGTH_LONG).show();
                    }
                });
            }
        });
        //registerHandler h5调用app
        mWebView.registerHandler("getApp", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                function.onCallBack("0");
                Toast.makeText(WebViewActivity.this,data,Toast.LENGTH_LONG).show();
            }
        });

JavaScript
下面我把IOS和Android的初始化封装在一起了,这样就可以共用

<script type="text/javascript">
  var test = document.getElementById('test');
  var header = document.getElementById('header');

   var ua = navigator.userAgent.toUpperCase();
   var isIOS = ua.indexOf('IPHONE OS') != -1;//true ios设备
   var isAndroid = ua.indexOf('ANDROID') > -1 || ua.indexOf('ADR') > -1; //android终端
   function setupWebViewJavascriptBridge(callback) {
       if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }else{
          document.addEventListener(
              'WebViewJavascriptBridgeReady'
              , function() {
                  callback(WebViewJavascriptBridge)
              },
              false
            );

       }
       if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
       window.WVJBCallbacks = [callback];
       var WVJBIframe = document.createElement('iframe');
       WVJBIframe.style.display = 'none';
       WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
       document.documentElement.appendChild(WVJBIframe);
       setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0);
   }

   setupWebViewJavascriptBridge(function(bridge) { //app-调用H5
       bridge.registerHandler("getH5",  //
            function(data, responseCallback) {
                 header.style.display="none";
            }
        );

      test.onclick= function() {
          //H5调用APP
          bridge.callHandler('getApp', {'param1':'object','param2':'test'},
              function(data) {
                header.style.display="block";
              }
          );
       }

   });
</script>

布局文件

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/activity_tv"
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="40dp"
        android:text="点我执行H5方法"
     />

    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/activity_tv"
        />

</RelativeLayout>

  本例中主要使用了Busybox的hexdump的功能,将从字符设备中读取的数据按照16进制数据帧的方式显示出来,具体过程请看下图。

总结

当我们开发的时候感觉还有优化空间,就应该想想肯定还有更好的方案。当你认为会有更好的方案替代它的时候我觉得你就可以把这个方案给实现出来。

代码地址
努力的人运气从来都不会差。
只有想不到的,没有做不到的!

 32450新蒲京网站 4

  调试过程中使用到的命令如下:

adb remount
adb push E:busybox /system/bin
busybox --install /system/xbin

cat /dev/bonovo_key | hexdump -v -e '"[" 6/1 "%02x " "]n"'
echo -n "x22x01x12x02x00x00" > /dev/bonovo_key
echo -n "x22x00x12x02x00x00" > /dev/bonovo_key

  说明:bonovo_key是一个字符设备,专门处理按键信息,支持从串口设备获取远端MCU发过来的按键信息,也可以由上层应用写入按键信息,然后统一上报给按键处理的应用。利用echo、cat,配合Busybox的hexdump,不用自己编写测试应用就可以验证驱动,真爽!本例只是牛刀小试,Busybox更多强大功能有待发掘。不怕做不到,就怕想不到,各位看官发挥你们的想象力吧!

TAG标签:
版权声明:本文由32450新蒲京网站发布于葡萄游戏厅_棋牌游戏,转载请注明出处:32450新蒲京网站 Android WebView调试利器之 Chrome De