[Android][Tips] WebViewで開いているページをデバッグする

[Android][Tips] WebViewで開いているページをデバッグする

Clock Icon2016.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

モバイルアプリサービス部の橋本です。 

今回は、AndroidでWebViewを利用する場合に役立つデバックツールを紹介します。
※ Android 4.4 (KitKat) 以降で利用可能です。

WebViewで開いているページのデバッグ

WebViewのサンプルアプリを準備します。

  • activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</RelativeLayout>
  • MainActivity.java
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String url = "https://dev.classmethod.jp/";
        WebView webView = (WebView) findViewById(R.id.web_view);
        webView.loadUrl(url);
    }
}

続いて、WebViewのデバッグを有効にする、以下の設定を追加します。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

サンプルなので、とりあえずMainActivity#onCreateに入れておきます。

  • MainActivity.java
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }

        String url = "https://dev.classmethod.jp/";
        WebView webView = (WebView) findViewById(R.id.web_view);
        webView.loadUrl(url);
    }
}

ここまでで準備完了です。
ビルドを実行すると Developers.IO のページが表示されます。

screenshot20160707122753

デバッグビルドで端末を接続したまま、PCから Chrome を起動し、 chrome://inspect ページを表示します。

スクリーンショット_2016-07-07_12_25_21

画面内にデバッグ中の端末が表示されるので、inspect をクリックすると、AndroidのWebViewで開いているページを、Chromeのデベロッパーツールでデバッグすることが可能になります!

スクリーンショット 2016-07-07 12.30.59

参考

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.