Don't miss out on the action at this year's Chrome Dev Summit, streaming live on YouTube. Watch now.

Comenzar con la depuración remota de dispositivos Android

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

  • Configurar tu dispositivo Android para que se pueda depurar de manera remota y detectarlo desde tu equipo de desarrollo.
  • Inspeccionar y depurar contenido activo en tu dispositivo Android desde tu equipo de desarrollo.
  • Presentar en pantalla contenido desde tu dispositivo Android en una instancia de DevTools en tu máquina de desarrollo.

Ilustración de depuración remota

Requisitos

  • Chrome 32, o versiones posteriores, en tu equipo de desarrollo.
  • [Controladores USB][drivers] en tu equipo de desarrollo si usas Windows Verificar que el controlador USB aparezca correctamente en el Administrador de dispositivos).
  • Un cable USB para conectar tu dispositivo Android al equipo de desarrollo.
  • Android 4.0, o versiones posteriores.
  • Chrome para Android instalado en tu dispositivo Android.

Paso 1: Detecta el dispositivo Android

  1. En el dispositivo Android, selecciona Settings > Developer Options > Enable USB Debugging. En Android 4.2 y versiones posteriores, la opción Developer Options está oculta de forma predeterminada. Consulta Habilitación de Developer Options en el dispositivo para obtener información sobre cómo habilitarla.

  2. En tu equipo de desarrollo, abre Chrome. Debes iniciar sesión en Chrome con una de tus cuentas de Google. La depuración remota no funciona en el modo incógnito o el modo de invitado.

  3. Abre DevTools.

  4. En DevTools, haz clic en Main Menu Main Menu y selecciona More tools > Remote devices.

    Apertura del panel lateral de dispositivos remotos

  5. En DevTools, haz clic en la pestaña Settings si se muestra otra pestaña.

  6. Asegúrate de que Discover USB devices esté habilitado.

    Discover USB devices habilitado

  7. Conecta el dispositivo Android directamente al equipo de desarrollo con un cable USB. No uses concentradores USB intermedios. Si esta es la primera vez que conectas el dispositivo Android a este equipo de desarrollo, el dispositivo aparece en Unknown, con el texto Pending Authorization debajo de él.

    Dispositivo desconocido, autorización pendiente

  8. Si tu dispositivo figura como Unknown, acepta la solicitud de permiso Allow USB Debugging en el dispositivo Android. Unknown se reemplaza con el nombre del modelo de tu dispositivo Android. El círculo verde y el texto Connected indican que estás listo para depurar de manera remota tu dispositivo Android desde el equipo de desarrollo.

Paso 2: Depura contenido en tu dispositivo Android desde tu equipo de desarrollo

  1. Si no tienes Chrome abierto en tu dispositivo Android, ábrelo ahora.

  2. De nuevo en DevTools, haz clic en la pestaña que coincide con el nombre del modelo del dispositivo. En la parte superior de esta página, verás el nombre del modelo de tu dispositivo Android seguido por 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. Cada pestaña abierta de Chrome, tiene su propia sección. Puedes interactuar con la 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 la siguiente captura de pantalla, no se han abierto pestañas ni WebView.

    Dispositivo remoto conectado

  3. Junto a New tab, escribe la dirección URL y luego haz clic en Open. La página se abre en una pestaña nueva en el dispositivo Android.

  4. Haz clic en Inspect junto a la dirección URL que abriste. Se abre una instancia nueva de DevTools. La versión de Chrome de tu dispositivo Android determina la versión de DevTools que se abre en tu equipo 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: volver a cargar, focalizar o cerrar una pestaña

Haz clic en More Options More Options junto a la pestaña que deseas volver a cargar, focalizar o cerrar.

volver a cargar, focalizar o cerrar una pestaña

Inspeccionar elementos

Ve al panel Elements de la instancia de DevTools y desplázate sobre un elemento para destacarlo en la ventana de visualización del dispositivo Android.

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

Presentar en pantalla desde un dispositivo Android en un equipo de desarrollo

Haz clic en Toggle Screencast Toggle Screencast para ver el contenido del 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úscula mientras arrastras.
  • Para desplazarte, usa el panel táctil, la rueda del mouse o el puntero de este.

Algunas 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 el cuadro multifunción de Chrome, la barra de estado de Android o el teclado de Android.
  • La presentación en pantalla tiene un efecto negativo en los índices de fotogramas. Inhabilita la presentación en pantalla mientras midas los desplazamientos o las animaciones para obtener una idea más clara 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.

Comentarios

Si te gustaría ayudarnos a mejorar este instructivo, responde estas preguntas.