Webアプリのデバッグ - Lionaroid技術ブログ

原文（Debugging Web Apps - android developer's）はこちら

Android向けのWebアプリケーションを開発しているなら、logcatにメッセージを出力するコンソールJavaScript APIを使用して、JavaScriptのデバッグが可能です。FirebugやWeb Inspectorを用いたWebページのデバッグに慣れているなら、おそらく（console.log()のような）コンソールを使う方が分かりやすいでしょう。
Android WebKit フレームワークは、ほぼ同じAPIをサポートしており、AndroidのブラウザやWebView内のWebページのデバッグ時に、ログを取得することが可能になります。

概要

JavaScriptのコンソールメソッドを利用してWebアプリのデバッグができます
カスタムWebViewをデバッグしているなら、デバッグメッセージをハンドルするコールバックメソッドを実装する必要があります

このセクションの内容

AndroidのブラウザでコンソールAPIを使う
WebViewでコンソールAPIを使う

参考

Debugging Tasks

AndroidのブラウザでコンソールAPIを使う

DOMの window.console オブジェクトのコンソール機能を呼び出すと、logcat に出力されます。例えば、次のようなJavaScriptをWebページで実行するとします：

console.log("Hello World");

この時、logcat のメッセージは以下のようになります：

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

メッセージのフォーマットは、利用しているAndroidのバージョンに依存するため、異なるメッセージが表示されるかもしれません。

- Android 2.1以上では、ブラウザからのコンソールメッセージは、"browser"という名前でタグ付けされます。
- Android 1.6以下では、Androidブラウザのメッセージは、"WebCore"という名前でタグ付けされます。

Android WebKit は、他のデスクトップブラウザで使用可能な全てのコンソールAPIを実装していません。しかし、下記の標準的なテキストロギング機能を利用することができます：

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

他のコンソール機能はエラーを引き起こしませんが、他のWebブラウザと同様の振る舞いにはならないでしょう。

WebViewでコンソールAPIを使う

アプリケーション内でカスタムWebViewを実装しているなら、WebView内のWebページをデバッグする際に、全く同じコンソールAPIがサポートされます。

- Android 1.6以下では、コンソールメッセージは自動的に "WebCore" でタグ付けされて、logcatに送られます。
- Android 2.1(APIレベル7)以上のターゲットの場合、logcat にメッセージを出力するために、onConsoleMessage() コールバックメソッドを実装した WebChromeClient を実装する必要があります。その際、setWebChromeClient() で WebChromeClient を WebViewに適用します。

尚、APIレベル7で提供されている onConsoleMessage(String, int, String) は、APIレベル8ではonConsoleMessage(ConsoleMessage) となり、非推奨となりました。

APIレベル7を利用する場合、onConsoleMessage(String, int, String) はこのようなコードになるでしょう：

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) はこのようになるでしょう：

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;
  }
});

コンソールメッセージはまた、送られたメッセージのタイプを表すメッセージレベルを含みます。メッセージを厳格に宣言するために、messageLevel() でメッセージのレベルを問い合わせることができます。その時、適切なログメソッドを利用する、または、他の適切なアクションを行います。

Webページ内でコンソールメソッドを実行する際、onConsoleMessage(String, int, String) または onConsoleMessage(ConsoleMessage) のどちらを利用しているかに関わらず、Androidは適切な onConsoleMessage() メソッドを呼び出すため、エラーを報告することができます。

例えば、上記の例のコードの場合、logcat メッセージはこのように出力されます：

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

Logcat
Logcatはシステムメッセージのログをダンプするツールです。メッセージは、アプリケーションやJavaScriptコンソールAPIで記述されたログメッセージと同様に、端末がエラーを発した際のスタックトレースを含んでいます。
logcatを動作させてメッセージを見るには、Android SDK tools/ ディレクトリから adb logcat を実行するか、DDMS から Device > Run logcat を選択します。
EclipseのADTプラグインを利用しているなら、Window > Show View > Other > Android > Logcat で Logcat ビューを開いてlogcatのメッセージを見ることもできます。
logcatに関するさらなる情報は、Debugging Tasks を御覧下さい。