Cómo depurar aplicaciones web

Puedes depurar el código de JavaScript con las APIs de console de JavaScript y ver los mensajes de salida en Logcat. Si conoces la depuración de páginas web con Firebug o Web Inspector, es probable que también conozcas el uso de console (como console.log()). El framework 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 esta sección, se describe cómo usar las APIs de consola para la depuración.

Nota: También puedes depurar de forma remota tus páginas web en WebView con las herramientas para desarrolladores de Chrome. Para obtener más información, consulta Depuración remota de WebViews.

Cómo usar las APIs de consola en WebView

Las APIs de la consola también son compatibles cuando se depura en 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(). 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;
    }
});

Advertencia: No incluyas información de identificación personal (PII) en los mensajes de la consola.

El 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 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

Nota: Logcat es una herramienta que vuelca un registro de los mensajes del sistema. Los mensajes incluyen un seguimiento de pila cuando el dispositivo muestra un error, así como mensajes de registro escritos desde tu aplicación y los que se escriben usando las APIs de console de JavaScript. Para obtener más información, consulta Cómo ver registros con Logcat.

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

• Depuración remota de dispositivos Android
• Cómo depurar tu app

Prueba funciones web experimentales

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

Para ello, sigue estos pasos:

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

2. Cambia el WebViewcanal en tu dispositivo de prueba al canal de versión preliminar instalado.

3. Haz clic en el selector de WebView DevTools:

   
   Figura 1: Ícono de DevTools de WebView para la app instalada en un dispositivo.

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

5. Detén y reinicia la app para comenzar a probar las funciones nuevas.

Para obtener más información sobre cómo activar marcas, consulta la documentación de DevTools de WebView.