Android -- Html5混合开发之WebView调试必备神器DevTools

1.前言

Android & Html5 混合开发本身并不难，难点在于Webview加载H5的异常定位。

本人最近在开发中遇到一个坑，Webview加载H5页面，当Webview调用H5的js方法将 图片的base64、宽度和高度 这几个参数传给H5后，H5需要根据宽高设置图片显示。

webView.loadUrl("javascript:setPNG('" + webViewId + "','" + strBase64
                    + "','" + bitmap.getWidth() / scale + "','" + bitmap.getHeight() / scale + "')");

问题来啦，网页上显示的图片大小和我传过去的宽高参数对不上，然后H5的开发人员一直说使用的是我这边给的参数。

真的是无语了。。。

为了证明是他的错，进一步查阅了相关资料，发现Chrome浏览器是可以调试Android中Webview的。

2.使用DevTools调试Android中Webview

2.1 设置Android中Webview

设置Webview，开启调试模式：

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

根据代码可知：
此属性在 Android 4.4（KitKat）或更高版本 上才生效。

提示： WebView调试不受应用程序 manifest 中debuggable标志的状态的影响。如果你想要仅在debuggable为true时启用WebView调试，在运行时测试这个标志。

 //使用Chrome调试WebView，Android4.4（KitKat）或更高版本上
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      if(!PadApplication.isDebug){
            WebView.setWebContentsDebuggingEnabled(true);
      }
}

2.2 在DevTools中打开WebView

在PC端Google预览器的网址栏输入chrome://inspect，可显示设备上可调试的 WebView 列表。

点击inspect进入调试视图

发现，Android中Webview直接被投射到Google浏览器上，和浏览器中的开发者模式差不多。

接下来就可以查看问题所在了，哈哈哈哈。。。

2.3 调试WebView白屏问题解决方案

换台设备，再次点击inspect，会出现白屏或404

原因：
对于国内的程序猿来说，由于无法访问 https://chrome-devtools-frontend.appspot.com，只能出现空白页面。

解决方法：

1. 方案一：
   首先，也不一定可以解决问题，必须要ping通 chrometophone.appspot.com才可以。
   方案: 在 C:\Windows\System32\drivers\etc\hosts 文件中添加以下语句：

    61.91.161.217    chrome-devtools-frontend.appspot.com
    61.91.161.217    chrometophone.appspot.com
   

   基本失败，或者可以搞个软件。

2. 方案二：下载离线开发者调试工具包（已支持56款手机，一劳永逸，永久使用！支持windows/mac/linux）
   Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法（不需要FQ）
   这个工具唯一的不好是：拦截号需要卖家那边一个一个添加，一开始我以为他文章里的拦截号都是默认就设置好的，然而不是，需要根据设备，一个个添加，还是有点儿坑的。