Depurar dispositivos Windows de forma remota

Depurar contenido en directo de forma remota en un dispositivo Windows 10 o posterior desde su equipo Windows o macOS.

Este tutorial le enseña las siguientes tareas:

• Configure el dispositivo Windows para la depuración remota y conéctese a él desde la máquina de desarrollo.

• Inspeccione y depure contenido activo en su dispositivo Windows desde su máquina de desarrollo.

• Transmita contenido desde su dispositivo Windows a una instancia de DevTools en su máquina de desarrollo.

Paso 1: Configurar el host (máquina de depuración)

El equipo host o depurado es el dispositivo con Windows 10 o posterior que desea depurar. Puede ser un dispositivo remoto al que le resulte difícil acceder físicamente o que no tenga periféricos de teclado y ratón, lo que dificulta la interacción con las DevTools de Microsoft Edge en ese dispositivo.

Para configurar la máquina host (depurado), use las siguientes subsecciones, en orden.

Instalar y configurar Microsoft Edge

1. Si aún no está instalado, en el dispositivo con Windows 10 o posterior que desea depurar, instale Microsoft Edge, desde Conozca Microsoft Edge.

2. Si usa una versión preinstalada de Microsoft Edge en el equipo host (depurado), compruebe que tiene Microsoft Edge (Chromium) y no Microsoft Edge (EdgeHTML). Una forma rápida de comprobarlo es cargar edge://settings/help en el explorador y confirmar que el número de versión es 75 o superior.

3. En Microsoft Edge, ve a edge://flags.

4. En Indicadores de búsqueda, escriba Habilitar depuración remota a través del Portal de dispositivos Windows. Establezca esa marca en Habilitado. Después, haz clic en el botón Reiniciar para reiniciar Microsoft Edge.

Instalar las herramientas remotas para Microsoft Edge

1. Instale las herramientas remotas para Microsoft Edge desde la Microsoft Store.

   Para configurar el equipo host (depurado), debe ejecutar Windows 10 versión 1903 o posterior. Si está en Windows 10 versión 1809 o posterior, es posible que el botón Descargar u Obtener de esa página de Herramientas remotas para Microsoft Edge esté deshabilitado. Actualice el equipo host (depurado) para adquirir herramientas remotas para Microsoft Edge.

   

2. Inicie Herramientas remotas para Microsoft Edge y, si se le solicita, acepte el cuadro de diálogo de permisos en la aplicación.

3. Cierre las herramientas remotas de Microsoft Edge. No es necesario tenerlo abierto para futuras sesiones de depuración remota.

Activar el modo de desarrollador y habilitar el Portal de dispositivos

1. activar el modo de desarrollador; consulte Habilitación del dispositivo para el desarrollo.

2. Habilitar Portal de dispositivos; vea Información general sobre el Portal de dispositivos Windows.

3. Si se encuentra en una red Wi-Fi, asegúrese de que la red está marcada como Dominio o Privada. Para comprobar el estado, abra la aplicación Seguridad de Windows, seleccione Firewall & protección de red y compruebe si la red aparece como una red de dominio o una red privada.

4. Si su red aparece como Pública, vaya a Configuración>Red & Internet>Wi-Fi, haga clic en su red y cambie el botón Perfil de red a Privado.

5. Abre la aplicación Configuración . En Buscar una configuración, introdúzcala Developer settings y selecciónela. Activar el modo para desarrolladores. Ahora puede activar el Portal de dispositivos estableciendo la opción Activar el diagnóstico remoto a través de conexiones de red de área local en Activado. Opcionalmente, puede activar la autenticación para que el dispositivo cliente (depurador) proporcione las credenciales correctas para conectarse a este dispositivo.

6. Si Active el diagnóstico remoto a través de conexiones de red de área local. se ha activado anteriormente, debe desactivarlo y volver a activarlo para que el Portal de dispositivos funcione con Herramientas remotas para Microsoft Edge.

   Si no se muestra una sección Para desarrolladores en Configuración, es posible que el Portal de dispositivos ya esté activado, así que prueba a reiniciar el dispositivo Windows 10 o posterior en su lugar.

   

7. Anote la dirección IP del equipo y el puerto de conexión que se muestran en Conectar mediante:. La dirección IP de la imagen siguiente es 192.168.86.78 y el puerto de conexión es 50080:

   

   Escriba la información sobre el dispositivo cliente (depurador) en la sección siguiente, "Paso 2: Configurar el cliente (máquina depuradora)".

8. Abra pestañas en Microsoft Edge y Progressive Web Apps (PWA) en el equipo host (depurado) que desea depurar desde el equipo cliente (depurador).

Paso 2: Configurar el cliente (máquina de depuración)

El cliente o el equipo del depurador es el dispositivo desde el que desea depurar. Este dispositivo puede ser su máquina de desarrollo diario, o puede ser simplemente su PC o MacBook cuando trabaja desde casa.

1. Para configurar el equipo cliente (depurador), instale Microsoft Edge desde Conocer Microsoft Edge si aún no lo ha hecho.

2. Si usa una versión preinstalada de Microsoft Edge en el equipo host (depurado), compruebe que tiene Microsoft Edge (Chromium) y no Microsoft Edge (EdgeHTML). Una forma rápida de comprobarlo es cargar edge://settings/help en el explorador y confirmar que el número de versión es 75 o superior.

3. Ve a la edge://inspect página en Microsoft Edge. De forma predeterminada, deberías estar en la sección Dispositivos .

