對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

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

參考資料

Hi 喜歡這篇文章的話 或許可以請我喝杯咖啡
Buy me a coffeeBuy me a coffee