Cómo depurar de forma remota dispositivos Android

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Depura de forma remota contenido en vivo en un dispositivo Android desde tu computadora Windows, Mac o Linux. En este instructivo, aprenderás a hacer lo siguiente:

  • Configura tu dispositivo Android para la depuración remota y descúbrelo desde tu máquina de desarrollo.
  • Inspecciona y depura contenido en vivo en tu dispositivo Android desde tu máquina de desarrollo.
  • Transmite contenido desde tu dispositivo Android a una instancia de Herramientas para desarrolladores en tu máquina de desarrollo.

Diagrama de depuración remota

Paso 1: Descubre tu dispositivo Android

El siguiente flujo de trabajo es adecuado para la mayoría de los usuarios. Consulta Solución de problemas: DevTools no detecta el dispositivo Android para obtener más ayuda.

  1. Abre la pantalla Opciones para desarrolladores en tu dispositivo Android. Consulta Cómo configurar las opciones para desarrolladores integrado en el dispositivo.
  2. Selecciona Habilitar depuración por USB.
  3. En tu máquina de desarrollo, abre Chrome.
  4. Ve a chrome://inspect#devices.

  5. Asegúrate de que Casilla de verificación. Descubrir dispositivos USB esté habilitado.

    La casilla de verificación Discover USB Devices está habilitada.

  6. Conecta tu dispositivo Android directamente a tu máquina de desarrollo con un cable USB.

  7. Si es la primera vez que conectas el dispositivo, aparecerá como "Sin conexión" y pendiente de autenticación.

    El dispositivo sin conexión tiene pendiente la autenticación.

    En este caso, acepta el mensaje de la sesión de depuración en la pantalla del dispositivo.

  8. Si ves el nombre del modelo de tu dispositivo Android, significa que DevTools estableció la conexión con tu dispositivo correctamente.

    Un dispositivo conectado correctamente designado con un nombre de modelo.

  9. Continúa con el paso 2.

Solución de problemas: Las Herramientas para desarrolladores no detectan el dispositivo Android

Asegúrate de que el hardware esté configurado correctamente:

  • Si usas un concentrador USB, intenta conectar tu dispositivo Android directamente a la máquina de desarrollo.
  • Intenta desconectar el cable USB entre tu dispositivo Android y la máquina de desarrollo, y luego vuelve a conectarlo. Hazlo mientras las pantallas de tu dispositivo Android y tu máquina de desarrollo estén desbloqueadas.
  • Asegúrate de que el cable USB funcione. Deberías poder inspeccionar archivos en tu dispositivo Android desde tu máquina de desarrollo.

Asegúrate de que el software esté configurado correctamente:

Si no ves el mensaje Permitir la depuración por USB en tu dispositivo Android, prueba lo siguiente:

  • Desconectar y volver a conectar el cable USB mientras Herramientas para desarrolladores está en primer plano en tu máquina de desarrollo y se muestra la pantalla principal de Android En otras palabras, a veces, el mensaje no aparece cuando las pantallas de tu dispositivo Android o de tu máquina de desarrollo están bloqueadas.
  • Actualiza la configuración de pantalla de tu dispositivo Android y de tu máquina de desarrollo para que nunca entren en modo de suspensión.
  • Establece el modo USB de Android en PTP. Consulta El Galaxy S4 no muestra el cuadro de diálogo Autorizar depuración por USB.
  • Selecciona Revocar autorizaciones de depuración por USB en la pantalla Opciones para desarrolladores de tu dispositivo Android para restablecerlo a un estado nuevo.

Si encuentras una solución que no se menciona en esta sección ni en Chrome DevTools Devices does not detect device when plugged in, agrega una respuesta a esa pregunta de Stack Overflow o abre un problema en el repositorio de developer.chrome.com.

Paso 2: Depura contenido en tu dispositivo Android desde tu máquina de desarrollo

  1. Abre Chrome en tu dispositivo Android.

  2. En chrome://inspect/#devices en tu máquina de desarrollo, verás el nombre del modelo de tu dispositivo Android, seguido de su número de serie. Debajo, puedes ver la versión de Chrome que se ejecuta en el dispositivo, con el número de versión entre paréntesis.

    Es la versión de Chrome que se ejecuta en el dispositivo.

  3. En el cuadro de texto Open tab with url, ingresa una URL y, luego, haz clic en Open. La página se abrirá en una pestaña nueva en tu dispositivo Android.

    Es una pestaña remota que aparece en una sección.

    Cada pestaña remota de Chrome tiene su propia sección en chrome://inspect/#devices. Desde esta sección, puedes interactuar con esa pestaña. Si hay apps que usan WebView, también verás una sección para cada una de ellas. En este ejemplo, solo hay una pestaña abierta.

  4. Haz clic en Inspeccionar junto a la URL que acabas de abrir. Se abrirá una nueva instancia de Herramientas para desarrolladores.

