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

  • Artículo
  • Tiempo de lectura: 8 minutos

Depuración remota de contenido dinámico en un Windows 10 o posterior desde el equipo Windows o macOS. En este tutorial se le enseñarán las siguientes tareas:

  • Configura el dispositivo Windows para la depuración remota y conéctate a él desde el equipo de desarrollo.
  • Inspeccione y depure contenido en directo en Windows dispositivo desde el equipo de desarrollo.
  • Difusión en pantalla del contenido Windows dispositivo en una instancia de DevTools en el equipo de desarrollo.

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

El host o la máquina de depuración es Windows 10 o posterior que desea depurar. Puede ser un dispositivo remoto al que es difícil acceder físicamente o puede que no tenga periféricos de teclado y mouse, lo que dificulta la interacción con las DevTools de Microsoft Edge en ese dispositivo. Para configurar el equipo host (debuggee), debe completar las siguientes acciones.

Instalar y configurar Microsoft Edge

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

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

  3. Vaya a edge://flags en Microsoft Edge.

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

Configuración de "Habilitar la depuración remota Windows de Device Portal".

Instalar las herramientas remotas para Microsoft Edge (Beta)

Instale las herramientas remotas para Microsoft Edge (Beta) desde el Microsoft Store.

Nota

El botón Obtener de herramientas remotas para Microsoft Edge (Beta) puede deshabilitarse si está en Windows 10 versión 1809 o posterior o anterior. Para configurar el equipo host (debuggee), debe ejecutarse Windows 10 versión 1903 o posterior. Actualice el equipo host (debuggee) para adquirir las herramientas remotas para Microsoft Edge (Beta).

Herramientas remotas para Microsoft Edge (Beta) en el Microsoft Store.

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

Activar el modo de desarrollador y habilitar Device Portal

Si está en una red WiFi, asegúrese de que la red esté marcada como Dominio o Privado. Puedes comprobar el estado abriendo la aplicación Seguridad de Windows, seleccionando Firewall & protección de red **** y comprobando si la red aparece como una red de dominio o una red privada.

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

Ahora, abre la Configuración aplicación. En Buscar una configuración, escriba Developer settings y selecciónelo. Alternar en el modo de desarrollador. Ahora puedes activar el Portal de dispositivos estableciendo Activar diagnóstico remoto a través de conexiones de red de área local en On. A continuación, puedes activar opcionalmente la autenticación para que el dispositivo cliente (depurador) deba proporcionar las credenciales correctas para conectarse a este dispositivo.

Nota

Si activa el diagnóstico remoto a través de conexiones de red de área local. estaba activado anteriormente, debe desactivarlo y volver a activarlo para que Device Portal funcione con las Herramientas remotas para Microsoft Edge (Beta). Si una sección Para desarrolladores no se muestra en Configuración, es posible que device portal ya esté activado, por lo que intenta reiniciar el dispositivo Windows 10 o posterior en su lugar.

La Configuración con el modo de desarrollador y device portal configurados.

Tenga en cuenta la dirección IP de la máquina y el puerto de conexión que se muestran Conectar con:. La dirección IP de la imagen siguiente es 192.168.86.78 y el puerto de conexión es 50080 :

Tenga en cuenta la dirección IP y el puerto de conexión en el Configuración.

Escribes la información en el dispositivo cliente (depurador) en la siguiente sección. Abra pestañas en Microsoft Edge y aplicaciones web progresivas (PWA) en el equipo host (debuggee) que desea depurar desde el equipo cliente (depurador).

Paso 2: Configurar el cliente (máquina depuradora)

