Posted at

Android WebViewのデバック方法

More than 1 year has passed since last update.


Android WebViewでデバック

Android の WebView にアセットに登録したHTML・CSS・JavaScriptをChrome Developer Toolsを使ってデバックすることができます。

Web開発で使ったことのあるツールなので、それをAndroidアプリで使えるのは便利です。


デバックするときの条件


  • コンピュータに Chrome 32 以上がインストールされていること

  • USB ケーブルで Android 端末と接続できること

  • Android 端末で USB デバッグが有効になってること

  • Chrome for Android で使う場合は Android 4.0 以上

  • Webview アプリで使う場合は Android 4.4 以上

後半の2点だけ注意すれば、問題なさそうです。


実装

Chrome Developer Toolsを利用するために、以下のコードを記述します。

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

WebView.setWebContentsDebuggingEnabled(true);
}


デバック

Chrome のアドレスバーに chrome://inspect と入力します。

そうすると、WebView一覧が出てくるので、その中からデバックしたいWebViewに inspect をクリックします。


余談

Stethoというものを使えば、Chrome Developer Toolsでネットワーク状況も確認できるそうです。

また、SQLiteやPreferenceの中を覗くこともできそう。

この辺りをログに吐き出して確認していた部分でもあるので、Stethoを入れるのは良さそうです。

StethoでAndroidのNetwork Performanceを見る

Android: StethoでSQLite, Preferenceの中を覗く


参考