Debugging Web Apps

Quickview

  • You can debug your web app using console methods in JavaScript
  • If debugging in a custom WebView, you need to implement a callback method to handle debug messages

In this document

  1. Using Console APIs in the Android Browser
  2. Using Console APIs in WebView

See also

  1. Debugging Tasks

If you're developing a web application for Android, you can debug your JavaScript using the console JavaScript APIs, which output messages to logcat. If you're familiar with debugging web pages with Firebug or Web Inspector, then you're probably familiar with using console (such as console.log()). Android's WebKit framework supports most of the same APIs, so you can receive logs from your web page when debugging in Android's Browser or in your own WebView.

Using Console APIs in the Android Browser

Logcat

Logcat is a tool that dumps a log of system messages. The messages include a stack trace when the device throws an error, as well as log messages written from your application and those written using JavaScript console APIs.

To run logcat and view messages, execute adb logcat from your Android SDK tools/ directory, or, from DDMS, select Device > Run logcat. When using the ADT plugin for Eclipse, you can also view logcat messages by opening the Logcat view, available from Window > Show View > Other > Android > Logcat.

See Debugging Tasks for more information about logcat.

When you call a console function (in the DOM's window.console object), the output appears in logcat. For example, if your web page executes the following JavaScript:

console.log("Hello World");

Then the logcat message looks something like this:

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

The format of the message might appear different depending on which version of Android you're using. On Android 2.1 and higher, console messages from the Android Browser are tagged with the name "browser". On Android 1.6 and lower, Android Browser messages are tagged with the name "WebCore".

Android's WebKit does not implement all of the console APIs available in other desktop browsers. You can, however, use the basic text logging functions:

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

Other console functions don't raise errors, but might not behave the same as what you expect from other web browsers.

Using Console APIs in WebView

If you've implemented a custom WebView in your application, all the same console APIs are supported when debugging your web page in WebView. On Android 1.6 and lower, console messages are automatically sent to logcat with the "WebCore" logging tag. If you're targeting Android 2.1 (API Level 7) or higher, then you must provide a WebChromeClient that implements the onConsoleMessage() callback method, in order for console messages to appear in logcat.

Additionally, the onConsoleMessage(String, int, String) method introduced in API Level 7 has been deprecated in favor of onConsoleMessage(ConsoleMessage) in API Level 8.

Whether you're developing for Android 2.1 (API Level 7) or Android 2.2 (API Level 8 or greater), you must implement WebChromeClient and override the appropriate onConsoleMessage() callback method. Then, apply the WebChromeClient to your WebView with setWebChromeClient().

Using API Level 7, this is how your code for onConsoleMessage(String, int, String) might look:

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

With API Level 8 or greater, your code for onConsoleMessage(ConsoleMessage) might look like this:

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

The ConsoleMessage also includes a MessageLevel to indicate the type of console message being delivered. You can query the message level with messageLevel() to determine the severity of the message, then use the appropriate Log method or take other appropriate actions.

Whether you're using onConsoleMessage(String, int, String) or onConsoleMessage(ConsoleMessage), when you execute a console method in your web page, Android calls the appropriate onConsoleMessage() method so you can report the error. For example, with the example code above, a logcat message is printed that looks like this:

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