開発マシンで実行されている Chrome ブラウザに組み込まれている DevTools を使用して、アプリで実行されている WebView をリモートで検査してデバッグできます。WebView のリモート デバッグに関する詳細なガイドについては、WebView のリモート デバッグをご覧ください。
DevTools の詳細については、Chrome DevTools の概要をご覧ください。
Chrome DevTools からの接続を有効にする
アプリの WebView では、デフォルトで Chrome DevTools からの接続は有効になりません。アプリケーションのコードで WebView のデバッグを有効にする必要があります。
- ハードウェアまたは仮想デバイスでアプリを実行できるように設定されていることを確認します。
setWebContentsDebuggingEnabledを呼び出して、アプリケーション コードで WebView デバッグを有効にします。通常、これは WebView が初期化されるActivityクラスまたはApplicationクラスで行われます。
setWebContentsDebuggingEnabled を条件付きチェックでラップして、デバッグが開発ビルドでのみ有効になり、本番環境では有効にならないようにすることをおすすめします。この設定は、アプリ内のすべての WebView に適用されます。
WebView のデバッグは、アプリのマニフェストの debuggable フラグの状態の影響を受けません。debuggable フラグが true に設定されている場合にのみ WebView のデバッグを有効にする場合は、次の例に示すように、実行時にこのフラグをテストします。
Kotlin
if (applicationInfo.flags and ApplicationInfo.FLAG_DEBUGGABLE != 0) {
WebView.setWebContentsDebuggingEnabled(true)
}
Java
if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
WebView.setWebContentsDebuggingEnabled(true);
}
WebView のデバッグを開始する
アプリコードで WebView デバッグを有効にし、アプリが実機または Android Emulator で実行されている場合は、Chrome DevTools を WebView に接続します。
- 開発マシンで Chrome を開きます。
chrome://inspectに移動します。chrome://inspectページで、[USB デバイスを検出] がオンになっていることを確認します。[Remote Target] セクションでデバイスを見つけます。
図 1. Chrome DevTools の [Inspect] ページに、デバッグに使用できるリモート ターゲットが表示されています。 デバイス名の下に、そのデバイスで実行されているデバッグが有効なすべての WebView が一覧表示されます。通常は、WebView in の後にアプリのパッケージ名が続きます。デバッグする WebView を見つけて、[検証] リンクをクリックします。
新しい DevTools インスタンスが開き、WebView の検査に使用できるようになります。
開発マシンのローカル ウェブサーバーからコンテンツを配信している場合は、WebView からローカル開発用サーバーにアクセスするで、デバイスまたはエミュレータから接続する方法をご確認ください。トラブルシューティングについては、Android デバイスをリモート デバッグすると WebView をリモート デバッグするをご覧ください。