Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
23
Help us understand the problem. What is going on with this article?
@taki4227

Android WebViewのデバック方法

More than 3 years have 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の中を覗く

参考

23
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
taki4227
中小企業のSIer、ベンチャー企業を経て、今はSHOWROOMのエンジニアをしています。Android・iOS・Flutterでアプリ開発をしてきました。良いものを作って届けたい、良いものを作ることに携わりたい。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
23
Help us understand the problem. What is going on with this article?