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

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

今回は、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　のページが表示されます。

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

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

参考

• Google Developers