Depuración remota de dispositivos Windows

Depuración remota de contenido en directo en un dispositivo Windows 10 o posterior desde el equipo Windows o macOS.

En este tutorial se le enseñan 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 en directo en el dispositivo Windows desde la máquina de desarrollo.

• Contenido de screencast desde el dispositivo Windows en una instancia de DevTools en el equipo de desarrollo.

Paso 1: Configurar el host (equipo depurado)

El host o la máquina depurada es el dispositivo 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 mouse, lo que dificulta la interacción con Microsoft Edge DevTools en ese dispositivo.

Para configurar el equipo host (depurado):

1. Instalación y configuración de Microsoft Edge

2. Instalar las herramientas remotas para Microsoft Edge (beta) desde Microsoft Store

3. Activación del modo de desarrollador y habilitación de Device Portal

Instalación y configuración de Microsoft Edge

1. Si aún no lo ha hecho, en el dispositivo Windows 10 o posterior que desea depurar, instale Microsoft Edge desde esta página.

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 manera 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. Vaya a edge://flags en Microsoft Edge.

4. En Marcas de búsqueda, escriba Habilitar la depuración remota a través de Windows Device Portal. Establezca esa marca en Habilitado. A continuación, haga clic en el botón Reiniciar para reiniciar Microsoft Edge.

Instalar las herramientas remotas para Microsoft Edge (beta)

Instale herramientas remotas para Microsoft Edge (beta) desde Microsoft Store.

El botón Obtener de Herramientas remotas para Microsoft Edge (beta) puede deshabilitarse si está en Windows 10 o en la versión 1809 o posterior. Para configurar el equipo host (depurado), debe ejecutarse Windows 10 versión 1903 o posterior. Actualice la máquina host (depurada) para adquirir herramientas remotas para Microsoft Edge (beta).

Inicie herramientas remotas para Microsoft Edge (beta) y, si se le solicita, acepte el cuadro de diálogo de permisos en la aplicación. Ahora puede cerrar Herramientas remotas para Microsoft Edge (beta) y no es necesario que esté abierto para futuras sesiones de depuración remota.

Activación del modo de desarrollador y habilitación de Device Portal

Si está en una red WiFi, asegúrese de que la red esté marcada como Dominio o Privado. 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 red privada.

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

Ahora, abra la aplicación Configuración . En Buscar una configuración, escriba Developer settings y selecciónela. Active el Modo de desarrollador. Ahora puede activar Device Portal si establece Activar diagnósticos remotos a través de conexiones de red de área local en Activado. A continuación, puede activar opcionalmente la autenticación para que el dispositivo cliente (depurador) proporcione las credenciales correctas para conectarse a este dispositivo.

Si se ha activado anteriormente Activar diagnósticos remotos a través de conexiones de red de área local, debe desactivarlo y volver a activarlo para que Device Portal funcione con Herramientas remotas para Microsoft Edge (beta). Si no se muestra una sección Para desarrolladores en Configuración, es posible que el Portal de dispositivos ya esté activado, por lo que intente reiniciar el dispositivo Windows 10 o posterior en su lugar.

Tenga en cuenta 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 del dispositivo cliente (depurador) en la sección siguiente. Abra pestañas en Microsoft Edge y Web Apps progresivas (PWA) en el equipo host (depurado) que desea depurar desde el equipo cliente (depurador).

Paso 2: Configurar el cliente (equipo del depurador)

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

1. Para configurar el equipo cliente (depurador), instale Microsoft Edge desde esta página 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 manera 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. Vaya a la edge://inspect página de Microsoft Edge. De forma predeterminada, debería estar en la sección Dispositivos .

4. En Conectar a un dispositivo Windows remoto, escriba la dirección IP y el puerto de conexión del equipo host (depurado) en el cuadro de texto que sigue este patrón: http://IP address:connection port.

5. Haga clic en Conectar al dispositivo.

   

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

