Emular dispositivos móviles (emulación de dispositivo)

Use la herramienta Emulación de dispositivos, a veces denominada Modo de dispositivo, para aproximar el aspecto y el comportamiento de la página en un dispositivo móvil.

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

Algunos aspectos de los dispositivos móviles no se emulan en DevTools. Por ejemplo, la arquitectura de las CPU móviles es diferente de la arquitectura de las CPU portátiles o de escritorio. Para realizar las pruebas más sólidas, ejecute la página en un dispositivo móvil.

Use depuración remota para interactuar con el código de una página desde el equipo mientras la página se ejecuta realmente en un dispositivo móvil. Puede ver, cambiar, depurar, generar perfiles o los cuatro mientras interactúa con el código. La máquina puede ser un cuaderno o un equipo de escritorio.

Contenido detallado:

• Simulación de una ventanilla móvil
  • Modo de ventanilla con capacidad de respuesta
    • Mostrar consultas multimedia
    • Establecer el tipo de dispositivo
  • Modo de ventanilla del dispositivo móvil
    • Girar la ventanilla a orientación horizontal
    • Mostrar marco de dispositivo
    • Adición de un dispositivo móvil personalizado
  • Mostrar reglas
  • Zoom de la ventanilla
• Limitación de la red y la CPU
  • Limitar solo la CPU
  • Limitar solo la red
• Emular sensores
  • Reemplazar geolocalización
  • Establecer orientación
• Establecer la cadena del agente de usuario
• Establecimiento de sugerencias de cliente de agente de usuario

Simulación de una ventanilla móvil

Para abrir la interfaz de usuario que le permite simular una ventanilla móvil:

1. Abra DevTools. Por ejemplo, haga clic con el botón derecho en una página web y, a continuación, seleccione Inspeccionar.

2. En la barra de actividad, haga clic en el botón Alternar emulación de dispositivo (). O bien, en DevTools, seleccione Personalizar y controlar La emulación de dispositivode DevTools (...): >

   

   La página web se representa en el panel Emulación de dispositivo. La barra de herramientas del dispositivo se abre en modo de ventanilla dinámica.

Modo de ventanilla con capacidad de respuesta

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. Puede escribir cualquier valor numérico en los cuadros de ancho y alto. Si selecciona un tamaño mayor que el disponible en la ventana del explorador, la ventanilla se escalará automáticamente para adaptarse a la ventanilla más grande.

En el ejemplo siguiente, el ancho de la ventanilla se establece en 400 y el alto se establece en 736:

Si necesita más espacio en la pantalla, puede cambiar dónde está acoplado DevTools en la ventana del explorador. Vea Cambiar la ubicación de DevTools (Desacoplar, Acoplar a la parte inferior, Acoplar a la izquierda).

Mostrar consultas multimedia

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

Una consulta multimedia CSS define un punto de interrupción, que es un ancho de ventanilla del explorador. Una página web puede definir un diseño dinámico para cada punto de interrupción (ancho de ventanilla) que define CSS de la página web.

Las consultas multimedia se pueden usar para cambiar el diseño de una página cuando la ventanilla del dispositivo en el que se ve la página web es superior o inferior a un ancho determinado. Las consultas multimedia permiten escribir código que se va a usar para el diseño de página cuando el ancho de pantalla está por debajo de un tamaño determinado, o por encima de un tamaño determinado, o dentro de un mininum y tamaño máximo.

Para mostrar puntos de interrupción de consulta multimedia encima de la ventanilla:

1. Haga clic en el botón Más opciones () y, a continuación, seleccione Mostrar consultas multimedia:

   

   Si max-width la página web define puntos de interrupción o min-width , DevTools muestra barras adicionales encima de la ventanilla:

   • La barra azul corresponde a max-width las consultas multimedia.
   • La barra verde corresponde a las consultas multimedia que usan tanto como min-widthmax-width.
   • La barra naranja corresponde a min-width las consultas multimedia.

   

2. Para cambiar el ancho de la ventanilla para que se use la consulta multimedia de ese punto de interrupción, haga clic en un rectángulo de punto de interrupción en la barra de puntos de interrupción. El ancho de la ventanilla cambia para que se desencadene el punto de interrupción y se actualice el diseño de la página web.

3. Para ir a la declaración correspondiente @media en el código de la página web, haga clic con el botón derecho entre las barras verticales del punto de interrupción y, a continuación, seleccione Mostrar en el código fuente. DevTools abre la herramienta Orígenes y muestra la línea correspondiente @media en el Editor.

Consulta también:

• Depuración de consultas multimedia en Introducción a la visualización y cambio de CSS.

Establecer la proporción de píxeles del dispositivo

La proporción de píxeles del dispositivo (DPR) es la relación entre los píxeles físicos de la pantalla de hardware y los píxeles lógicos (CSS). En otras palabras, DPR indica al explorador cuántos píxeles de pantalla usar para dibujar un píxel CSS. Microsoft Edge usa el valor de DPR al dibujar en pantallas HiDPI (puntos altos por pulgada).

