Android下的webview调试

WelliJhon

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. 点击“连接”按钮启动各种客户端的侦听器
  

clipboard.png

clipboard.png

  
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节点,是我们动态添加进去的。
clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

阅读 5.5k

WelliJohn
Android开发经验心得记录以及分享

坚持原创!!!

160 声望
7 粉丝
0 条评论

坚持原创!!!

160 声望
7 粉丝
宣传栏