Depura con las Herramientas para desarrolladores de Chrome

Puedes usar las Herramientas para desarrolladores integradas en el navegador Chrome que se ejecuta en tu máquina de desarrollo para inspeccionar y depurar de forma remota las WebViews que se ejecutan en tu app. Para obtener una guía detallada sobre la depuración remota de WebViews, consulta Depuración remota de WebViews.

Para obtener más información sobre las Herramientas para desarrolladores, consulta Descripción general de las Herramientas para desarrolladores de Chrome.

Habilita la conexión desde las Herramientas para desarrolladores de Chrome

De forma predeterminada, el WebView de tu app no habilitará las conexiones desde las Herramientas para desarrolladores de Chrome. Debes habilitar la depuración de WebView en el código de tu aplicación.

  1. Asegúrate de tener todo listo para ejecutar tu app en un dispositivo de hardware o virtual.
  2. Habilita la depuración de WebView en el código de tu aplicación llamando a setWebContentsDebuggingEnabled. Por lo general, esto se hace en la clase Activity o Application en la que se inicializa WebView.

Te recomendamos que envuelvas setWebContentsDebuggingEnabled en una verificación condicional para que la depuración se habilite solo en las compilaciones de desarrollo, no en las de producción. Este parámetro de configuración se aplica a todos los WebView de tu app.

La depuración de WebView no se ve afectada por el estado de la marca debuggable en el manifiesto de la aplicación. Si deseas habilitar la depuración de WebView solo cuando la marca debuggable esté establecida en true, prueba esta marca en el tiempo de ejecución, como se muestra en el siguiente ejemplo:

Kotlin

if (applicationInfo.flags and ApplicationInfo.FLAG_DEBUGGABLE != 0) {
     WebView.setWebContentsDebuggingEnabled(true)
}

Java

if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
     WebView.setWebContentsDebuggingEnabled(true);
}

Cómo comenzar a depurar tu WebView

Después de habilitar la depuración de WebView en el código de tu aplicación y de que esta se ejecute en un dispositivo físico o en Android Emulator, conecta Chrome DevTools a tu WebView:

  1. Abre Chrome en tu máquina de desarrollo.
  2. Ve a chrome://inspect.

  3. En la página chrome://inspect, asegúrate de que la opción Descubrir dispositivos USB esté marcada. Busca tu dispositivo en la sección Remote Target.

    Página de inspección de las Herramientas para desarrolladores de Chrome que muestra los destinos remotos disponibles para la depuración
    Figura 1. Inspección de la página de las Herramientas para desarrolladores de Chrome que muestra los destinos remotos disponibles para la depuración.

  4. Debajo del nombre de tu dispositivo, Chrome muestra todas las WebView habilitadas para la depuración que se ejecutan en ese dispositivo, que suelen identificarse con WebView in seguido del nombre del paquete de la app. Busca el elemento WebView que deseas depurar y haz clic en el vínculo inspeccionar.

Verás que se abre una nueva instancia de Herramientas para desarrolladores que puedes usar para inspeccionar tu WebView.

Si publicas contenido desde un servidor web local en tu máquina de desarrollo, consulta Cómo acceder a un servidor de desarrollo local desde WebView para obtener información sobre cómo conectarte a él desde tu dispositivo o emulador. Para solucionar problemas, consulta Depura de forma remota dispositivos Android y Depuración remota de WebViews.