Emular dispositivos móviles en Microsoft Edge DevTools

Usa la emulación de dispositivo para aproximar el aspecto de la página y cómo responde en un dispositivo móvil. El Microsoft Edge DevTools proporciona una colección de características que le ayudarán a emular dispositivos móviles. La colección incluye las siguientes características.

• Simular una ventanilla móvil
• Limitar la red
• Limitar la CPU
• Reemplazar geolocalización
• Establecer orientación
• Establecer la cadena de agente de usuario
• Establecer sugerencias de cliente de agente de usuario

Limitaciones

La emulación de dispositivo es una aproximación de primer orden de la apariencia de la página en un dispositivo móvil. En realidad, la emulación de dispositivos no ejecuta el código en un dispositivo móvil. En su lugar, se simula la experiencia del usuario móvil desde el portátil o el escritorio.

Algunos aspectos de los dispositivos móviles nunca se emulan en DevTools. Por ejemplo, la arquitectura de las CPU móviles es diferente de la arquitectura de las CPU de equipos portátiles o de escritorio. Cuando hay dudas, la mejor opción es ejecutar la página en un dispositivo móvil.

Usa depuración remota para interactuar con el código de una página de tu equipo mientras la página se ejecuta realmente en un dispositivo móvil. Puede ver, cambiar, depurar, perfil o los cuatro mientras interactúa con el código. El equipo puede ser un bloc de notas o un equipo de escritorio.

Simular una ventanilla móvil

Selecciona Alternar emulación de dispositivo ( Alternar barra de herramientas del dispositivo ) o selecciona Personalizar y DevTools ( ... ) > Emulación de dispositivo para abrir la interfaz de usuario que te permite simular una ventanilla móvil.

De forma predeterminada, la barra de herramientas del dispositivo se abre en modo de ventanilla dinámica.

Modo de ventanilla dinámica

Para probar rápidamente el aspecto de la página en varios tamaños de pantalla, arrastre los controladores para cambiar el tamaño de la ventanilla a las dimensiones necesarias. También puede especificar valores específicos en los cuadros de ancho y alto. En la figura siguiente, el ancho se establece en 626 y el alto se establece en 516 .

Mostrar consultas multimedia

Si ha definido consultas multimedia en la página, vaya a las dimensiones de ventanilla donde esas consultas multimedia tengan efecto mostrando puntos de interrupción de consulta multimedia encima de la ventanilla. Seleccione Más opciones Mostrarconsultas > multimedia.

Seleccione un punto de interrupción para cambiar el ancho de la ventanilla para que se desencadene la consulta multimedia.

Establecer el tipo de dispositivo

Usa la lista Tipo de dispositivo para simular un dispositivo móvil o dispositivo de escritorio.

En la tabla siguiente se describen las diferencias entre las opciones de tipo de dispositivo disponibles. La columna Rendering method hace referencia a si Microsoft Edge la página como una ventanilla móvil o de escritorio. La columna de icono cursor hace referencia al tipo de cursor que se muestra al pasar el mouse en la página. La columna Eventos desencadenados hace referencia a si la página desencadena touch o eventos al interactuar con la click página.

Modo de ventanilla de dispositivo móvil

Para simular las dimensiones de un dispositivo móvil específico, selecciona el dispositivo en la lista Dispositivo.

Girar la ventanilla a orientación horizontal

Pruebe la página web en orientación horizontal.

• Para girar la ventanilla a orientación horizontal, seleccione Girar ( ).

Vea también Establecer orientación.

Mostrar fotograma del dispositivo

Para simular las dimensiones de un dispositivo móvil específico, abra Más opciones y, a continuación, seleccione Mostrar fotograma del dispositivo para mostrar el marco del dispositivo físico alrededor de la ventanilla.

El marco del dispositivo para el iPhone 6:

Agregar un dispositivo móvil personalizado

Si la opción de dispositivo móvil que necesitas no está incluida en la lista predeterminada, puedes agregar un dispositivo personalizado. Para agregar un dispositivo personalizado:

1. Seleccione la lista Dispositivo > Editar.

   

2. Seleccione Agregar dispositivo personalizado.

3. En Dispositivos emulados, escriba un nombre de dispositivo, ancho de pantalla y alto de pantalla para el dispositivo personalizado. La relación de píxeles del dispositivo, la cadena de agente de usuarioy los campos de tipo de dispositivo son opcionales. El campo de tipo de dispositivo tiene el valor predeterminado Mobile.

   

Mostrar reglas

Si necesita medir las dimensiones de la pantalla, puede usar reglas para medir el tamaño de pantalla en píxeles. Seleccione Más opciones Mostrarreglas para mostrar las reglas arriba y a la izquierda de la > **** ventanilla.

Las reglas aparecen encima y a la izquierda de la ventanilla:

Acercar la ventanilla

Para probar la apariencia de la página en varios niveles de zoom, usa la lista Zoom para acercar o alejar.

Limitar la red y la CPU

Los dispositivos móviles suelen tener restricciones de red y CPU. Prueba la rapidez con la que se carga la página y cómo responde a diferentes velocidades de Internet y CPU.

