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

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 プレリリース チャンネル(ベータ版、Dev、Canary)のいずれかをインストールします。{: .external}

  2. テストデバイスでWebView チャンネルを切り替えて、インストールされているプレリリース チャンネルにします。

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


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

  4. DevTools で [フラグ] をクリックし、有効または無効にする試験運用版機能を検索します。この変更は、デバイス上のすべての WebView インスタンスに適用されます。

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

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