WebView DevTools アプリを使用してデバッグする

WebView DevTools アプリは、システム WebView コンポーネント自体を管理およびデバッグするためのデバイス上のユーティリティです。これは、開発用マシンで実行され、WebView のインスタンス内で実行されているライブ ウェブ コンテンツ（HTML、CSS、JavaScript）をリモートでデバッグできる Chrome DevTools とは異なります。

WebView DevTools は、WebView システム コンポーネントとともにデバイスに自動的にインストールされるコンパニオン アプリです。アプリは次の 4 つのエリアに分かれています。

  • ホーム: バージョン情報を表示し、デフォルトの WebView をプレリリース チャンネル バージョンに切り替えます。
  • クラッシュ: WebView のクラッシュ レポートを一覧表示してアップロードします。
  • フラグ: WebView の動作を変更するデベロッパー フラグを設定します。
  • ネットワーク ログ: WebView の低レベルのネットワーク ログを一覧表示して共有します。

WebView DevTools を実行する

Android 16 以降を搭載し、デベロッパー モードが有効になっているデバイスでは、[設定] > [システム] > [開発者向けオプション] > [WebView DevTools] に移動して WebView DevTools を起動できます。

最近のすべての Android リリースでは、adb コマンドを使用して WebView DevTools を起動できます。

adb shell am start -a "com.android.webview.SHOW_DEV_UI"

また、ベータ版、開発版、カナリア版などの WebView のプレリリース チャンネルをインストールしている場合は、WebView DevTools のランチャー アイコンを使用できます。

WebView DevTools のランチャー アイコン。
図 1. デバイスにインストールされているアプリの WebView DevTools アイコン。

WebView DevTools を初めて実行すると、有効にしたデベロッパー フラグを一覧表示する永続的な通知を表示するために、通知権限がリクエストされます。

プレリリース チャンネルに切り替える

最新の WebView の機能とバグの修正は、まずプレリリース チャンネルで利用可能になります。WebView DevTools を使用してデバイスの WebView プロバイダを切り替えることで、アプリをこれらの変更に対してテストできます。プレリリース チャンネルに対するテストは、アプリが今後の WebView バージョンと互換性があることを、ユーザーにリリースする前に確認するのに役立ちます。

  1. 安定性と最新の変更へのアクセスとの間で優先するトレードオフに応じて、WebView の ベータ版、開発版、または Canary 版をインストールします。
  2. WebView DevTools アプリを開き、[Change Provider] をタップします。
  3. このオプションが表示されていない場合は、右上にあるその他アイコンをタップして、[WebView プロバイダを変更] を選択します。

詳しくは、WebView ベータ版、デベロッパー版、カナリア版を試すをご覧ください。

WebView チャンネル

WebView チャンネルは Chrome のリリース チャンネルに基づいています。各チャンネルは、コードの安定性と鮮度のレベルを表します。各 WebView チャネルを使用するタイミングの概要は次のとおりです。

  • カナリア版: 毎日更新されます。このチャンネルには、新機能やバグの修正など、Chromium コードベースにマージされた最新の変更がすぐに反映されます。最近マージされた変更を含む WebView でウェブアプリがどのように動作するかをテストする場合は、このチャンネルを使用します。ただし、このチャンネルは不安定であったり、バグが含まれている可能性があることに注意してください。

  • Dev: 週に 1 ～ 2 回更新されます。このチャンネルは Canary よりも安定していますが、最先端の変更が含まれています。新しい機能をテストしたいが、カナリア版よりも無関係なバグのリスクを軽減したいデベロッパーに最適です。

  • ベータ版: ほぼ毎週更新され、メジャー アップデートは 4 週間ごとに行われます。このチャンネルでは、WebView の次期安定版リリースの機能を、安定版リリースの約 4 ～ 6 週間前にプレビューできます。これを使用して、WebView の今後のリリースに対してウェブアプリをテストし、互換性を確認します。

  • Stable: メジャー リリースは 4 週間ごと、緊急のバグ修正のためのマイナー リリースは 2 ～ 3 週間ごとに行われます。これは WebView の製品版チャンネルで、すべてのユーザーにロールアウトされます。他のチャンネルでテストが行われているため、最も安定したチャンネルです。これは、ウェブアプリを WebView で実行して、ほとんどのユーザーが現在使用している方法でウェブアプリを体験したい場合に使用します。たとえば、ユーザーが報告したバグを再現する場合などです。

クラッシュ UI

アプリの開発中に WebView のクラッシュが発生した場合は、WebView DevTools を使用して、クラッシュの一覧表示、アップロード、バグレポートの提出を行うことができます。

  1. アプリがクラッシュしたら、アプリを再起動して、クラッシュ レポートが生成されるようにします。
  2. WebView DevTools アプリを開き、[Crashes] をタップします。

詳細については、クラッシュ UI のドキュメントをご覧ください。

フラグ UI

WebView DevTools アプリを使用すると、デバイス全体のすべての WebView の動作を変更するのに役立つフラグをいくつか設定できます。ほとんどのフラグは WebView 自体の開発にのみ使用されますが、一部のフラグは Android アプリ デベロッパーにとって有用です。

  • highlight-all-webviews: WebView を識別するために、WebView の上に黄色の色合いを追加します。
  • net-log: WebView のネットワーク アクティビティの低レベルのロギングを有効にします。
  • webview-log-js-console-messages: JavaScript コンソール ログを Logcat に表示します。
Flags UI を表示する WebView DevTools アプリ。
図 2. WebView DevTools アプリの Flags UI。

詳細については、フラグ UI のドキュメントをご覧ください。

ネットログ

Chrome DevTools を使用して WebView でサーバー接続の問題を解決できない場合は、WebView DevTools を使用して低レベルのネットワーク ログをキャプチャします。

  1. アプリコードで WebView デバッグを有効にします。
  2. WebView DevTools で、[フラグ] を開き、net-log を見つけてオンに切り替えます。アプリを再起動してフラグを有効にします。
  3. デバッグするネットワーク動作をトリガーするアクションを実行します。問題を再現したら、アプリを閉じます。
  4. WebView DevTools の [Net Logs] セクションを開いて、ネットログ ファイルを見つけて共有します。
  5. JSON ログファイルを Netlog Viewer（ネットワーク ログを可視化するためのオンライン ツール）に読み込んで、低レベルのネットワーク イベント、ソケット情報、タイミングの詳細を調べることができます。

詳しくは、WebView での Net デバッグをご覧ください。