1. Seleccione Lista de limitaciones y cambie el valor preestablecido a Móvil de nivel medio o Móvil de gama baja.
   • El móvil de nivel intermedio simula y limita la fast 3G CPU. Es cuatro veces más lento de lo normal.
   • El móvil de gama baja simula y limita la slow 3G CPU. Es seis veces más lento de lo normal.

Toda la limitación se basa en la funcionalidad normal de su portátil o escritorio.

Limitar solo la CPU

Para limitar la CPU solo y no la red:

1. Seleccione el panel Rendimiento y seleccione Capturar Configuración ( Capturar ).
2. Seleccione CPU > 4x slowdown o 6x slowdown.

Limitar solo la red

Para limitar la red solo y no la CPU:

1. Seleccione la herramienta Red y, a continuación, seleccione OnlineFast > 3G o Slow 3G.

   

   O bien, seleccione Control + Shift + P (Windows, Linux) o Command + Shift + P ****(macOS) 3G **** **** para abrir el menú comando , escriba y seleccione Habilitar la limitación rápida 3G o Habilitar la limitación 3G lenta.

   

También puede establecer la limitación de red desde el panel Rendimiento:

1. Seleccione Capturar Configuración ( Capturar Configuración ) y seleccione la lista Red y cambie el valor preestablecido a Fast 3G o Slow 3G. ****

   

Reemplazar geolocalización

Si la página depende de la información de geolocalización de un dispositivo móvil para representarse correctamente, proporcione distintas geolocalizaciones mediante la interfaz de usuario que reemplaza la geolocalización.

1. Seleccione Personalizar y controlar DevTools ( ) > Más herramientas ... **** > Sensores.

   

   O bien, abra el menú comando seleccionando Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS). Escriba Sensors y, a continuación, seleccione Mostrar sensores.

   

En el panel Sensores, para seleccionar una de las ubicaciones preestablecidas, use el menú desplegable Ubicación. Para especificar una ubicación personalizada, seleccione Otros e introduzca las coordenadas de la ubicación personalizada. Para probar el comportamiento de la página cuando la información de ubicación no está disponible, seleccione Ubicación no disponible.

Establecer orientación

Si la página depende de la información de orientación de un dispositivo móvil para que se represente correctamente, abra la interfaz de usuario de orientación.

1. Seleccione Personalizar y controlar DevTools ( ) > Más herramientas ... **** > Sensores.

1. O bien, abra el menú comando seleccionando Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS). Escriba Sensors y, a continuación, seleccione Mostrar sensores.

Mostrar sensores para orientación :::image-end:::

En el panel Sensores, puede seleccionar una orientación preestablecida en el menú desplegable Orientación. Para escribir su propia orientación, seleccione Orientación personalizaday escriba sus propios valores alfa, betay gamma.

Establecer la cadena de agente de usuario

Si la página depende de la cadena de agente de usuario de un dispositivo móvil para representarse correctamente, use el panel Condiciones de red para proporcionar distintas cadenas de agente de usuario.

1. Seleccione Personalizar y controlar DevTools ( ) > Más herramientas ... Condiciones > de red.

   

2. O bien, abra el menú comando seleccionando Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS). Escriba Network conditions y seleccione Mostrar condiciones de red.

   

Junto al agente de usuario, desactive la casilla Usar explorador predeterminado. A continuación, seleccione Personalizado para seleccionar en una lista de cadenas de agente de usuario predefinidas. Para escribir su propia cadena de agente de usuario, escriba la cadena en Entrar en un agente de usuario personalizado.

Establecer sugerencias de cliente de agente de usuario

Si el sitio usa sugerencias de cliente de agente de usuario, use el panel Dispositivosemulados para agregar dispositivos y establecer sugerencias de cliente de agente de usuario.

1. Abra el menú contextual (haga clic con el botón secundario) y seleccione Inspeccionar.

2. Seleccione Configuración > dispositivos.

3. En el panel Dispositivos emulados, seleccione Agregar dispositivo personalizado y expanda sugerencias de cliente de agente de usuario.

   

4. Escriba un nombre único en el cuadro de texto Nombre del dispositivo, como Test101 .

5. Acepte los valores predeterminados o cambie la relación depíxeles Width , Heighty Device según sea necesario.

6. Establezca las sugerencias de cliente de agente de usuario de la siguiente manera.

   • Marca y versión, como Edge y 92. Seleccione + Agregar marca para agregar varios pares de marca y versión.
   • Versión completa del explorador como 92.0.1111.0.
   • Plataforma y versión como Windows y 10.0.
   • Arquitectura como x86.
   • Modelo de dispositivos como Galaxy Nexus.

   Nota

   Establezca o cambie cualquiera de las sugerencias de cliente de agente de usuario. No hay valores necesarios.

7. Seleccione Agregar. El nuevo dispositivo se muestra en un estado seleccionado en la parte superior de la lista Dispositivos emulados.

También puede establecer sugerencias de cliente de agente de usuario en referencia de análisis de red.

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