Para establecer una relación de píxeles de dispositivo:

1. Seleccione Más opciones () >Agregar relación de píxeles de dispositivo:

   

   Se agrega una lista desplegable de DPR en la parte superior de la ventanilla.

2. En la lista desplegable DPR , seleccione un valor de DPR (1, 2 o 3). El valor predeterminado es 2.

Para quitar la relación de píxeles del dispositivo:

• Seleccione Más opciones (>Quite la proporción de píxeles del dispositivo.

Establecer el tipo de dispositivo

Para simular un dispositivo móvil o un dispositivo de escritorio, use la lista Tipo de dispositivo :

Si no se muestra la lista Tipo de dispositivo, seleccione Más opciones>Agregar tipo de dispositivo.

La lista Tipo de dispositivo contiene los siguientes tipos de dispositivos:

Tipo de dispositivo	Método de representación	Icono de cursor	Eventos desencadenados
Móvil	Móvil	Círculo	touch
Móvil (sin toque)	Móvil	Normal	click
Escritorio	Escritorio	Normal	click
Escritorio (táctil)	Escritorio	Círculo	touch

Clave para las columnas de la tabla anterior:

Columna	Descripción
Método de representación	Si Microsoft Edge representa la página como una ventanilla móvil o de escritorio.
Icono de cursor	Qué tipo de cursor se muestra al mantener el puntero sobre la página.
Eventos desencadenados	Ya sea que la página se desencadene touch o click cuando interactúe con la página.

Modo de ventanilla del dispositivo móvil

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

Girar la ventanilla a orientación horizontal

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

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

   

   El botón Girar desaparece si la barra de herramientas del dispositivo es estrecha.

Vea también Establecer orientación, a continuación.

Mostrar marco de dispositivo

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

Si no se muestra un marco de dispositivo para un dispositivo determinado, significa que DevTools no tiene arte para ese dispositivo.

Marco del dispositivo para el iPhone 6/7/8:

Adición de 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:

1. En DevTools, haga clic en el botón Alternar emulación de dispositivo (") para activar la emulación del dispositivo.

2. En la lista desplegable del dispositivo de la izquierda, seleccione el elemento de menú Editar :

3. Seleccione la lista >De dispositivosEditar:

   

   Se abre la páginaDispositivos de configuración> de DevTools (dispositivos emulados).

4. Haga clic en el botón Agregar dispositivo personalizado . La página Dispositivos emulados de la configuración agrega una sección Dispositivo en la parte superior:

   La proporción de píxeles del dispositivo, la cadena del agente de usuario y los campos de tipo de dispositivo son opcionales. El tipo de dispositivo tiene como valor predeterminado Mobile:

   

5. En la sección Dispositivo , en los cuadros de texto, escriba un nombre de dispositivo, un ancho de pantalla y un alto de pantalla para el dispositivo personalizado.

6. Opcionalmente, rellene los campos siguientes:

   • Relación de píxeles del dispositivo. Consulte Establecer la proporción de píxeles del dispositivo, arriba; y Ventana: propiedad devicePixelRatio, en MDN.

   • Cadena de agente de usuario. Consulte Establecer la cadena del agente de usuario, a continuación; y agente de usuario, en MDN.

   • Tipo de agente de usuario (tipo de dispositivo). Consulte Establecer el tipo de dispositivo anterior. El valor predeterminado es Móvil.

7. Haga clic en el botón Agregar . El nuevo dispositivo ya está disponible en la lista desplegable del dispositivo en la parte superior izquierda del emulador de dispositivos.

Para quitar un dispositivo personalizado:

• EnDispositivos de configuración> de DevTools > (dispositivos emulados), mantenga el puntero sobre el nombre del dispositivo personalizado y, a continuación, haga clic en el icono de papelera.

Mostrar reglas

Si necesita medir las dimensiones de la pantalla, puede usar reglas para medir el tamaño de la pantalla en píxeles.

Para mostrar reglas arriba y a la izquierda de la ventanilla:

• Seleccione Más opciones () >Mostrar reglas:

  

  Las reglas aparecen encima y a la izquierda de la ventanilla, lo que indica las dimensiones en píxeles:

  

Zoom de la ventanilla

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

Captura de pantalla

Para capturar una captura de pantalla de lo que ve actualmente en la ventanilla, haga clic en Más opciones () >Captura de pantalla:

Para capturar una captura de pantalla de toda la página, incluido el contenido que no está visible actualmente en la ventanilla, seleccione Capturar una captura de pantalla de tamaño completo en el mismo menú.

Limitación de la red y la CPU

Los dispositivos móviles suelen tener restricciones de red y CPU.

Para probar la rapidez con la que se carga la página y cómo responde a diferentes velocidades de Internet y CPU:

• En la lista Limitación , cambie el valor preestablecido a Móvil de nivel medio o Móvil de gama baja:

  

  Si la lista Limitación está oculta, ensancha la barra de herramientas del dispositivo.

• El dispositivo móvil de nivel medio simula fast 3G y limita la CPU. Es cuatro veces más lento de lo normal.

• El móvil de gama baja simula slow 3G y limita la CPU. Es seis veces más lento de lo normal.

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

Limitar solo la CPU

Para limitar solo la CPU y no la red:

1. En DevTools, seleccione la herramienta Rendimiento .

2. Haga clic en el botón Capturar configuración ( en la esquina superior derecha.

3. En la lista desplegable CPU , seleccione 4x slowdown or 6x slowdown (Ralentización 4x o 6 veces más lenta):

   

Limitar solo la red

Para limitar solo la red y no la CPU:

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

   

   O bien, presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS) para abrir el menú Comando, empiece a escribir 3gy, a continuación, seleccione Habilitar limitación rápida de 3G o Habilitar limitación lenta de 3G.

   

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

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

   

Emular sensores

Use la pestaña Sensores para invalidar la geolocalización, simular la orientación del dispositivo, forzar la entrada táctil y emular el estado de inactividad.

En las secciones siguientes se proporciona un vistazo rápido sobre cómo invalidar la geolocalización y establecer la orientación del dispositivo.

Reemplazar geolocalización

Use la herramienta Sensores para invalidar la geolocalización y simular la orientación del dispositivo.

Reemplazar geolocalización

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

1. En la barra de actividad, haga clic en el botón Más herramientas () y, a continuación, haga clic en Sensores:

   

   O bien, abra el menú Comando seleccionando Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS). Escriba Sensors y, a continuación, seleccione Mostrar sensores:

   

2. Seleccione el menú desplegable Ubicación y, a continuación, seleccione una de las ubicaciones preestablecidas:

   

Para especificar una ubicación personalizada, seleccione Otro y escriba las coordenadas de la ubicación personalizada.

Para probar cómo se comporta la página cuando la información de ubicación no está disponible, seleccione Ubicación no disponible.

Consulta también:

• Invalidar la geolocalización con la herramienta Sensores

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.

Para establecer la orientación del dispositivo:

1. En la barra de actividad, haga clic en el botón Más herramientas () y, a continuación, haga clic en Sensores:

   

   O bien, abra el menú Comando presionando Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS). Escriba Sensorsy, a continuación, seleccione Mostrar sensores:

   

