對Android APP內的WebView進行偵錯

早上收到 PM 訊息，說驗收時發現 APP 內的 WebView 沒有畫面
我打開也確實發現是一片空白

最麻煩的就是這種問題，完全沒有任何提示….

嘗試讀取錯誤訊息

隨便估狗了一下，發現原來可以直接用電腦版的 Chrome 去對手機 APP 內的 Chrome 偵錯，這應該就是我需要的東西了。

1. 配置程式

   WebView.setWebContentsDebuggingEnabled(true);
   

   對你的 Webview 呼叫此方法，即可允許從電腦版去讀取手機的 Chrome 資訊了

2. 手機用 USB 接上電腦，然後確定 USB 偵錯啟用了 (身為一個 Android Developer 這些應該都設定好了)
3. 開啟你的 Chrome，然後在網址列輸入 chrome://inspect
   一切順利的話即會在畫面中顯示你的 WebView 的標題，點選inspect即可啟用開發者工具。

召喚前端工程師

進了開發者工具之後就是前端工程師的工作了。
那如果你跟我一樣很不幸的也是那個前端工程師的話，你最後應該要可以從 console 跟一堆 js 檔裡面找出問題的癥結點。

我最後查到的原因是因為 WebView 內的localstorage不能用，所以噴了 NPE

正確解決問題

對 WebView 設定允許使用localstorage即可解決問題：

WebView webView = (WebView) view.findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true); //允許使用JS
webView.getSettings().setDomStorageEnabled(true); //允許使用localstorage

就這樣，客戶又可以繼續走驗收流程，我離結案以及尾款又更近一步了，真是可喜可賀。

參考資料

• 遠程調試 WebView : https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews?hl=zh-tw
• Android webview & localStorage : https://stackoverflow.com/questions/5899087/android-webview-localstorage