WebView のリモート デバッグ

Chrome Developer Tools を使用して、ネイティブ Android アプリの WebView をデバッグします。

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

TL;DR

  • ネイティブ 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 フラグの状態に影響されませんdebuggabletrue の場合にのみ 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 にタイトルが設定されている場合、タイトルも表示されます。

トラブルシューティング

chrome://inspect ページに WebView が表示されない場合は、次の解決方法をお試しください。

  • WebView のデバッグがアプリで有効になっていることを確認します。
  • 端末で、デバッグする WebView を使用しているアプリを開きます。その後、chrome://inspect ページを更新します。