Android 上 WebView 和 H5 的调试

Android 端我们一般都是使用 WebView 加载 H5 网页，而我们用到和 H5 JS互调时，很多时候是跟前端开发人员联调来解决问题。
这里介绍如何利用 Chrome 浏览器的 chrome://inspect 来自己调试。

1，要让 H5 能调用我们的方法，需要注入 JS。

addJavascriptInterface(mJavascriptInterface, "Bridge");
public class JavascriptInterface {
    @android.webkit.JavascriptInterface
    public void jumpActivity(String uri) {
    	// h5 调用客户端方法
    }
}

2，要开启调试模式，必须打开 WebView Debug 开关；

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

3，打开 Chrome 浏览器，输入地址：chrome://inspect，注意勾选上USB，因为你调试一般也是用USB连接了手机。

4，找到你要调试的 H5 链接，点击底下的 inspect 按钮；

5，点开后看到如下图的页面，再在底下的 Console 里，输入 H5调用客户端的代码后回车，这样就可以直接调试客户端的方法是否可行。

6，想知道客户端调用 H5 方法是否成功：

// 先展示客户端代码
webView.loadUrl("javascript:onEventCallback('测试调用h5方法');");

如图，在 Console 中输入代码后回车，这样就会输出你的传参；

window.onEventCallback = (data) => {
      console.log(data);
};