Emular dispositivos móviles en Microsoft Edge DevTools

Use la emulación de dispositivos para aproximar el aspecto y la respuesta de la página en un dispositivo móvil. El DevTools de Microsoft Edge proporciona una colección de características que te ayudan a emular dispositivos móviles. La colección incluye las siguientes características.

Limitaciones

La emulación de dispositivos es una aproximación de primer orden de la apariencia de la página en un dispositivo móvil. La emulación de dispositivos realmente no ejecuta el código en un dispositivo móvil. En su lugar, simula la experiencia de usuario móvil desde su equipo portátil o de 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 tenga dudas, la mejor opción es ejecutar la página en un dispositivo móvil. Use [depuración remota] [DevToolsRemoteDebugging] para interactuar con el código de una página de su equipo mientras la página se ejecuta en un dispositivo móvil. Puede ver, cambiar, depurar, perfil o los cuatro mientras interactúa con el código. Su equipo puede ser un portátil o un equipo de escritorio.

Simular un área de visualización móvil

Elija alternar emulación de dispositivo \ (  Alternar barra de herramientas de dispositivo ) o elegir personalizar y controlar DevTools \ ( ... ) > emulación de dispositivo para abrir la interfaz de usuario que le permite simular un área de visualización móvil.

La barra de herramientas del dispositivo

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

Modo de ventanilla receptiva

Para probar rápidamente la apariencia 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 ancho y alto. En la siguiente ilustración, el ancho se establece en 626 y el alto se establece en 516 .

La barra de herramientas del dispositivo

Mostrar consultas multimedia

Si ha definido consultas multimedia en la página, vaya a las dimensiones de la ventanilla donde las consultas de medios surten efecto mostrando puntos de interrupción de consulta multimedia encima de su ventanilla. Elija más opcionespara > Mostrar las consultas de medios.

La barra de herramientas del dispositivo

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

La barra de herramientas del dispositivo

Establecer el tipo de dispositivo

Use la lista tipo de dispositivo para simular un dispositivo móvil o un dispositivo de escritorio.

La barra de herramientas del dispositivo

En la siguiente tabla se describen las diferencias entre las opciones de tipo de dispositivo disponibles. La columna método de representación hace referencia a si Microsoft Edge representa la página como un área de visualización de escritorio o móvil. La columna icono del cursor hace referencia al tipo de cursor que se ve al pasar el puntero por la página. La columna eventos desencadenados hace referencia a si la página touch se desencadena o click se desencadena cuando se interactúa con la página.

Opción Método de representación Icono cursor Eventos desencadenados
Móvil Móvil Círculo Función táctil
Móvil \ (sin contacto ) Móvil Normal haz clic en
Escritorio Escritorio Normal haz clic en
Escritorio \ (Touch ) Escritorio Círculo Función táctil

Nota

Si no se muestra la lista tipo de dispositivo , elija más opciones > Agregar tipo de dispositivo.

Modo de ventanilla de dispositivos móviles

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

La barra de herramientas del dispositivo

Girar la ventanilla a la orientación horizontal

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

Nota

El botón girar desaparecerá si la barra de herramientas del dispositivo es estrecha.

La barra de herramientas del dispositivo

Para obtener más información, vaya a establecer orientación.

Mostrar marco del dispositivo

Mostrar el marco del dispositivo físico en el área de visualización al simular las dimensiones de un dispositivo móvil específico, como un iPhone 6.

  1. Abra más opciones.
  2. Elija Mostrar marco del dispositivo.

Nota

Si no ve un marco de dispositivo para un dispositivo en particular, significa que DevTools no tiene arte para esa opción.

Agregar un dispositivo móvil personalizado

Si la opción de dispositivo móvil que necesita no está incluida en la lista predeterminada, puede Agregar un dispositivo personalizado. Para agregar un dispositivo personalizado, siga los pasos que se indican a continuación.

  1. Elija la lista de dispositivos > Editar.

    La barra de herramientas del dispositivo

  2. Elija Agregar dispositivo personalizado.

  3. En dispositivos emulados, escriba un nombre de dispositivo, un ancho de pantalla y un 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 valor predeterminado del campo tipo de dispositivo es móvil.

    La barra de herramientas del dispositivo

Mostrar reglas

Si necesita medir las dimensiones de la pantalla, puede usar las reglas para medir el tamaño de la pantalla en píxeles. Elija más opciones > paraMostrar las reglas para mostrar las reglas por encima y a la izquierda de su ventanilla.

Acercar la ventanilla

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

