Cómo depurar aplicaciones web

Puedes depurar tu JavaScript con las APIs de JavaScript console y ver los mensajes de salida en Logcat. Si estás familiarizado con la depuración de páginas web con Firebug o con el Inspector web, es probable que conozcas el uso de console (como console.log()). El framework de WebKit de Android admite la mayoría de las mismas APIs, por lo que puedes recibir registros de tu página web cuando depuras en tu WebView. En este tema, se describe cómo usar las APIs de la consola para la depuración.

Usa las APIs de la consola en WebView

Las APIs de la consola también son compatibles durante la depuración en WebView. Debes proporcionar un objeto 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(). Para obtener más información, consulta la documentación de Webview.

En el siguiente ejemplo, se muestra cómo usar las APIs de la consola en WebView:

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

El ConsoleMessage también incluye un objeto MessageLevel para indicar el tipo de mensaje de consola que se está entregando. Puedes consultar el nivel del mensaje con messageLevel() para determinar su gravedad y, luego, usar el método Log apropiado o realizar otras acciones apropiadas.

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 similar al siguiente:

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

Los siguientes son recursos adicionales relacionados con la depuración:

Cómo probar funciones web experimentales

Al igual que la página chrome://flags de Google Chrome, también puedes probar funciones web experimentales en WebView.

Para hacerlo, sigue estos pasos:

  1. Instala uno de los canales previos al lanzamiento de WebView (beta, dev o canary){: .external}.

  2. Cambia el canal WebView en tu dispositivo de prueba al canal previo al lanzamiento instalado.

  3. Haz clic en el selector de WebView Herramientas para desarrolladores:


    Figura 1: Ícono de WebView de Herramientas para desarrolladores para una app instalada en un dispositivo

  4. En Herramientas para desarrolladores, haz clic en Marcas y busca las funciones experimentales que quieras habilitar o inhabilitar. El cambio se aplica a todas las instancias de WebView del dispositivo.

  5. Detén y reinicia la app para comenzar a realizar pruebas con las funciones nuevas.

Si quieres obtener más información para activar o desactivar las marcas, consulta la documentación de WebView para Herramientas para desarrolladores.