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

#Android

橋本早樹

2016.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