Have questions about images on the web? Tweet your questions to @ChromiumDev with #AskChrome and we'll answer the top questions in our next #AskChrome episode on YouTube.

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.
La depuración remota te permite inspeccionar desde tu equipo de desarrollo
            una página que se está ejecutando en un dispositivo Android.
Figura 1. La depuración remota te permite inspeccionar desde tu equipo de desarrollo una página que se está ejecutando en un dispositivo Android.

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 Developer Options en el dispositivo Android. Consulta Configurar opciones para programadores en el dispositivo.
  2. Selecciona Enable USB Debugging.
  3. En tu equipo de desarrollo, abre Chrome.
  4. Abre DevTools.
  5. En DevTools, haz clic en el menú principal menú principal y selecciona More tools > Remote devices.

    Apertura de la pestaña Remote Devices desde el menú principal.
    Figura 2. Apertura de la pestaña Remote Devices desde el menú principal

  6. En DevTools, abre la pestaña Settings.

  7. Asegúrate de que la casilla de verificación Discover USB devices esté habilitada.

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

  8. Conecta el dispositivo Android directamente al equipo de desarrollo con un cable USB. La primera vez que haces esto, normalmente, ves que DevTools detecta un dispositivo desconocido. Si ves un punto verde y el texto Connected debajo del nombre del modelo de tu dispositivo Android, significa que DevTools se ha conectado correctamente con el dispositivo. Sigue con el paso 2.

    La pestaña Remote Devices detectó correctamente
       un dispositivo desconocido cuya autorización está pendiente.
    Figura 4. La pestaña Remote Devices detectó correctamente un dispositivo desconocido cuya autorización está pendiente

  9. Si tu dispositivo figura como Unknown, acepta la solicitud de permiso Allow USB Debugging en el dispositivo Android.

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 el equipo de desarrollo y la pantalla inicial del dispositivo 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 does not show Authorize USB debugging dialog box(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 webfundamentals.

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

  1. Abre Chrome en el dispositivo Android.
  2. En la pestaña Remote Devices, haz clic en la pestaña que coincide con el nombre del modelo del dispositivo Android. 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, podrás 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 figura 5 no hay pestañas ni instancias de WebViews abiertas.

    Dispositivo remoto conectado.
    Figura 5. Dispositivo remoto conectado

  3. En el cuadro de texto New tab, escribe una URL y después 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 URL que acabas de abrir. 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.

Menú para volver a cargar, focalizar o cerrar una pestaña.
Figura 6. Menú para volver a cargar, focalizar o cerrar una pestaña

Inspeccionar 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 tocar un elemento en la pantalla del dispositivo Android para seleccionarlo en el panel Elements. Haz clic en Select Element Select
Element en tu instancia de DevTools y después toca el elemento en la pantalla de tu 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 usarla.

Hacer una presentación en pantalla de la pantalla del dispositivo Android en el 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ús mientras arrastras.
  • Para desplazarte, usa el panel táctil, la rueda del mouse o el puntero del mouse.

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 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 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

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.