Depura con la app de WebView DevTools

La app de WebView DevTools es una utilidad integrada en el dispositivo para administrar y depurar el componente WebView del sistema. Es independiente de las Herramientas para desarrolladores de Chrome, que se ejecutan en tu máquina de desarrollo y te permiten depurar de forma remota el contenido web en vivo (HTML, CSS y JavaScript) que se ejecuta dentro de una instancia de WebView.

WebView DevTools es una app complementaria que se instala automáticamente en tu dispositivo junto con el componente del sistema WebView. La app se divide en cuatro áreas:

  • Página principal: Consulta la información de la versión y cambia el WebView predeterminado a una versión del canal de versiones preliminares.
  • Fallas: Enumera y sube informes de fallas de WebView.
  • Marcas: Establece marcas de desarrollador para cambiar el comportamiento de WebView.
  • Registros de red: Enumera y comparte los registros de red de bajo nivel de WebView.

Ejecuta las Herramientas para desarrolladores de WebView

En dispositivos con Android 16 o versiones posteriores que tengan habilitado el modo para desarrolladores, puedes iniciar WebView DevTools navegando a Configuración > Sistema > Opciones para desarrolladores > WebView DevTools.

En todas las versiones recientes de Android, puedes iniciar WebView DevTools con un comando de adb:

adb shell am start -a "com.android.webview.SHOW_DEV_UI"

Como alternativa, si instalas un canal de versión preliminar de WebView, como Beta, Dev o Canary, puedes usar el ícono de inicio de las 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.

La primera vez que ejecutes WebView DevTools, se solicitará permiso para mostrar una notificación persistente con las marcas para desarrolladores que habilites.

Cómo cambiar a un canal de versión preliminar

Las funciones y correcciones de errores más recientes de WebView están disponibles primero en los canales de versiones preliminares. Puedes probar tu app con estos cambios si cambias el proveedor de WebView de tu dispositivo con las Herramientas para desarrolladores de WebView. Realizar pruebas en canales de versiones previas al lanzamiento ayuda a garantizar que tu app sea compatible con las próximas versiones de WebView antes de que se lancen para los usuarios.

  1. Instala la versión Beta, Dev o Canary de WebView, según el equilibrio que prefieras entre estabilidad y acceso a los cambios más recientes.
  2. Abre la app de WebView DevTools y presiona Change Provider.
  3. Si no ves esa opción, presiona los tres puntos que se encuentran en la esquina superior derecha y selecciona Change WebView Provider.

Para obtener más información, consulta Cómo probar las versiones beta, para desarrolladores o Canary de WebView.

Canales de WebView

Los canales de WebView se basan en los canales de versiones de Chrome. Cada canal representa un nivel diferente de estabilidad y actualización del código. A continuación, se incluye un resumen de cuándo usar cada canal de WebView:

  • Canary: Se actualiza a diario. Este canal tiene los cambios más recientes, incluidas las nuevas funciones y las correcciones de errores, en cuanto se incorporan a la base de código de Chromium. Usa esta opción si quieres probar cómo se ejecuta tu app web en un WebView con un cambio que se combinó recientemente, pero ten en cuenta que este canal puede ser inestable o contener errores.

  • Canal de desarrollo: Se actualiza una o dos veces por semana. Este canal es más estable que Canary, pero aún contiene cambios de vanguardia. Es mejor para los desarrolladores que desean probar funciones nuevas, pero con menos riesgo de errores no relacionados que Canary.

  • Beta: Se actualiza aproximadamente cada semana, con una actualización importante cada 4 semanas. Este canal te ofrece una vista previa de las funciones de la próxima versión estable de WebView entre 4 y 6 semanas antes del lanzamiento de la versión estable. Usa esta opción para probar tu app web con la próxima versión de WebView y verificar la compatibilidad.

  • Estable: Se actualiza cada 4 semanas para los lanzamientos principales y cada 2 o 3 semanas para las correcciones de errores urgentes. Este es el canal de producción de WebView, que se lanzó para todos los usuarios. Es el canal más estable, ya que se probó en otros canales. Usa esta opción si quieres experimentar tu app web en un WebView de la misma manera en que lo hacen la mayoría de los usuarios en este momento, tal vez para reproducir un error que informaron.

IU de bloqueo

Si experimentas fallas de WebView mientras desarrollas tu app, puedes enumerar, subir y registrar informes de errores contra ellas con las herramientas para desarrolladores de WebView.

  1. Una vez que tu app falle, reiníciala para asegurarte de que se genere el informe de fallas.
  2. Abre la app de WebView DevTools y presiona Crashes.

Para obtener más información, consulta la documentación de la IU de fallas.

IU de marcas

La app de WebView DevTools te permite establecer varias marcas útiles para cambiar el comportamiento de todos los componentes WebView en tu dispositivo. La mayoría de las marcas solo se usan para el desarrollo de WebView, pero algunas son útiles para los desarrolladores de apps para Android.

  • highlight-all-webviews: Identifica los WebView agregándoles un tinte amarillo.
  • net-log: Habilita el registro de bajo nivel de la actividad de red de WebView.
  • webview-log-js-console-messages: Haz que los registros de la consola de JavaScript aparezcan en Logcat.
App de DevTools de WebView que muestra la IU de Flags.
Figura 2. La IU de marcas en la app de WebView DevTools.

Para obtener más información, consulta la documentación de la IU de marcas.

Registros de la red

Si no puedes resolver los problemas de conexión del servidor en WebView con las Herramientas para desarrolladores de Chrome, usa las Herramientas para desarrolladores de WebView para capturar registros de red de bajo nivel.

  1. Habilita la depuración de WebView en el código de tu app.
  2. En las Herramientas para desarrolladores de WebView, abre Flags, busca net-log y activa el botón de activación. Reinicia la app para que se aplique la marca.
  3. Realiza acciones que activen el comportamiento de la red que deseas depurar. Después de reproducir el problema, cierra la app.
  4. Abre la sección Net Logs de WebView DevTools para ubicar y compartir el archivo de registro de red.
  5. Puedes cargar el archivo de registro JSON en el Visor de Netlog, una herramienta en línea para visualizar los registros de red, y así inspeccionar los eventos de red de bajo nivel, la información de los sockets y los detalles de los tiempos.

Para obtener más información, consulta Depuración de la red en WebView.