Android下的webview调试

WebView在Android上的调试：

写本篇文章的原因：由于现在的移动端项目集成h5越来越多，但是在排查问题的时候都是前端开发在浏览器中打开h5的地址，然后在调试h5页面的问题，这种调试能发现不少问题，但是效率很低，而且不是在嵌套在手机上显示，在手机端的适配问题很难发现，还有如果是涉及到要和native交互的数据这样也没办法测了。后面我在网上看到有很多移动端的webview调试的文章，但是我们现在好多公司貌似对这方面的调试还是不太正规，所以写这篇文章，是唤起大家能用正确的方法，来进行webview在Android上的调试，走正规军道路，并且这种提示定位问题还是很方便的，最主要还是提高了开发效率。
前提：
1.开启了usb调试功能
2.webview中添加：
if (BuildConfig.DEBUG && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

WebView.setWebContentsDebuggingEnabled(true);

}
一、无需翻墙的调试策略
1.现在以window电脑为例：

1.1首先在电脑上面下载Windows版本的DebugGap软件包（下载链接：http://www.debuggap.com/），下载完成后解压下来。
1.2电脑上运行远程DebugGap
  a. 双击可执行文件“DebugGap”运行应用程序
  b. 通常情况下，DebugGap可以自动获取IP，并设置默认的端口，如果没有，你可以手动设置
  c. 点击“连接”按钮启动各种客户端的侦听器
  

  
1.3在客户端上配置
  a. 在您的h5项目中要进行测试的html界面中引入debuggap.js。<script src="debuggap.js" type="text/javascript"></script>
  b. 当您的h5应用程序加载时，您的应用程序将会有一个蓝色的地方，点击会出现一个四叶三叶草的东西，点击“配置”，显示配置页面。输入与远程DebugGap上的主机和端口相同的主机和端口，例如192.168.1.4:11111，然后点击“连接”按钮
1.4电脑端远程DebugGap将检测即将到来的客户端，开发人员可以单击每个客户端进行调试。

2.如下图，我们可以看到在我们的应用程序中的html的布局，head中的节点，下面的script节点，是我们动态添加进去的。

二、翻墙的调试策略
1.打开chrome浏览器，输入chrome://inspect/#devices，这个时候我们能看到连接的手机的应用程序上运行的h
5调试点。
2.Android调试远程的webview的问题：
对应的js的每个网络请求，我们都可以在NetWork的panel中看到：

如果是网络的问题的话，我们可以看到panel的话，可以看下response是不是我们需要的数据。
3.网络访问发起，到最后收到数据的时间判断：
TTFB（TIme to first byte）是服务端接收到数据，然后返回数据，中间的时间

4.如果是对应的我们给js传数据没有接收的，我们可以在webview中进行打断点：可以修改对应的js文件，就可以达到一个远程的调试了，这样可以看到对应的js有没有拿到我们的数据了。

5.对应在console中打印日志信息：

如果大家有更好的调试办法，也希望大家能够共享出来，拿出来讨论下，谢谢。