Cómo depurar de forma remota dispositivos Android

Kayce Basques
Kayce Basques
X GitHub Error
Sofia Emelianova
Sofia Emelianova
GitHub

Depura contenido activo en un dispositivo Android de manera remota desde una 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 detectarlo desde tu máquina de desarrollo.
  • Inspecciona y depura contenido activo en tu dispositivo Android desde tu máquina de desarrollo.
  • Presenta en pantalla contenido desde tu dispositivo Android en una instancia de DevTools en tu máquina de desarrollo.

Diagrama de depuración remota

Paso 1: Detecta el dispositivo Android

El siguiente flujo de trabajo funciona 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 en el dispositivo.
  2. Selecciona Habilitar la 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. Discover USB devices esté habilitado.

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

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

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

    Autenticación pendiente del dispositivo sin conexión.

    En este caso, acepta la solicitud 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 se conectó correctamente con tu dispositivo.

    Un dispositivo conectado correctamente designado con un nombre de modelo

  9. Continúa con el Paso 2.

Solución de problemas: DevTools no detecta el dispositivo Android

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

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

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

Si no aparece el mensaje Allow USB Debugging en el dispositivo Android, prueba lo siguiente:

  • Desconectar y volver a conectar el cable USB mientras DevTools está seleccionada en tu máquina de desarrollo y la pantalla principal de Android es visible. En otras palabras, a veces el mensaje no aparece si la pantalla del dispositivo Android o la del equipo de desarrollo están bloqueadas.
  • Actualizar la configuración de pantalla del dispositivo Android y el equipo de desarrollo de modo que nunca pasen a un estado de suspensión.
  • Configurar el modo USB del dispositivo Android en PTP. Consulta Galaxy S4 no muestra el cuadro de diálogo Authorize USB debugging.
  • Selecciona Revoke USB Debugging Authorizations en la pantalla Developer Options de tu dispositivo Android para restablecer el estado.

Si encuentras una solución que no se menciona en esta sección o 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 equipo 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 de eso, 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.

    Una pestaña remota en una sección.

    Cada pestaña remota de Chrome tiene su propia sección en chrome://inspect/#devices. Puedes interactuar con esa pestaña desde esta sección. Si alguna app está usando WebView, también verás una sección para cada una de esas apps. 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 DevTools.

Una nueva instancia de DevTools para la pestaña remota.

La versión de Chrome que se ejecuta en tu dispositivo Android determina la versión de DevTools que se abre en tu máquina de desarrollo. Por lo tanto, si el dispositivo Android ejecuta una versión anterior de Chrome, la instancia de DevTools puede tener una apariencia muy diferente de la que estás acostumbrado.

Más acciones: Detener, 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.

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

Inspecciona los elementos

Ve al panel Elements de la instancia de DevTools y coloca el cursor sobre un elemento para destacarlo en la vista del puerto del dispositivo Android.

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

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

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

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

  • Los clics se convierten en toques. Con esto se activarán eventos de entrada táctil 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.

Algunas notas sobre las presentaciones en pantalla:

  • Las presentaciones en pantalla solo muestran 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.
  • Las presentaciones en pantalla afectan negativamente los índices de fotogramas. Inhabilita la presentación en pantalla mientras mides los desplazamientos o las animaciones para obtener una idea más clara del rendimiento de tu 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 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 Chrome DevTools (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 a través de:

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

  5. Reenvía el socket CDP del 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 establecido la conexión correctamente, verifica lo siguiente:

    • http://localhost:9222/json muestra tus objetivos de page.
    • http://localhost:9222/json/version expone el extremo de destino browser, como se indica en la documentación de CDP.
    • Se propaga chrome://inspect/#devices, incluso sin marcar la configuración de Discover USB devices.

Para solucionar problemas, consulta lo siguiente: