Depura con registros de la consola de JavaScript

En este documento, se describen diferentes métodos para ver los registros de la consola de JavaScript y depurar el contenido dentro de un WebView.

Acceder a la consola de JavaScript te permite ver errores, advertencias y mensajes personalizados de tus instrucciones console.log() de JavaScript para diagnosticar lo que sucede dentro de WebView. Existen tres formas diferentes de ver los mensajes de la consola de JavaScript que genera tu WebView:

  • Herramientas para desarrolladores de Chrome: Conecta tu WebView a las Herramientas para desarrolladores de Chrome. Abre la pestaña Console para ver los mensajes de la consola de JavaScript de WebView.

  • App de WebView DevTools: Usa la app de WebView DevTools para habilitar la marca webview-log-js-console-messages en tu dispositivo y ver los registros de la consola en Logcat.

  • Interceptación de mensajes: Intercepta los mensajes de la consola de JavaScript implementando onConsoleMessage() en tu WebChromeClient. Este enfoque se detalla en la siguiente sección.

Si publicas contenido desde un servidor web local en tu máquina de desarrollo, consulta Cómo acceder a un servidor de desarrollo local desde WebView para obtener información sobre cómo conectarte a él desde un dispositivo o emulador.

Intercepta mensajes con onConsoleMessage()

Las APIs de consola se admiten cuando se depura un WebView. 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().

WebChromeClient es la clase de ayuda para WebView. Maneja eventos relacionados con la IU que ocurren en el contenido web, como mostrar alertas de JavaScript, cambiar el título de la página web y controlar los mensajes enviados a la consola del navegador.

El siguiente código configura un WebChromeClient para interceptar los resultados de la consola de JavaScript y redireccionarlos a Logcat para facilitar la depuración.

Kotlin

val myWebView: WebView = findViewById(R.id.my_webview)
myWebView.webChromeClient = object : WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        // Log JavaScript console messages to Logcat
        Log.d("WebViewConsole", "${message.message()} -- From line ${message.lineNumber()} of ${message.sourceId()}")
        // Return true to indicate that the message has been handled
        return true
    }
}

Java

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        // Log JavaScript console messages to Logcat
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        // Return true to indicate that the message has been handled
        return true;
    }
});

Si usas onConsoleMessage(), tu lógica de registro personalizada se convierte en el controlador principal de los errores de JavaScript, reemplaza el comportamiento predeterminado de la marca webview-log-js-console-messages y te permite dar formato a los registros como quieras.

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

Cuando ejecutas un método de la consola en tu página web, Android llama al método onConsoleMessage(ConsoleMessage) para que puedas informar el error. Por ejemplo, con el código de ejemplo, se muestra un mensaje de Logcat como el siguiente:

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