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.

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:

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

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

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.