Simula dispositivos móviles con el modo de dispositivo

Usa el modo de dispositivo para aproximar el aspecto y el rendimiento de tu página en un dispositivo móvil.

Descripción general

El modo de dispositivo es el nombre de una colección de funciones en las Herramientas para desarrolladores de Chrome que te ayudan a simular dispositivos móviles. Entre estas funciones, se incluyen las siguientes:

• Cómo simular una ventana gráfica para dispositivos móviles
• Regular el uso de CPU
• Cómo limitar la red
• Además, en el panel Sensores, puedes hacer lo siguiente:
  • Cómo simular la ubicación geográfica
  • Cómo configurar la orientación

Limitaciones

Piensa en el modo de dispositivo como una aproximación de primer orden de cómo se ve y se siente tu página en un dispositivo móvil. Con el modo de dispositivo, no ejecutas tu código en un dispositivo móvil. Simulas la experiencia del usuario de dispositivos móviles desde tu laptop o computadora de escritorio.

Hay algunos aspectos de los dispositivos móviles que DevTools nunca podrá simular. Por ejemplo, la arquitectura de las CPU para dispositivos móviles es muy diferente de la arquitectura de las CPU para laptops o computadoras de escritorio. En caso de duda, lo mejor es ejecutar la página en un dispositivo móvil. Usa la depuración remota para ver, cambiar, depurar y generar perfiles del código de una página desde tu laptop o computadora de escritorio mientras se ejecuta en un dispositivo móvil.

Abre la barra de herramientas del dispositivo

Para abrir la barra de herramientas del dispositivo, sigue estos pasos:

1. Abre las Herramientas para desarrolladores.
2. Haz clic en devices Toggle device toolbar, que se encuentra en la barra de acciones en la parte superior.

Cómo simular un viewport para dispositivos móviles

De forma predeterminada, la barra de herramientas del dispositivo se abre en la ventana gráfica con la opción Dimensiones establecida en Responsiva. En el menú desplegable Dimensiones, puedes simular las dimensiones de un dispositivo móvil específico.

Modo de viewport responsivo

Arrastra los controladores para cambiar el tamaño del viewport a las dimensiones que necesites. También puedes ingresar valores específicos en los cuadros de ancho y alto. En este ejemplo, el ancho se establece en 480 y la altura en 415.

Como alternativa, usa la barra de ajustes predeterminados de ancho para establecer el ancho con un clic en una de las siguientes opciones:

Dispositivo móvil S	Dispositivo móvil M	Dispositivo móvil L	Tablet	Laptop	Laptop L	4K
320 px	375 px	425 px	768 px	1024 px	1440 px	2560 px

Mostrar consultas de medios

Para mostrar los puntos de interrupción de las consultas de medios sobre tu ventana gráfica, haz clic en Más opciones > Mostrar consultas de medios.

Ahora, Herramientas para desarrolladores muestra dos barras adicionales sobre la ventana gráfica:

• La barra azul con puntos de interrupción de max-width.
• La barra naranja con min-width puntos de interrupción.

Haz clic entre los puntos de interrupción para cambiar el ancho del viewport de modo que se active el punto de interrupción.

Para encontrar la declaración de @media correspondiente, haz clic con el botón derecho entre los puntos de interrupción y selecciona Mostrar en el código fuente. DevTools abre el panel Fuentes en la línea correspondiente del Editor.

Cómo establecer la proporción de píxeles del dispositivo

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

Para establecer un valor de DPR, haz lo siguiente:

1. Haz clic en Más opciones > Agregar relación de píxeles del dispositivo.

   

2. En la barra de acciones que se encuentra en la parte superior del viewport, selecciona un valor de DPR en el nuevo menú desplegable DPR.

   

Cómo configurar el tipo de dispositivo

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

Si no ves la lista en la barra de acciones de la parte superior, selecciona Más opciones > Agregar tipo de dispositivo.

En la siguiente tabla, se describen las diferencias entre las opciones. El método de renderización se refiere a si Chrome renderiza la página como un viewport para dispositivos móviles o computadoras de escritorio. El ícono del cursor hace referencia al tipo de cursor que ves cuando colocas el cursor sobre la página. Eventos activados indica si la página activa eventos touch o click cuando interactúas con ella.

Opción	Método de renderización	Ícono de cursor	Eventos activados
Dispositivos móviles	Dispositivos móviles	Círculo	táctil
Dispositivos móviles (sin pantalla táctil)	Dispositivos móviles	Normal	clic
Computadora de escritorio	Computadora de escritorio	Normal	clic
Computadoras (táctiles)	Computadora de escritorio	Círculo	táctil

Modo específico del dispositivo

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

Para obtener más información, consulta Cómo agregar un dispositivo móvil personalizado.

Rota el viewport a la orientación horizontal

Haz clic en screen_rotation Rotar para rotar el viewport a la orientación horizontal.

Ten en cuenta que el botón Rotar desaparece si la barra de herramientas del dispositivo es estrecha.

Consulta también Cómo establecer la orientación.

Activa o desactiva el modo de pantalla doble

Algunos dispositivos, como el Surface Duo, tienen dos pantallas y dos formas de usarlas: con una o ambas pantallas activas.

Para alternar entre la pantalla doble y la única, haz clic en devices_fold Activar o desactivar el modo de pantalla doble en la barra de herramientas.

Cómo establecer la posición del dispositivo

Algunos dispositivos, como el Asus Zenbook Fold, tienen pantallas plegables. Estas pantallas tienen una postura: continua o plegada. La postura continua hace referencia a una posición "plana", y la plegada forma un ángulo entre las secciones de la pantalla.