El cliente o el equipo depurador es el dispositivo desde el que desea depurar. Este dispositivo puede ser tu máquina de desarrollo diaria, o puede ser tu PC o MacBook cuando trabajes 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 (debuggee), compruebe que tiene Microsoft Edge (Chromium) y no Microsoft Edge (EdgeHTML). Una forma rápida de comprobar es cargar en el explorador y confirmar que el número de versión edge://settings/help 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 aun dispositivo Windows remoto, escriba la dirección IP y el puerto de conexión del equipo host (debuggee) en el cuadro de texto siguiendo este patrón: http:// : IP address connection port .

  5. Haga clic Conectar en Dispositivo.

    La edge://inspect en el cliente.

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

Usar https en lugar de http

Si desea conectarse al equipo host (debuggee) usando 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 abre la herramienta Windows Administrador de certificados.

  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, a continuación, haga clic en Aceptar.

  6. Haz clic en Siguiente y, después, 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 (debuggee) desde el equipo cliente (depurador) mediante la página, debe edge://inspect usar un valor connection port diferente. De forma predeterminada, para Windows escritorio, Device Portal usa 50080 como connection port for http . For https , el Portal de dispositivos usa así que siga este 50043 patrón: https:// : en la IP address 50043 edge://inspect página. Obtenga más información sobre los puertos predeterminados usados por Device Portal.

Nota

El puerto predeterminado para es y el puerto predeterminado es , pero no siempre es el caso, porque Device Portal en puertos de notificaciones de escritorio en el intervalo http 50080 https 50043 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 Puerto Configuración para Device Portal en Windows escritorio.

Paso 3: Depurar contenido en el host desde el cliente

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

La edge://inspect en el cliente muestra las pestañas de Microsoft Edge y PWA en el host.

Determine el contenido que desea depurar y, a continuación, haga clic en Inspeccionar. El Microsoft Edge DevTools se abre en una nueva pestaña y se proyecta el contenido del equipo host (debuggee) al equipo 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 el Microsoft Edge DevTools aquí.

El Microsoft Edge DevTools en el cliente depurando una pestaña en Microsoft Edge en el host.

Inspeccionar elementos

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

También puedes pulsar un elemento en la pantalla del dispositivo host para seleccionarlo en la herramienta Elementos. Selecciona Seleccionar elemento en la instancia de DevTools en el cliente y, a continuación, pulsa el elemento en la pantalla del dispositivo host.

Nota

Select Element está deshabilitado después del primer toque, por lo que debes volver a activarlo cada vez que quieras usar esta característica.

Importante

El panel Escuchas de eventos de la herramienta Elementos está en blanco Windows 10 versión 1903. Este es un problema conocido y el equipo planea corregir el panel Escuchas de eventos en una actualización de mantenimiento a Windows 10 versión 1903.

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

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

El botón Alternar difusión en pantalla del Microsoft Edge DevTools en el cliente.

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.

Algunas notas de las 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 de Microsoft Edge, la barra de tareas Windows 10 o posterior y el teclado Windows 10 o posterior.
  • 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 host se bloquea, el contenido de la difusión en pantalla desaparece. Desbloquea la pantalla del dispositivo host para reanudar automáticamente la difusión por pantalla.

Problemas conocidos

El panel Escuchas de eventos de la herramienta Elementos está en blanco Windows 10 versión 1903. El equipo tiene previsto corregir el panel Escuchas de eventos en una actualización de mantenimiento a Windows 10 versión 1903.

El panel Cookies del panel Aplicación está en blanco Windows 10 versión 1903. El equipo tiene previsto corregir el panel Cookies en una actualización de servicio a Windows 10 versión 1903.

La herramienta Auditorías, la herramienta Vista **** 3D, la sección Dispositivos **** emulados de **** Configuracióny el panel de árbol Accesibilidad de la herramienta Elementos no funcionan actualmente como se esperaba. El equipo planea corregir las herramientas enumeradas en una actualización futura de Microsoft Edge.

El explorador de archivos no se inicia desde DevTools en la herramienta Orígenes ni en el panel Seguridad al depurar remotamente. El equipo planea corregir las herramientas en una actualización futura de Microsoft Edge.