版權聲明：本文為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/