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 una 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 la 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 tu WebView.

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

  • Intercepció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 Accede 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 son compatibles cuando se depura una 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. Controla los 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;
    }
});

Cuando 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 desees.

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.

Cuando ejecutas un método de la consola en tu página web, Android llama al onConsoleMessage(ConsoleMessage) método 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