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

console JavaScript API を使用して JavaScript をデバッグし、logcat で出力メッセージを確認できます。Firebug または Web Inspector によるウェブページのデバッグに精通しているなら、consoleconsole.log() など)の使用もご存じでしょう。Android の WebKit フレームワークは同じ API のほとんどをサポートしているため、WebView でデバッグするときにウェブページからログを受け取ることができます。このトピックでは、コンソール API を使用してデバッグする方法について説明します。

WebView でコンソール API を使用する

WebView でデバッグする場合も、コンソール 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) のどちらを使用している場合でも、ウェブページでコンソール メソッドを実行すると、Android は適切な onConsoleMessage() メソッドを呼び出して、エラーを報告します。たとえば、上記のサンプルコードでは、次のような logcat メッセージが出力されます。

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

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

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

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

手順は次のとおりです。

  1. WebView プレリリース チャンネルのいずれか(Beta、Dev、Canary){: .external} をインストールする。

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

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


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

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

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

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