Android WebView与H5联调技巧

版权声明:本文为xing_star原创文章,转载请注明出处!

本文同步自http://javaexception.com/archives/78

背景:

突然想写一篇关于Android WebView与H5联调技巧的文章,在这块内容也算是小有心得。平时在工作中,发现不少同事,对这块很迷糊,在联调过程中出现了问题,不知道究竟是哪一端的问题,究竟是h5造成的,还是Android造成的,分析不出原因,真是不好说啥,本着对自我有着较高的要求,那么就Android,H5一起搞定吧。

在此之前可以看一篇文章,配置好调试所需要的基础环境。这篇文章写的不错,可以参考 利用 Chrome 开发者工具远程调试 Android 中的原生 WebView。

心得技巧:

开启WebView的debug模式后,Android设备连接USB,打开chrome浏览器,输入chrome:inspect,然后手机App打开对应的h5页面,在Chrome里面就能看到这个网页了,下面就是调试的步骤。

在Chrome:inspect页面,点击打开手机h5对应的url,会看到Chrome里面开始加载相关资源,比如css文件,js文件等等。当然了我们可以点击Chrome上的刷新按钮,这样会重新加载一次当前的h5页面。这个时候可以清晰的看到加载资源的过程。相关的css,js,html的页面都可以在Chrome浏览器上看到,这些页面的源代码也能看到。这才是我们该关注的。

从这一步开始,我们可以从程序执行的先后顺序调试,一开始加载h5页面肯定是在Android这边的代码,断点可以打在Android里面相关调用的地方,比如webView.loadUrl()这块代码附近,还有注入js的逻辑等等,Android跟h5交互都是有桥接的,这款也可以加上断点,这个需要结合自己使用的是哪种jsbridge或者说是Interface这样的方式等等。

常见出现问题的是注入js有问题,相关的js方法并没有注入成功。这一步可以在断点打在h5页面上查看,这里需要仔细梳理下h5的初始化逻辑,看看h5是如何对这些原生方法进行包装的,初始化的判断逻辑是啥,有时候真的需要仔细,header,userAgent等等都可能导致问题,还有就是查看类似window.jsbridge对象的内部方法声明,有时候方法不生效,可能是参数不对,这都有可能。

通常我们看到某个js文件某行代码报红,就意味着这行出现问题,问题可能就在这,产生的原因,需要看上面相关的代码。出现js错误后,下面的js代码就不会在执行了。当然了我们也可以手动修改js文件的代码,这是可以的,扯远一点,这种就可以做最简单的作弊,黑产等等。

碰到这种联调问题,需要仔细分析上下文条件,从程序执行顺序的第一步开始打断点,分析,同时观察对应变量的值,有时候需要h5断点,Android代码都打开着,会来回切换,总之顺着程序执行顺序流的角度来分析,最终肯定可以定位出问题所在。实力打脸甩锅的同事。。

当然了有时候也需要h5同事的配合,比如有js代码压缩,用的是vue.js之类的,可以让对应的同事配合下,关掉代码压缩,方便联调。

参考资料:

http://yifeng.studio/2017/04/29/debug-android-webview-with-chrome-dev-tools/

你可能感兴趣的:(android)