WebView のリモート デバッグ

Chrome デベロッパー ツールを使用して、ネイティブ Android アプリの WebView をデバッグできます。

Android 4.4（KitKat）以降では、DevTools を使用してネイティブ Android アプリの WebView コンテンツをデバッグします。

概要

  • ネイティブ Android アプリで WebView デバッグを有効にし、Chrome DevTools で WebView をデバッグします。
  • デバッグが有効な WebView のリストには、chrome://inspect でアクセスします。
  • WebView のデバッグは、リモート デバッグによるウェブページのデバッグと同じです。

デバッグ用の WebView を構成する

WebView デバッグは、アプリ内から有効にする必要があります。WebView デバッグを有効にするには、WebView クラスの静的メソッド setWebContentsDebuggingEnabled を呼び出します。

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

この設定は、アプリのすべての WebView に適用されます。

ヒント: WebView デバッグは、アプリのマニフェスト内の debuggable フラグの状態の影響を受けません。debuggable が true の場合にのみ WebView デバッグを有効にする場合は、実行時にフラグをテストします。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

DevTools で WebView を開く

[chrome://inspect] ページには、デバイスでデバッグが有効な WebView のリストが表示されます。

デバッグを開始するには、デバッグする WebView の下にある [inspect] をクリックします。リモートのブラウザタブの場合と同様に DevTools を使用します。

WebView 内の要素を検査する

WebView とともにリストされているグレーのグラフィックは、WebView のサイズと、デバイスの画面を基準とした位置を表します。WebView にタイトルが設定されている場合は、タイトルも一覧表示されます。

トラブルシューティング

chrome://inspect ページに WebView が表示されない場合

  • アプリで WebView デバッグが有効になっていることを確認します。
  • デバイスで、デバッグする WebView を含むアプリを開きます。次に、chrome://inspect ページを更新します。