JavaScript コンソールログを使用してデバッグする

このドキュメントでは、WebView 内のコンテンツをデバッグするために JavaScript コンソール ログを表示するさまざまな方法について説明します。

JavaScript コンソールにアクセスすると、JavaScript の console.log() ステートメントからエラー、警告、カスタム メッセージを表示して、WebView 内で何が起こっているかを診断できます。WebView によって生成された JavaScript コンソール メッセージを表示するには、次の 3 つの方法があります。

  • Chrome DevTools: WebView を Chrome DevTools に接続します。[コンソール] タブを開いて、WebView の JavaScript コンソール メッセージを確認します。

  • WebView DevTools アプリ: WebView DevTools アプリを使用して、デバイスで webview-log-js-console-messages フラグを有効にし、Logcat でコンソールログを表示します。

  • メッセージのインターセプト: WebChromeClient で onConsoleMessage() を実装して、JavaScript コンソール メッセージをインターセプトします。このアプローチについては、次のセクションで詳しく説明します。

開発マシンのローカル ウェブサーバーからコンテンツを配信している場合は、WebView からローカル開発用サーバーにアクセスするを参照して、デバイスまたはエミュレータから接続する方法を確認してください。

onConsoleMessage() でメッセージを傍受する

WebView のデバッグ時には、Console API がサポートされます。コンソール メッセージを Logcat に表示するには、onConsoleMessage() メソッドを実装する WebChromeClient を提供する必要があります。次に、setWebChromeClient() を使用して WebChromeClient を WebView に適用します。

WebChromeClient は WebView のヘルパークラスです。JavaScript アラートの表示、ウェブページのタイトルの変更、ブラウザのコンソールに送信されたメッセージの処理など、ウェブ コンテンツで発生する UI 関連のイベントを処理します。

次のコードは、JavaScript コンソール出力をインターセプトして Logcat にリダイレクトし、デバッグを容易にするように WebChromeClient を構成します。

Kotlin

val myWebView: WebView = findViewById(R.id.my_webview)
myWebView.webChromeClient = object : WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        // Log JavaScript console messages to Logcat
        Log.d("WebViewConsole", "${message.message()} -- From line ${message.lineNumber()} of ${message.sourceId()}")
        // Return true to indicate that the message has been handled
        return true
    }
}

Java

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        // Log JavaScript console messages to Logcat
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        // Return true to indicate that the message has been handled
        return true;
    }
});

onConsoleMessage() を使用すると、カスタム ロギング ロジックが JavaScript エラーのプライマリ ハンドラになり、webview-log-js-console-messages フラグのデフォルトの動作が置き換えられ、ログを任意の形式で出力できるようになります。

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

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

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