ウェブアプリをデバッグする

console JavaScript API を使用して JavaScript をデバッグし、Logcat の出力メッセージを表示できます。Firebug や Web Inspector を使用したウェブページのデバッグに慣れている場合は、consoleconsole.log() など)の使用にも慣れているでしょう。Android の WebKit フレームワークは、ほとんど同じ API をサポートしているため、WebView でデバッグする際にウェブページからログを受け取ることができます。このセクションでは、デバッグに Console API を使用する方法について説明します。

WebView で Console API を使用する

WebView でデバッグする場合、Console API もサポートされています。コンソール メッセージを Logcat に表示するには、onConsoleMessage() メソッドを実装する WebChromeClient を提供する必要があります。次に、setWebChromeClient() を使用して WebChromeClientWebView に適用します。詳細については、WebView のドキュメントをご覧ください。

次の例は、WebView でコンソール API を使用する方法を示しています。

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webChromeClient = object : WebChromeClient() {

    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        Log.d("MyApplication", "${message.message()} -- From line " +
              "${message.lineNumber()} of ${message.sourceId()}")
        return true
    }
}

Java

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        return true;
    }
});

ConsoleMessage には、配信されるコンソール メッセージのタイプを示す MessageLevel オブジェクトも含まれます。messageLevel() を使用してメッセージ レベルを照会し、メッセージの重大度を判断してから、適切な Log メソッドを使用するか、他の適切なアクションを実行できます。

onConsoleMessage(String, int, String) または onConsoleMessage(ConsoleMessage) のいずれを使用している場合でも、ウェブページで console メソッドを実行すると、Android で適切な onConsoleMessage() メソッドが呼び出されるため、エラーを報告できます。たとえば、上記のサンプルコードでは、次のような Logcat メッセージが出力されます。

Hello World -- From line 82 of http://www.example.com/hello.html

デバッグに関連するその他のリソースは次のとおりです。

試験運用版のウェブ機能をテストする

Google Chrome の chrome://flags ページと同様に、WebView で試験運用版のウェブ機能をテストすることもできます。

手順は次のとおりです。

  1. WebView プレリリース チャンネル(ベータ版、開発版、カナリア版)のいずれかをインストールします。{:.external}

  2. テストデバイスの WebView チャンネルを切り替えて、インストール済みのプレリリース チャンネルにします。

  3. [WebView DevTools] ランチャーをクリックします。

    WebView DevTools のランチャー アイコン。
    図 1. デバイスにインストールされているアプリの WebView DevTools アイコン。
  4. DevTools で [フラグ] 項目をクリックし、有効または無効にする試験運用版の機能を検索します。この変更は、デバイス上のすべての WebView インスタンスに適用されます。

  5. アプリを停止して再起動し、新機能のテストを開始します。

フラグの切り替えについて詳しくは、WebView DevTools のドキュメントをご覧ください。