Cómo depurar aplicaciones web

Puedes depurar tu código JavaScript con las APIs de console JavaScript y ver los mensajes de salida en Logcat. Si sabes cómo depurar páginas web con Firebug o Web Inspector, probablemente sepas cómo usar 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 esta sección, se describe cómo usar las APIs de consola para la depuración.

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

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 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, se muestra un mensaje de Logcat como el siguiente:

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

Estos son algunos recursos adicionales relacionados con la depuración:

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 canales de versión preliminar de WebView (beta, para desarrolladores o Canary){:.external}.

  2. Cambia el canal de WebView en tu dispositivo de prueba al canal de versión previa al lanzamiento instalado.

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

    Ícono de selector de las Herramientas para desarrolladores de WebView.
    Figura 1: Ícono de las Herramientas para desarrolladores de WebView para la app instalada en un dispositivo.

  4. En DevTools, haz clic en el elemento Flags 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 o desactivar marcas, consulta la documentación de WebView DevTools.