Android WebView调试利器之 Chrome DevTools

前言

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 内容。

配置 WebViews 进行调试

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

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

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

在 DevTools 中打开 WebView

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

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

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下面

核心代码

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.οnclick= 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>

总结

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

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

本文转自：
Android WebView调试利器之 Chrome DevTools