ウェブアプリのデバッグ

Android 4.4 以降を搭載するデバイスでウェブアプリをテストしている場合は、Chrome デベロッパーツールを使用して WebView でウェブページをリモートデバッグしながら、古いバージョンの Android を引き続きサポートできます。詳細については、Android でのリモートデバッグをご覧ください。

Android 4.4 以降を搭載するデバイスをお持ちでない場合は、console JavaScript API を使用して JavaScript をデバッグし、logcat の出力メッセージを表示できます。Firebug や Web Inspector を使用したウェブページのデバッグに慣れているのであれば、console（console.log() など）の使用に精通していると思います。Android の WebKit フレームワークは、同じ API をほとんどサポートしているため、Android のブラウザまたは独自の WebView でデバッグする際に、ウェブページからログを受信できます。このドキュメントでは、デバッグに Console API を使用する方法について説明します。

以下の関連リソースもご覧ください。

Android ブラウザでの Console API の使用

（DOM の window.console オブジェクトで）console 関数を呼び出すと、出力が logcat に表示されます。たとえば、ウェブページで次の JavaScript が実行されるとします。

    console.log("Hello World");

logcat メッセージは次のようになります。

    Console: Hello World http://www.example.com/hello.html :82

メッセージの形式は、使用している Android のバージョンによって異なる可能性があります。Android 2.1 以降では、Android ブラウザからのコンソールメッセージに「browser」という名前のタグが付けられます。Android 1.6 以前では、Android ブラウザのメッセージに「WebCore」という名前のタグが付けられます。

Android の WebKit では、他のデスクトップブラウザで使用できる Console API をすべて実装しているわけではありません。ただし、次の基本的なテキストロギング関数を使用できます。

console.log(String)
console.info(String)
console.warn(String)
console.error(String)

他のコンソール関数ではエラーは発生しませんが、他のウェブブラウザで期待する結果と同じように動作しない場合があります。

WebView で Console API を使用する

WebView でデバッグする場合、上記の Console API もすべてサポートされています。Android 2.1（API レベル 7）以降をターゲットに設定する場合、コンソールメッセージを logcat に表示するには、onConsoleMessage() メソッドを実装する WebChromeClient を提供する必要があります。次に、setWebChromeClient() で WebChromeClient を WebView に適用します。

たとえば、API レベル 7 をサポートするには、onConsoleMessage(String, int, String) のコードは次のようになります。

Kotlin

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

        override fun onConsoleMessage(message: String, lineNumber: Int, sourceID: String) {
            Log.d("MyApplication", "$message -- From line $lineNumber of $sourceID")
        }
    }

Java

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.setWebChromeClient(new WebChromeClient() {
      public void onConsoleMessage(String message, int lineNumber, String sourceID) {
        Log.d("MyApplication", message + " -- From line "
                             + lineNumber + " of "
                             + sourceID);
      }
    });

ただし、サポートされている最小バージョンが API レベル 8 以降の場合は、代わりに onConsoleMessage(ConsoleMessage) を実装する必要があります。次に例を示します。

Kotlin

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

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

Java

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.setWebChromeClient(new WebChromeClient() {
      public boolean onConsoleMessage(ConsoleMessage cm) {
        Log.d("MyApplication", cm.message() + " -- From line "
                             + cm.lineNumber() + " of "
                             + cm.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

Logcat

Logcat は、システムメッセージのログをダンプするツールです。メッセージには、デバイスがエラーをスローしたときのスタックトレース、アプリケーションから書き込まれたログメッセージ、JavaScript console API を使用して書き込まれたメッセージが含まれます。

logcat を実行して Android Studio からメッセージを表示するには、[View] > [Tool Windows] > [Logcat] を選択してください。

詳細については、Logcat を使用したログの書き込みと表示をご覧ください。