El emulador móvil de Chrome se llama modo dispositivo (device mode) y viene integrado en Chrome DevTools. Abre DevTools, pulsa Ctrl + Shift + M en Windows y Linux o Cmd + Shift + M en Mac, elige un teléfono en el menú Dimensions y recarga la página. Chrome mostrará la página con el viewport, la densidad de píxeles y el user agent de ese teléfono.
Esta guía repasa cada control que importa para probar a diario la versión móvil y termina con lo que el modo dispositivo no puede mostrarte.
Cómo activar el modo dispositivo en Chrome
- Abre la página que quieres probar.
- Abre DevTools:
F12,Ctrl + Shift + I(Windows, Linux) oCmd + Option + I(Mac). También puedes hacer clic derecho en la página y elegir Inspeccionar. - Haz clic en el icono Toggle device toolbar (un teléfono y una tablet) en la esquina superior izquierda de DevTools, o usa el atajo anterior con DevTools enfocado.
- Recarga la página para que el sitio reciba el user agent móvil desde la primera petición.
El paso 4 es el que la gente se salta. Sin recargar, un sitio que detecta el dispositivo en el servidor ya te ha enviado su HTML de escritorio.
Elegir un dispositivo o un tamaño personalizado
El menú Dimensions sobre el viewport tiene dos modos.
Responsive te deja arrastrar los bordes del viewport o escribir un ancho y un alto. Úsalo para encontrar el ancho exacto en el que se rompe un diseño. La barra sobre el viewport muestra anchos predefinidos (Mobile S 320, Mobile M 375, Mobile L 425, Tablet 768, Laptop 1024) como atajos.
Un dispositivo concreto, como un modelo de iPhone o Pixel, define a la vez el ancho, el alto, la densidad de píxeles y el user agent. La lista por defecto es corta. Haz clic en Edit al final de la lista para activar más dispositivos, o en Add custom device para crear el tuyo con nombre, ancho, alto, densidad de píxeles y cadena de user agent. Un dispositivo personalizado es útil cuando el teléfono que te interesa es más nuevo que la lista de Chrome. La tabla de tamaños de pantalla del iPhone tiene los valores de los iPhone actuales.
El icono de rotación cambia entre vertical y horizontal.
Simular un teléfono lento: limitar red y CPU
Un ordenador es varias veces más rápido que un teléfono normal. El modo dispositivo puede reducir esa diferencia:
- El menú Throttling de la barra de dispositivos tiene preajustes para móviles de gama media y baja, que ralentizan tanto la red como la CPU.
- En el panel Performance puedes ajustar por separado la ralentización de la CPU (por ejemplo, 4x o 6x).
- En el panel Network puedes elegir preajustes de red como Fast 4G, Slow 4G o 3G.
La limitación es una simulación, no una medición en hardware real. Úsala para detectar problemas evidentes, como un script que bloquea el renderizado durante dos segundos. Para obtener cifras que puedas presentar, consulta la guía del test de velocidad móvil y la auditoría de Lighthouse para móvil.
Tacto, sensores y otros ajustes de emulación
Al seleccionar un dispositivo móvil, Chrome lanza eventos táctiles en lugar de eventos de ratón y el cursor se convierte en un círculo. Así puedes probar a grandes rasgos carruseles deslizables y gestores de toque, aunque un ratón no se mueve igual que un pulgar.
El menú de tres puntos de la barra de dispositivos añade más opciones: Show media queries dibuja tus breakpoints como barras de colores, Show rulers añade reglas en píxeles, y Add device pixel ratio y Add device type muestran esos ajustes en la barra. El panel Sensors (ábrelo desde el menú de comandos con Ctrl + Shift + P o Cmd + Shift + P) sobrescribe la geolocalización y la orientación del dispositivo.
Hacer una captura móvil en modo dispositivo
Abre el menú de tres puntos de la barra de dispositivos y elige Capture screenshot para el área visible o Capture full size screenshot para la página completa. Si elegiste un dispositivo concreto, activa antes Show device frame para incluir el contorno del teléfono. Comparamos este método con otros en cómo hacer una captura de pantalla móvil de una web.
Lo que el modo dispositivo no puede mostrarte
El modo dispositivo también funciona en localhost. Para probar el mismo servidor local en un teléfono real, consulta cómo ver localhost en el móvil.
La propia documentación de Chrome llama al modo dispositivo una aproximación de primer orden. Sus límites son reales:
| Aspecto | Qué hace el modo dispositivo | Qué no puede hacer |
|---|---|---|
| Motor de renderizado | Usa Chrome de escritorio (Blink) | Mostrar fallos propios de Safari o iOS |
| Rendimiento | Simula CPU y red más lentas | Reproducir el calentamiento, la memoria o la GPU de un teléfono real |
| Entrada | Convierte el ratón en eventos táctiles | Reproducir gestos con varios dedos, el alcance del pulgar o el teclado en pantalla |
| Interfaz del navegador | Muestra el área de la página | Mostrar la barra de direcciones real, las barras de herramientas y las zonas seguras de iOS y Android |
Para Safari, usa el simulador de Xcode o un iPhone real (guía). Para Chrome en un Android real, conecta un teléfono y abre chrome://inspect en tu ordenador (guía).
¿Modo dispositivo o extensión de vista móvil?
El modo dispositivo es la mejor opción para depurar: los paneles Elements, Console y Network están justo al lado de la vista previa (los repasamos en la guía de Chrome DevTools). Para revisiones visuales rápidas requiere mucha preparación, porque DevTools debe estar abierto y la emulación se reinicia en cada pestaña.
Mobile View Extension cubre la parte visual con un clic y sin abrir DevTools. Aplica el user agent, el tamaño de pantalla y la densidad de píxeles del dispositivo, muestra un marco de teléfono y sigue activa mientras navegas. No genera eventos táctiles, así que para probar el tacto el modo dispositivo sigue siendo la herramienta adecuada. Las ventajas e inconvenientes están en simulador móvil en extensión o DevTools.
Preguntas frecuentes
¿Cuál es el atajo del emulador móvil de Chrome?
Con DevTools abierto y enfocado, pulsa Ctrl + Shift + M en Windows y Linux o Cmd + Shift + M en macOS.
¿Por qué el sitio sigue viéndose como la versión de escritorio en modo dispositivo?
Recarga la página después de elegir el dispositivo. Algunos sitios deciden qué versión servir en la primera petición, antes de que se aplicara el user agent emulado.
¿Se puede emular un iPhone en Chrome?
Puedes emular el tamaño de pantalla, la densidad de píxeles y el user agent de un iPhone. La página la sigue renderizando el motor de Chrome, no WebKit de Safari, así que los fallos exclusivos de Safari no aparecerán.