Uso de https en lugar de http

Si desea conectarse a la máquina host (depurada) mediante https en lugar de http:

1. Vaya a http://IP address:50080/config/rootcertificate en Microsoft Edge en el equipo cliente (depurador). Esto descarga 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 el usuario actual está activado y, a continuación, 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 Entidades de certificación raíz de confianza y 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 entidades de certificación raíz de confianza .

8. Ahora, al conectarse a la máquina host (depurada) desde la máquina cliente (depurador) mediante la edge://inspect página, debe usar un valor diferente connection port . De forma predeterminada, para Windows de escritorio, Device Portal usa 50080 como connection port para http. Para https, Device Portal usa 50043 este patrón: https://IP address:50043 en la edge://inspect página. Obtenga más información sobre los puertos predeterminados que usa Device Portal.

Puertos predeterminados

El puerto predeterminado para http es 50080 y el puerto predeterminado para https es 50043, pero no siempre es el caso, porque Device Portal en los puertos de notificaciones de escritorio en el intervalo efímero (>50 000) para evitar colisiones con las notificaciones de puerto existentes en el dispositivo. Para obtener más información, consulta la sección Configuración de puertos de Device Portal en el escritorio de Windows.

Paso 3: Depurar contenido en el host desde el cliente

Si la máquina cliente (depurador) se conecta correctamente a la máquina host (depurada), la edge://inspect página del cliente ahora muestra una lista de las pestañas de Microsoft Edge y las PPA 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 nueva pestaña y proyecta en pantalla el contenido de la máquina host (depurada) a la máquina cliente (depurador). Ahora puede usar toda la potencia de Microsoft Edge DevTools en el cliente para el contenido que se ejecuta en el host. Obtenga más información sobre cómo usar Microsoft Edge DevTools aquí.

Inspeccionar elementos

Por ejemplo, intente inspeccionar un elemento. Vaya a la herramienta Elements de la instancia de DevTools en el cliente y mantenga el puntero sobre un elemento para resaltarlo en la ventanilla del dispositivo host.

También puede pulsar 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.

Seleccionar elemento está deshabilitado después del primer toque, por lo que debe activarlo de nuevo cada vez que quiera usar esta característica.

Importante

El panel Agentes de escucha 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 Agentes de escucha de eventos en una actualización de mantenimiento a Windows 10 versión 1903.

Paso 4: Difusión de pantalla de la pantalla de host al dispositivo cliente

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

Puede interactuar con el screencast de varias maneras:

• Los clics se traducen en pulsaciones, desencadenando eventos táctiles adecuados en el dispositivo.
• Las pulsaciones de tecla del equipo se envían al dispositivo.
• Para simular un gesto de desliz, mantenga presionada la tecla Mayús mientras arrastra.
• Para desplazarse, use el trackpad o la rueda del mouse, o fling con el puntero del mouse.

Notas sobre los screencasts:

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

• Los canales de pantalla afectan negativamente a las velocidades de fotogramas. Deshabilite la difusión de pantalla al medir desplazamientos o animaciones para obtener una imagen más precisa del rendimiento de la página.

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

Problemas conocidos

• El panel Agentes de escucha de eventos de la herramienta Elementos está en blanco en Windows 10 versión 1903. El equipo planea corregir el panel Agentes de escucha de eventos en una actualización de mantenimiento para Windows 10 versión 1903.

• El panel Cookies del panel Aplicación está en blanco en Windows 10 versión 1903. El equipo planea corregir el panel Cookies de una actualización de servicio para Windows 10 versión 1903.

• La herramienta Auditorías , la herramienta Vista 3D , la sección Dispositivos emulados de Configuración y el panel árbol Accesibilidad de la herramienta Elementos no funcionan según lo esperado.

• El explorador de archivos no se inicia desde DevTools en la herramienta Orígenes ni en el panel Seguridad al depurar de forma remota.