4. En Conectarse a un dispositivo Windows remoto, escriba la dirección IP y el puerto de conexión de la máquina host (depurado) en el cuadro de texto siguiendo este patrón: http://IP address:connection port.

5. Haga clic en Conectar al dispositivo.

   

6. Si configura la autenticación para el equipo host (depurado), se le pedirá que escriba el nombre de usuario y la contraseña del equipo cliente (depurador) para que se conecte correctamente.

Usar https en lugar de http

Si desea conectarse al equipo host (depurado) usando https , en lugar de http:

1. Vaya a http://IP address:50080/config/rootcertificate en Microsoft Edge en el equipo cliente (depurador). Se descargará automáticamente un certificado de seguridad denominado rootcertificate.cer.

2. Seleccione rootcertificate.cer. Se abrirá la herramienta Administrador de certificados de Windows.

3. Haga clic en Instalar certificado..., asegúrese de que Usuario actual esté activado y luego haga clic en Siguiente.

4. Haga clic en Colocar todos los certificados en el siguiente almacén y haga clic en Examinar....

5. Seleccione el almacén de Entidades de certificación raíz de confianza y, a continuación, haga clic en Aceptar.

6. Haga clic en Siguiente y, a continuación, haga clic en Finalizar.

7. Si se le solicita, confirme que desea instalar este certificado en el almacén de entidades de certificación raíz de confianza .

8. Ahora, al conectarse al equipo host (depurado) desde el equipo cliente (depurador) mediante la edge://inspect página, debe usar un valor diferente connection port . De forma predeterminada, para Windows de escritorio, el Portal de dispositivos utiliza 50080 como archivo connection port para http Para https, el Portal de dispositivos lo usa 50043 , así que siga este patrón: https://IP address:50043 en la edge://inspect página.

Para ver los puertos predeterminados que usa el Portal de dispositivos, consulte la tabla en Configuración en Información general del Portal de dispositivos Windows.

Puertos predeterminados

El puerto predeterminado es http50080 y el puerto predeterminado es https50043, pero este no es siempre el caso, ya que Device Portal en el escritorio reclama puertos en el intervalo efímero (>50 000) para evitar colisiones con las notificaciones de puerto existentes en el dispositivo.

Para ver los puertos predeterminados que usa el Portal de dispositivos, consulte la tabla en Configuración en Información general del Portal de dispositivos Windows.

Para obtener información sobre la configuración de puertos, consulte Portal de dispositivos Windows para escritorio.

Vea también:

• Configuración basada en el Registro en el Portal de dispositivos Windows para escritorio.

Paso 3: Depurar el contenido del cliente en el host

Si el equipo cliente (depurador) se conecta correctamente al equipo host (depurado), la edge://inspect página del cliente ahora muestra una lista de las pestañas en Microsoft Edge y las PWA abiertas en el host.

Determine el contenido que desea depurar y, a continuación, haga clic en Inspeccionar. Microsoft Edge DevTools se abre en una pestaña nueva y transmite el contenido del equipo host (depurado) al equipo cliente (depurador). Ahora puede utilizar toda la eficacia de Microsoft Edge DevTools en el cliente para el contenido que se ejecuta en el host.

Vea también:

• Documentación de Microsoft Edge DevTools

Inspeccionar elementos

Por ejemplo, intente inspeccionar un elemento. Vaya a la herramienta Elementos de la instancia de DevTools en el cliente y mantenga el puntero sobre un elemento para resaltarlo en la ventana gráfica del dispositivo host.

También puede tocar un elemento en la pantalla del dispositivo host para seleccionarlo en la herramienta Elementos . Seleccione Seleccionar elemento en la instancia de DevTools en el cliente y, a continuación, pulse el elemento en la pantalla del dispositivo host.

Select Element está deshabilitado después del primer toque, por lo que debe activarlo nuevamente cada vez que quiera usar esta característica.

Importante

El panel Detectores de eventos de la herramienta Elementos está en blanco en Windows 10, versión 1903. Se trata de un problema conocido y el equipo planea corregir el panel Detectores de eventos en una actualización de mantenimiento para Windows 10, versión 1903.

Paso 4: Transmitir la pantalla del host al dispositivo del cliente

De forma predeterminada, la instancia de DevTools en el cliente tiene activada la transmisión de pantalla, lo que le permite ver el contenido del dispositivo host en la instancia de DevTools en el dispositivo cliente. Haga clic en Alternar screencast para activar o desactivar esta función.

Puede interactuar con el screencast de varias maneras:

• Los clics se traducen en pulsaciones, que activan eventos táctiles adecuados en el dispositivo.
• Las pulsaciones de teclas del equipo se envían al dispositivo.
• Para simular un movimiento de pellizco, mantenga presionada la tecla Mayús mientras arrastra.
• Para desplazarse, use el panel táctil o la rueda del mouse, o lance con el puntero del mouse.

Notas sobre los screencasts:

• Los screencasts solo muestran contenido de la página. Las partes transparentes del screencast representan las interfaces del dispositivo, como la barra de direcciones de Microsoft Edge, la barra de tareas de Windows 10 o posterior y el teclado de Windows 10 o posterior.

• Los screencasts afectan negativamente a la velocidad de fotogramas. Deshabilita la difusión de pantalla mientras mides desplazamientos o animaciones para obtener una imagen más precisa del rendimiento de tu página.

• Si la pantalla de su dispositivo host se bloquea, el contenido de su screencast desaparece. Desbloquee la pantalla del dispositivo host para reanudar automáticamente la transmisión de pantalla.