2. En el menú desplegable Orientación , seleccione una orientación preestablecida.

   O bien, para escribir su propia orientación, seleccione Orientación personalizada y escriba sus propios valores alfa, beta y gamma :

   

Consulta también:

• Simular la orientación del dispositivo con la herramienta Sensores

Establecer la cadena del agente de usuario

Si la página depende de la cadena del agente de usuario de un dispositivo móvil para representarse correctamente, use la herramienta Condiciones de red para especificar una cadena de agente de usuario diferente.

Para establecer la cadena del agente de usuario:

1. Seleccione Más herramientas (+) >Condiciones de red:

   

   O bien, abra el menú Comando presionando Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS). Escriba Network conditionsy seleccione Mostrar condiciones de red:

   

2. En la sección Agente de usuario de la herramienta Condiciones de red , desactive la casilla Usar el valor predeterminado del explorador .

3. Para seleccionar entre una lista de cadenas de agente de usuario predefinidas, haga clic en el menú que inicialmente lee Personalizado.

   O bien, para escribir su propia cadena de agente de usuario, escriba la cadena en el cuadro de texto Escriba un agente de usuario personalizado :

   

Consulta también:

• Reemplazar la cadena de agente de usuario

Establecimiento de sugerencias de cliente de agente de usuario

Si el sitio emplea sugerencias de cliente de agente de usuario, use la herramienta Dispositivos emulados para agregar dispositivos y establecer sugerencias de cliente de agente de usuario:

1. Haga clic con el botón derecho en una página web y, a continuación, seleccione Inspeccionar.

2. Seleccione Dispositivos de configuración>. Se abre la página Dispositivos emulados de Configuración .

3. Haga clic en el botón Agregar dispositivo personalizado y, a continuación, 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 Width, Height y Device pixel ratio según sea necesario.

6. Establezca sugerencias de cliente de agente de usuario como se indica a continuación:

   • 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 dispositivo como Galaxy Nexus.

   Puede establecer o cambiar cualquiera de las sugerencias de cliente user-agent. No hay valores obligatorios.

7. Haz clic en Agregar. El nuevo dispositivo se muestra en el estado seleccionado en la parte superior de la lista Dispositivos emulados .

También puede establecer sugerencias de cliente de agente de usuario en la herramienta Red ; consulte Referencia de características de red.

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques.

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.