Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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 ページを更新します。