La barra de herramientas del dispositivo

Limitar la red y la CPU

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

Limite la red y la CPU.

  1. Elige la lista de aceleración y cambia el ajuste preestablecido a móvil de nivel intermedio o móvil de low-end.
    • El teléfono móvil de nivel intermedio simula fast 3G y acelera su CPU. Es cuatro veces más lentas de lo normal.
    • La tecnología móvil de gama baja simula slow 3G y acelera su CPU. Es seis veces más lento de lo normal.

Todo el límite se basa en la capacidad normal de su equipo portátil o de escritorio.

La barra de herramientas del dispositivo

Nota

Si la lista acelerador está oculta, la barra de herramientas del dispositivo es demasiado estrecha. Para obtener acceso a la lista aceleradora, aumente el ancho de la barra de herramientas del dispositivo.

La barra de herramientas del dispositivo

Limitar solo la CPU

Para limitar solo la CPU y no la red, complete los siguientes pasos.

  1. Elija el panel rendimiento y elija configuración de captura \ (  configuración de captura ).

  2. Elija CPU > 4x lentitud o ralentización 6.

    La barra de herramientas del dispositivo

Limitar la velocidad de la red

Para limitar solo la red, siga los pasos que se indican a continuación.

  1. Elija el panel red .

  2. Elige 3G rápido en línea > Fast 3G o 3G lento.

    La barra de herramientas del dispositivo

    O seleccione Control + Shift + P \ (Windows, Linux ) o Command + Shift + P \ (MacOS ) para abrir el menú de comandos, escriba 3G y elija Habilitar la limitación rápida de 3G o habilitar la limitación de 3G.

    La barra de herramientas del dispositivo

También puede establecer el límite de red en el panel rendimiento .

  1. Elija configuración de captura \ (  configuración de captura ) y seleccione la lista de redes y cambie el ajuste preestablecido a 3G rápido o 3G lento.

    La barra de herramientas del dispositivo

Reemplazar geolocalización

Si su página depende de la información de geolocalización de un dispositivo móvil para representarse correctamente, proporcione geolocalización diferentes mediante la interfaz de usuario de reemplazo de geolocal.

  1. Elija personalizar y controlar DevTools \ ( ... ) > más > sensoresde herramientas.

La barra de herramientas del dispositivo

  1. Abrir el menú de comandos.
  • Seleccione Control + Shift + P \ (Windows, Linux ) o Command + Shift + P \ (MacOS ).
  1. Escriba Sensors y elija Mostrar sensores.

La barra de herramientas del dispositivo

En el panel sensores , puede seleccionar una de las ubicaciones preestablecidas incluidas en DevTools con el menú desplegable Ubicación . Para escribir una ubicación personalizada, elija otro... e introduzca las coordenadas de la ubicación personalizada. Para probar la página en estado de error cuando la información de ubicación no está disponible, elija ubicación no disponible.

La barra de herramientas del dispositivo

Establecer orientación

Si tu página depende de la información de orientación de un dispositivo móvil para representarla correctamente, abre la interfaz de usuario de orientación.

  1. Elija personalizar y controlar DevTools \ ( ... ) > más > sensoresde herramientas.

La barra de herramientas del dispositivo

  1. Abrir el menú de comandos.
  • Seleccione Control + Shift + P \ (Windows, Linux ) o Command + Shift + P \ (MacOS ).
  1. Escriba Sensors y elija Mostrar sensores.

La barra de herramientas del dispositivo

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

La barra de herramientas del dispositivo

Establecer cadena de agente de usuario

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

  1. Elija personalizar y controlar DevTools \ ( ... ) > más herramientas > condiciones de red.

La barra de herramientas del dispositivo

  1. Abrir el menú de comandos.
  • Seleccione Control + Shift + P \ (Windows, Linux ) o Command + Shift + P \ (MacOS ).
  1. Escriba Network conditions y elija Mostrar condiciones de red.

La barra de herramientas del dispositivo

Junto a agente de usuario, desactive la casilla seleccionar automáticamente . Después, elija personalizado... para seleccionar en una lista de cadenas de agente de usuario predefinidas. Para introducir su propia cadena de agente de usuario, escriba la cadena en Escriba un agente de usuario personalizado.

La barra de herramientas del dispositivo

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

[DevToolsRemoteDebugging]: .. /Remote-Debugging/index.MD "Introducción a la depuración remota de dispositivos Android | Microsoft docs "

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según las condiciones descritas en la licencia internacional de Creative Commons Atribution 4,0.
La página original se encuentra aquí y está modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.