Es una nueva instancia de Herramientas para desarrolladores para la pestaña remota.

La versión de Chrome que se ejecuta en tu dispositivo Android determina la versión de las Herramientas para desarrolladores que se abre en tu máquina de desarrollo. Por lo tanto, si tu dispositivo Android ejecuta una versión muy antigua de Chrome, es posible que la instancia de Herramientas para desarrolladores se vea muy diferente a lo que estás acostumbrado.

Más acciones: pausar, enfocar, volver a cargar o cerrar una pestaña

Debajo de la URL, puedes encontrar un menú para pausar, enfocar, volver a cargar o cerrar una pestaña.

Es el menú para pausar, volver a cargar, enfocar o cerrar una pestaña.

Cómo inspeccionar elementos

Ve al panel Elements de tu instancia de Herramientas para desarrolladores y coloca el cursor sobre un elemento para destacarlo en la ventana gráfica de tu dispositivo Android.

También puedes presionar un elemento en la pantalla de tu dispositivo Android para seleccionarlo en el panel Elements. Haz clic en Seleccionar elemento Seleccionar elemento en tu instancia de Herramientas para desarrolladores y, luego, presiona el elemento en la pantalla de tu dispositivo Android. Ten en cuenta que la opción Seleccionar elemento se inhabilita después del primer toque, por lo que deberás volver a habilitarla cada vez que quieras usar esta función.

Cómo transmitir la pantalla de Android a tu máquina de desarrollo

Haz clic en Alternar presentación en pantalla Activar o desactivar Screencast para ver el contenido de tu dispositivo Android en tu instancia de Herramientas para desarrolladores.

Puedes interactuar con la grabación de pantalla de varias maneras:

  • Los clics se traducen en toques, lo que activa los eventos táctiles adecuados en el dispositivo.
  • Las pulsaciones de teclas en tu computadora se envían al dispositivo.
  • Para simular un gesto de pellizco, mantén presionada la tecla Mayúsculas mientras arrastras.
  • Para desplazarte, usa el panel táctil o la rueda del mouse, o bien desliza el puntero del mouse.

Algunas notas sobre las grabaciones de pantalla:

  • Las presentaciones en pantalla solo muestran el contenido de la página. Las partes transparentes de la grabación de pantalla representan interfaces de dispositivos, como la barra de direcciones de Chrome, la barra de estado de Android o el teclado de Android.
  • Las grabaciones de pantalla afectan negativamente las frecuencias de fotogramas. Inhabilita la transmisión de pantalla mientras mides los desplazamientos o las animaciones para obtener un panorama más preciso del rendimiento de tu página.
  • Si se bloquea la pantalla de tu dispositivo Android, desaparecerá el contenido de la grabación de pantalla. Desbloquea la pantalla de tu dispositivo Android para reanudar automáticamente la transmisión de pantalla.

Depura manualmente a través de Android Debug Bridge (adb)

En algunos casos excepcionales, puede ser útil un método alternativo de depuración remota. Por ejemplo, es posible que desees conectarte directamente al Protocolo de herramientas para desarrolladores de Chrome (CDP) de tu Chrome en Android.

Para ello, puedes usar Android Debug Bridge (adb):

  1. Asegúrate de habilitar las Opciones para desarrolladores y la depuración por USB en tu dispositivo Android.
  2. Abre Chrome en tu dispositivo Android.

  3. Conecta el dispositivo Android a la máquina de desarrollo de una de las siguientes maneras:

  4. En la línea de comandos de tu máquina de desarrollo, ejecuta adb devices -l y verifica si tu dispositivo aparece en la lista.

  5. Reenvía el socket de CDP en el dispositivo al puerto local de tu máquina, por ejemplo, 9222. Para ello, ejecuta el siguiente comando:

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  6. Una vez que se haya conectado correctamente, verifica lo siguiente:

    • http://localhost:9222/json enumera tus objetivos de page.
    • http://localhost:9222/json/version expone el extremo de destino browser, como indica la documentación de CDP.
    • chrome://inspect/#devices se completa, incluso sin marcar el parámetro de configuración Descubrir dispositivos USB.

Para solucionar problemas, consulta lo siguiente: