Android WebView与H5联调技巧

本文同步自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/