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.

Cómo habilitar la conexión desde las Herramientas para desarrolladores de Chrome

De forma predeterminada, la 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 estar configurado para ejecutar tu app en un dispositivo físico o virtual device.
  2. Para habilitar la depuración de WebView en el código de tu aplicación, llama a setWebContentsDebuggingEnabled. Por lo general, esto se hace en la clase Activity o Application donde se inicializa WebView.

Te recomendamos que encapsules setWebContentsDebuggingEnabled en una verificación condicional para que la depuración se habilite solo en las compilaciones de desarrollo, no en la producción. Este parámetro de configuración se aplica a todas las WebViews 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 se establece 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 la app se ejecute en un dispositivo físico o en el Android Emulator, conecta las Herramientas para desarrolladores de Chrome 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 esté marcada la opción Discover USB devices. 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. Página de inspección 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 WebViews habilitadas para la depuración que se ejecutan en ese dispositivo, que, por lo general, se identifican con WebView in seguido del nombre del paquete de la app. Busca la WebView que deseas depurar y haz clic en el vínculo inspect.

Verás que se abre una nueva instancia de las 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 Depuración remota de dispositivos Android y Depuración remota de WebViews.