Introducción a la depuración remota de dispositivos Android

Depuración remota de contenido en directo en un dispositivo Android desde Windows o equipo macOS. La siguiente página de tutorial le enseña a completar las siguientes acciones.

  • Configura tu dispositivo Android para la depuración remota y descóyralo desde el equipo de desarrollo.
  • Inspecciona y depura contenido en directo en tu dispositivo Android desde el equipo de desarrollo.
  • Difusión de contenido desde el dispositivo Android a una instancia de DevTools en el equipo de desarrollo.

Nota

Actualmente no se admite la depuración Microsoft Edge la aplicación en dispositivos iOS. La siguiente guía se centra específicamente en la depuración remota Microsoft Edge dispositivos Android. Si tienes un dispositivo macOS, sigue la guía de depuración de Brightcove para depurar de forma remota Microsoft Edge en un dispositivo iOS con Safari. Para obtener más información acerca de la herramienta Inspector web en Safari, vea Safari Web Development Tools.

Paso 1: Descubrir el dispositivo Android

El flujo de trabajo siguiente funciona para la mayoría de los usuarios. Para obtener más ayuda, consulta Troubleshooting: DevTools is not detecting the Android device section.

  1. Abre la pantalla Opciones de desarrollador en tu Android. Consulta Configure On-Device Developer Options.

  2. Seleccione Habilitar depuración USB.

  3. En el equipo de desarrollo, abra Microsoft Edge.

  4. En la barra dirección, vaya a edge://inspect .

    La edge://inspect en Microsoft Edge.

  5. Conectar el dispositivo Android directamente a la máquina de desarrollo mediante un cable USB. La primera vez que intentes conectarte, debería mostrarse un mensaje sobre DevTools que detecta un dispositivo desconocido. Acepta el símbolo del permiso Permitir depuración USB en tu dispositivo Android.

    El símbolo del sistema de permisos Permitir depuración USB en un dispositivo Android.

  6. Si se muestra el nombre del modelo del dispositivo Android, Microsoft Edge ha establecido correctamente la conexión con el dispositivo. Continúe con la sección Paso 2.

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

Use las siguientes sugerencias para ayudarle a solucionar problemas con la configuración correcta del hardware.

  • Si usas un concentrador USB, prueba a conectar el dispositivo Android directamente a la máquina de desarrollo.
  • Prueba a desconectar el cable USB entre el dispositivo Android y la máquina de desarrollo y, a continuación, vuelve a conectar el cable USB. Completa la tarea mientras se desbloquean las pantallas de la máquina de desarrollo y Android.
  • Asegúrese de que el cable USB funciona. Debes poder inspeccionar los archivos del dispositivo Android desde el equipo de desarrollo.

Use las siguientes sugerencias para comprobar que el software está configurado correctamente.

Si el símbolo del sistema Permitir depuración USB no se muestra en el dispositivo Android, pruebe:

  • Desconectar y volver a conectar el cable USB mientras DevTools se centra en la máquina de desarrollo y se muestra la pantalla principal de Android. A veces, el mensaje no se muestra cuando las pantallas de la máquina de desarrollo o Android están bloqueadas.
  • Actualizar la configuración de pantalla para el dispositivo Android y la máquina de desarrollo para que nunca se quedán.
  • Establecer el modo USB para Android en PTP. Vea Galaxy S4 no muestra el cuadro de diálogo Autorizar depuración USB.
  • Selecciona Revocar autorizaciones de depuración USB en la pantalla Opciones de desarrollador del dispositivo Android para restablecerla a un estado nuevo. ****

Si encuentras una solución que no se menciona en esta página o en DevTools Devices no detecta el dispositivo cuando está conectado a Stack Overflow, agrega la solución a esa pregunta de desbordamiento de pila.

Paso 2: Depurar contenido en el dispositivo Android desde el equipo de desarrollo

  1. Abre Microsoft Edge en tu dispositivo Android.

  2. Vaya a edge://inspect . Se muestra el nombre del modelo del dispositivo Android, seguido del número de serie del dispositivo. A continuación, se debe mostrar la versión Microsoft Edge que se ejecuta en el dispositivo, con el número de versión entre paréntesis. Cada pestaña Microsoft Edge obtiene una sección única. Puede interactuar con esa pestaña desde una sección.

    Un dispositivo remoto conectado.

  3. En el cuadro de texto Abrir pestaña con dirección URL, escriba una dirección URL y, a continuación, haga clic en Abrir. La página se abre en una nueva pestaña en el dispositivo Android.

  4. Haga clic en Inspeccionar junto a la dirección URL que acaba de abrir. Se abre una nueva instancia de DevTools.

Más acciones: enfocar, actualizar o cerrar una pestaña

Seleccione la pestaña foco, vuelvaa cargar o cierre junto a la pestaña que desea enfocar, actualizar o cerrar.

Botones para enfocar, actualizar o cerrar una pestaña.

Inspeccionar elementos

Vaya a la herramienta Elementos de la instancia de DevTools y mantenga el mouse sobre un elemento para resaltarlo en la ventanilla del dispositivo Android.

También puedes pulsar un elemento en la pantalla del dispositivo Android para seleccionarlo en la herramienta Elementos. Haz clic en Seleccionar elemento ( Seleccionar elemento ) en la instancia de  DevTools y, a continuación, selecciona el elemento en la pantalla del dispositivo Android.

Nota

Select Element está deshabilitado después de la primera selección, por lo que debes volver a habilitarlo cada vez que quieras usar esta característica.

Difusión en pantalla de la pantalla de Android a la máquina de desarrollo

Haz clic en el icono Alternar difusión por pantalla ( Alternar difusión por pantalla ) para ver el contenido del dispositivo  Android en la instancia de DevTools.

Puede interactuar con la difusión en pantalla de varias maneras:

  • Los clics se traducen en pulsaciones, lo que dispara eventos táctiles adecuados en el dispositivo.
  • Las pulsaciones de teclas del equipo se envían al dispositivo.
  • Para simular un gesto de pellizco, mantén Shift presionado mientras arrastras.
  • Para desplazarse, use el trackpad o la rueda del mouse o fling con el puntero del mouse.

Nota

Usa las siguientes sugerencias para ayudarte a la difusión en pantalla.

  • Los difusión en pantalla solo muestran el contenido de la página. Las partes transparentes de la difusión en pantalla representan interfaces de dispositivo, como la barra de direcciones Microsoft Edge, la barra de estado de Android o el teclado androide.
  • Las difusión en pantalla afectan negativamente a las tasas de fotogramas. Deshabilite la difusión por pantalla al medir desplazamientos o animaciones para obtener una imagen más precisa del rendimiento de la página.
  • Si la pantalla del dispositivo Android se bloquea, el contenido de la difusión en pantalla desaparece. Desbloquea la pantalla del dispositivo Android para reanudar automáticamente la difusión por pantalla.

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

 Licencia de Creative Commons Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.