Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

WebViews con depuración remota

Depura WebViews en tus apps Android nativas con las herramientas para desarrolladores de Chrome.

En Android 4.4 (KitKat) o posteriores, usa DevTools para depurar el contenido de WebView en las apps de Android nativas.

TL;DR

  • Habilita la depuración de WebView en tu app Android nativa; depura WebViews en Chrome DevTools.
  • Obtén acceso a una lista de WebViews habilitadas para depuración a través de chrome://inspect.
  • Depurar WebViews es igual a depurar una página web a través de la depuración remota.

Configurar WebViews para depuración

La depuración de WebView se debe habilitar desde dentro de la app. Para habilitar la depuración de WebView, llama al método estático setWebContentsDebuggingEnabled en la clase WebView.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

Esta configuración servirá para todas las WebViews de la app.

Sugerencia: La depuración de WebView no se ve afectada por el estado del indicador debuggable en el manifiesto de la aplicación. Si deseas habilitar la depuración de WebView solo cuando debuggable sea true, prueba el indicador durante el tiempo de ejecución.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

Abre un WebView en DevTools

La página chrome://inspect muestra una lista de WebViews habilitadas para depuración en tu dispositivo.

Para comenzar a depurar, haz clic en inspect, debajo del WebView que quieres depurar. Usa DevTools como lo harías para una pestaña de un navegador remoto.

Inspección de elementos en un WebView

Los gráficos en gris que se enumeran con WebView representan su tamaño y posición relativos a la pantalla del dispositivo. Si tus WebViews tienen títulos, también se mostrarán en la lista.

Solución de problemas

¿No puedes ver tus WebViews en la página chrome://inspect?

  • Verifica que la depuración de WebView esté habilitada para tu app.
  • En tu dispositivo, abre la app con la WebView que desees depurar. Luego, actualiza la página chrome://inspect.