Depuración de aplicaciones web

Si estás probando tu aplicación web con un dispositivo que ejecuta Android 4.4 o versiones posteriores, puedes depurar de forma remota las páginas web en WebView con las Herramientas para desarrolladores de Chrome, lo que no implica anular la compatibilidad con versiones anteriores de Android. Para obtener más información, consulta el artículo Depuración remota en Android.

Si no tienes un dispositivo con Android 4.4 o versiones posteriores, puedes depurar el código de JavaScript con las API de console de JavaScript y ver los mensajes de salida en logcat. Si tienes conocimientos sobre la depuración de páginas web con Firebug o Web Inspector, es posible que ya sepas usar console (como console.log()). El marco de trabajo de WebKit de Android admite la mayoría de las mismas API, por lo que puedes recibir registros de tu página web al depurar en el navegador de Android o en tu propia WebView. En este documento, se describe cómo usar las API de consola para la depuración.

Consulta los siguientes recursos relacionados:

Cómo usar las API de consola en el navegador de Android

Cuando llamas a una función de console (en el objeto window.console de DOM), el resultado aparece en logcat. Por ejemplo, si tu página web ejecuta este código de JavaScript:

    console.log("Hello World");
    

El mensaje de logcat que se muestra es similar al siguiente:

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

El formato del mensaje puede variar según la versión de Android que uses. En Android 2.1 y versiones posteriores, los mensajes de la consola del navegador de Android están etiquetados con el nombre "browser". En Android 1.6 y versiones anteriores, los mensajes del navegador de Android están etiquetados con el nombre "WebCore".

WebKit de Android no implementa todas las API de consola disponibles en otros navegadores de escritorio. Sin embargo, puedes usar las funciones básicas de registro de texto:

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

Hay otras funciones de la consola que no generan errores, pero es posible que su comportamiento no sea el esperado respecto de otros navegadores web.

Cómo usar las API de consola en WebView

Todas las API de consola que se muestran arriba también son compatibles cuando se depura en WebView. Si estás desarrollando tu app para Android 2.1 (API nivel 7) y versiones posteriores, debes proporcionar un WebChromeClient que implemente el método onConsoleMessage() para que los mensajes de la consola aparezcan en logcat. Luego, aplica el WebChromeClient a tu WebView con setWebChromeClient().

Por ejemplo, para brindar compatibilidad con la API nivel 7, tu código de onConsoleMessage(String, int, String) podría verse de la siguiente manera:

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

Sin embargo, si la versión más antigua que admites es la API nivel 8 o versiones posteriores, debes implementar onConsoleMessage(ConsoleMessage). Por ejemplo:

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

El ConsoleMessage también incluye un objeto MessageLevel para indicar el tipo de mensaje de consola que se está publicando. Puedes buscar el nivel del mensaje con messageLevel() para determinar su severidad y luego usar el método Log apropiado o tomar otras medidas adecuadas.

Ya sea que uses onConsoleMessage(String, int, String) o onConsoleMessage(ConsoleMessage), cuando ejecutas un método de la consola en tu página web, Android llama al método onConsoleMessage() apropiado para que puedas informar el error. Por ejemplo, con el código de ejemplo anterior, se muestra un mensaje de logcat como el siguiente:

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

Logcat

Logcat es una herramienta que vuelca un registro de los mensajes del sistema. Los mensajes incluyen un seguimiento de la pila cuando el dispositivo muestra un error, así como mensajes de registro escritos desde tu aplicación y los que se escriben usando las API de console de JavaScript.

Para ejecutar logcat y ver mensajes desde Android Studio, selecciona View > Tool Windows > Logcat.

Para obtener más información, consulta el artículo Cómo escribir y ver registros con Logcat.