Cómo depurar de forma remota dispositivos Android

Kayce vascos
Kayce Vascos
Twitter GitHub Glitch
Sofía Emelianova
Sofía Emelianova
GitHub

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

  • Configura tu dispositivo Android para que se pueda depurar de manera remota y descúbrelo en tu máquina de desarrollo.
  • Inspecciona y depura contenido activo en tu dispositivo Android desde tu máquina de desarrollo.
  • Presentar en pantalla contenido desde tu dispositivo Android en una instancia de Herramientas para desarrolladores de tu máquina de desarrollo.

Diagrama de depuración remota

Paso 1: Descubre tu dispositivo Android

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

  1. Abre la pantalla Opciones para desarrolladores en tu Android. Consulta Configurar opciones para desarrolladores 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 la opción Casilla de verificación. Descubrir dispositivos USB esté habilitada.

    La casilla de verificación Descubrir dispositivos USB está habilitada.

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

  7. Si conectas tu dispositivo por primera vez, este aparecerá como "Sin conexión" y con autenticación pendiente.

    Dispositivo sin conexión pendiente de autenticación.

    En este caso, acepta la solicitud de la sesión de depuración en la pantalla de tu dispositivo.

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

    Un dispositivo conectado correctamente designado con un nombre de modelo.

  9. Continúa con el Paso 2.

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

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

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

Asegúrate de que el software esté configurado de forma correcta:

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

  • Desconectar y volver a conectar el cable USB mientras Herramientas para desarrolladores está enfocada en la máquina de desarrollo y en la que se muestra la pantalla principal de Android En otras palabras, a veces el mensaje no aparece cuando la pantalla del dispositivo Android o la máquina de desarrollo están bloqueadas.
  • Actualiza la configuración de la pantalla del dispositivo Android y la máquina de desarrollo para que nunca se suspendan.
  • Se establecerá el modo USB de Android en PTP. Consulta Galaxy S4 no muestra el cuadro de diálogo Authorize USB debugging.
  • Selecciona Revocar autorizaciones de depur. USB (Revocar autorizaciones de depuración de USB) en la pantalla Opciones para desarrolladores (Developer Options) de tu dispositivo Android para restablecerlo a un estado actualizado.

Si encuentras una solución que no se menciona en esta sección o en Los dispositivos de las Herramientas para desarrolladores de Chrome no detectan el dispositivo cuando están conectados, agrega una respuesta a esa pregunta de Stack Overflow o abre un problema en el repositorio developer.chrome.com.

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

  1. Abre Chrome en tu dispositivo Android.

  2. En chrome://inspect/#devices de tu máquina de desarrollo, verás el nombre del modelo de tu dispositivo Android, seguido del 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.

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

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

    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 la pestaña. Si alguna app usa 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.

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

La versión de Chrome de tu dispositivo Android determina la versión de Herramientas para desarrolladores que se abre en tu equipo 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 la que estás acostumbrado.

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

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

Menú para pausar, volver a cargar, enfocar o cerrar una pestaña.

Cómo inspeccionar elementos

Ve al panel Elements de la instancia de Herramientas para desarrolladores y coloca el cursor sobre un elemento para destacarlo en el viewport 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 Select Element Seleccionar elemento en la 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 está inhabilitada después del primer toque, por lo que deberás volver a habilitarla cada vez que quieras usar esta función.

Realiza una presentación en pantalla de tu pantalla de Android en la máquina de desarrollo

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

Puedes interactuar con la presentación en pantalla de varias maneras:

  • Los clics se convierten en toques. Con esto se activarán eventos táctiles adecuados en el dispositivo.
  • Las pulsaciones de teclas de tu computadora se envían al dispositivo.
  • Para simular un gesto de pellizcar, mantén presionada la tecla Mayúsculas mientras arrastras.
  • Para desplazarte, usa el panel táctil, la rueda del mouse o el puntero del mouse.

Notas sobre la presentación en pantalla:

  • La presentación en pantalla solo muestra contenido de la página. Las partes transparentes de la presentación en pantalla representan las interfaces del dispositivo, como la barra de direcciones de Chrome, la barra de estado de Android o el teclado de Android.
  • La presentación en pantalla tiene un efecto negativo en la velocidad de fotogramas. Inhabilita la presentación en pantalla mientras mides los desplazamientos o las animaciones para obtener un panorama más preciso del rendimiento de la página.
  • Si la pantalla del dispositivo Android se bloquea, el contenido de la presentación en pantalla desaparece. Desbloquea la pantalla del dispositivo Android para reanudar automáticamente la presentación en pantalla.

Cómo depurar manualmente con Android Debug Bridge (adb)

En algunos casos excepcionales, un método alternativo de depuración remota puede ser útil. Por ejemplo, recomendamos que te conectes directamente al protocolo para Herramientas para desarrolladores de Chrome (CDP) de tu navegador 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 tu máquina de desarrollo de la siguiente manera:

  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 CDP del dispositivo al puerto local de la máquina, por ejemplo, 9222. Para ello, ejecute el siguiente comando:

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  6. Una vez que te hayas conectado de forma correcta, verás lo siguiente:

    • http://localhost:9222/json enumera tus objetivos page.
    • http://localhost:9222/json/version expone el extremo de destino browser, como lo indica la documentación del CDA.
    • Se propaga chrome://inspect/#devices, incluso si no se marcó el parámetro de configuración Descubrir dispositivos USB.

Para solucionar problemas, consulta lo siguiente: