25
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Android WebViewのデバック方法

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の中を覗く

参考

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
25
Help us understand the problem. What are the problem?