Para establecer la posición del dispositivo, selecciona Continuo o Plegado en el menú desplegable correspondiente de la barra de herramientas.

Mostrar el marco del dispositivo

Cuando simules las dimensiones de un dispositivo móvil específico, como un Nest Hub, selecciona Más opciones > Mostrar marco del dispositivo para mostrar el marco físico del dispositivo alrededor de la ventana gráfica.

En este ejemplo, las Herramientas para desarrolladores muestran el fotograma del Nest Hub.

Cómo agregar un dispositivo móvil personalizado

Para agregar un dispositivo personalizado, sigue estos pasos:

1. Haz clic en la lista Dispositivo y, luego, selecciona Editar.

   

2. En la pestaña Configuración settings > Dispositivos, elige un dispositivo de la lista de dispositivos compatibles o haz clic en Agregar dispositivo personalizado para agregar el tuyo.

3. Si agregas uno propio, ingresa un nombre, un ancho y una altura para el dispositivo, y, luego, haz clic en Agregar.

   

   Los campos relación de píxeles del dispositivo, cadena de agente de usuario y tipo de dispositivo son opcionales. El campo de tipo de dispositivo es la lista que se establece en Móvil de forma predeterminada.

4. De vuelta en el viewport, selecciona el dispositivo que acabas de agregar en la lista Dimensiones.

Mostrar reglas

Haz clic en Más opciones > Mostrar reglas para ver las reglas. La unidad de tamaño de las reglas son los píxeles.

Las Herramientas para desarrolladores muestran reglas en la parte superior y a la izquierda de la ventana gráfica.

Haz clic en las reglas en marcas específicas para establecer el ancho y la altura de la ventana gráfica.

Cómo acercar la vista del puerto

Usa la lista Zoom para acercar o alejar la imagen.

Cómo tomar una captura de pantalla

Para capturar una captura de pantalla de lo que ves en la ventana gráfica, haz clic en Más opciones > Capturar captura de pantalla.

Para capturar una captura de pantalla de toda la página, incluido el contenido que no se ve en el viewport, selecciona Tomar una captura de pantalla de tamaño original en el mismo menú.

Para incluir un marco del dispositivo cuando captures una captura de pantalla en el modo específico del dispositivo, primero Muestra el marco del dispositivo y, luego, haz clic en Capturar captura de pantalla como se indicó anteriormente.

Para conocer otras formas de tomar capturas de pantalla con las Herramientas para desarrolladores, consulta 4 formas de tomar capturas de pantalla con las Herramientas para desarrolladores.

Limita la red y la CPU

Para limitar la red y la CPU, selecciona Móvil de nivel medio o Móvil de gama baja en la lista Limitación.

Móvil de gama media simula una conexión 3G rápida y limita la CPU para que sea 4 veces más lenta que lo normal. Móvil de gama baja simula una red 3G lenta y reduce la velocidad de la CPU 6 veces más de lo normal. Ten en cuenta que la limitación es relativa a la capacidad normal de tu laptop o computadora de escritorio.

Ten en cuenta que la lista Throttle se ocultará si la barra de herramientas del dispositivo es estrecha.

Solo limita la CPU

Para limitar solo la CPU y no la red, ve al panel Rendimiento, haz clic en Configuración de captura y, luego, selecciona 4x slowdown, 6x slowdown o 20x slowdown en la lista CPU.

Solo limita la red

Para limitar solo la red y no la CPU, ve al panel Red y selecciona 3G rápida o 3G lenta en la lista Limitación.

También puedes presionar Comando + Mayúsculas + P (Mac) o Control + Mayúsculas + P (Windows, Linux y ChromeOS) para abrir el menú de comandos, escribir 3G y seleccionar Habilitar la limitación rápida de 3G o Habilitar la limitación lenta de 3G.

También puedes establecer la limitación de la red desde el panel Rendimiento. Haz clic en Configuración de captura y, luego, selecciona 3G rápida o 3G lenta en la lista Red.

Cómo emular sensores

Usa el panel Sensores para anular la ubicación geográfica, simular la orientación del dispositivo, forzar el tacto y emular el estado de inactividad.

En las siguientes secciones, se proporciona una vista rápida sobre cómo anular la ubicación geográfica y establecer la orientación del dispositivo. Para obtener una lista completa de las funciones, consulta Cómo emular sensores del dispositivo.

Anular la ubicación geográfica

Para abrir la IU de anulación de la ubicación geográfica, haz clic en Personalizar y controlar Herramientas para desarrolladores y, luego, selecciona Más herramientas > Sensores.

También puedes presionar Comando + Mayúsculas + P (Mac) o Control + Mayúsculas + P (Windows, Linux y ChromeOS) para abrir el menú de comandos, escribir Sensors y, luego, seleccionar Show Sensors.

Selecciona uno de los ajustes predeterminados de la lista Ubicación, o bien selecciona Otro… para ingresar tus propias coordenadas, o selecciona Ubicación no disponible para probar cómo se comporta tu página cuando la geolocalización está en un estado de error.

Cómo establecer la orientación

Para abrir la IU de orientación, haz clic en Personalizar y controlar DevTools y, luego, selecciona Más herramientas > Sensores.

También puedes presionar Comando + Mayúsculas + P (Mac) o Control + Mayúsculas + P (Windows, Linux y ChromeOS) para abrir el menú de comandos, escribir Sensors y, luego, seleccionar Show Sensors.

Selecciona uno de los ajustes predeterminados de la lista Orientación o selecciona Orientación personalizada para establecer tus propios valores alfa, beta y gamma.