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/