38
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Android WebViewのデバック方法

Posted at

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

##参考

38
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?