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/