Tanto una extensión de simulador móvil para Chrome como el modo dispositivo de Chrome DevTools muestran una web a tamaño de móvil dentro de Chrome de escritorio. DevTools es mejor para depurar, porque el inspector y la consola están junto a la vista previa. Una extensión es más rápida para revisiones visuales, porque funciona con un botón y sigue activa mientras navegas. Ninguna sustituye a un móvil real en cuanto a entrada táctil o renderizado de Safari.
El resto del artículo lo desglosa para que elijas según la tarea y no por costumbre.
Qué significa «simulador móvil» en Chrome
Todo lo que se ejecuta dentro de Chrome de escritorio emula el entorno de un móvil, no el móvil en sí. Una buena herramienta cambia las señales que usa una web para decidir cómo mostrarse:
- el ancho y el alto del viewport, que activan las media queries de CSS
- la cadena de user agent y el client hint
Sec-CH-UA-Mobile, que leen muchos servidores y scripts screen.width,screen.heightydevicePixelRatio, que lee JavaScript- los indicadores de soporte táctil, como
navigator.maxTouchPoints
La página la sigue dibujando el motor Blink de Chrome con el procesador de tu ordenador. Por eso aquí «simulador» es un término impreciso. El Simulator de Xcode de Apple, en cambio, ejecuta el Safari real de iOS.
Cómo se comparan los dos enfoques
| Modo dispositivo de DevTools | Extensión de vista móvil | |
|---|---|---|
| Preparación en cada revisión | Abrir DevTools, activar la barra de dispositivos, elegir dispositivo, recargar | Pulsar el icono, elegir dispositivo |
| Espacio en pantalla | Los paneles de DevTools ocupan parte de la ventana | Solo la página y el marco del móvil |
| Se mantiene al navegar | Por pestaña, mientras DevTools siga abierto | Por pestaña, se mantiene al navegar (depende de la extensión) |
| Preajustes de dispositivos | Unos pocos modelos, dispositivos propios a mano | Preajustes de móviles y tablets con nombre |
| User agent y densidad de píxeles | Sí | Sí, en las mejores extensiones |
| Eventos táctiles | Sí, el ratón emite toques | Normalmente no |
| Limitación de red y CPU | Sí | No |
| Inspector, consola, registro de red | Integrados | Hay que abrir DevTools aparte |
| Capturas de pantalla | Área visible o página completa, marco opcional | Normalmente el viewport con marco |
El patrón está claro. El modo dispositivo es un depurador con una vista móvil añadida. Una extensión es una vista móvil sin nada más.
Cuándo es mejor el modo dispositivo de DevTools
Usa el modo dispositivo cuando necesites ver por qué algo se ve mal. Casos típicos:
- ver qué regla CSS gana a 375 px
- leer errores de consola que solo aparecen en móvil
- probar un manejador de swipe o de toque con eventos táctiles emulados
- limitar la CPU para ver si un script bloquea el primer renderizado
La configuración paso a paso está en la guía del emulador móvil de Chrome.
Cuándo es mejor una extensión
Usa una extensión cuando necesites ver cómo se ve la versión móvil, a menudo y rápido:
- revisar todas las páginas de un sitio después de un lanzamiento
- enseñar a un cliente en una llamada cómo se ve la web en el móvil
- comprobar una página en
localhostantes de subirla (o en un móvil real, como en probar localhost en el móvil) - hacer capturas a tamaño de móvil para un ticket o una revisión de diseño
Mobile View Extension es un ejemplo pensado para esto. Recarga la pestaña actual dentro de un marco de móvil o tablet, aplica el user agent, los client hints, el tamaño de pantalla y la densidad de píxeles del dispositivo, y mantiene la vista previa activa mientras navegas. Puedes girar a horizontal, introducir una resolución personalizada y guardar un PNG de la vista con marco. Los ajustes, como el dispositivo elegido, se recuerdan.
Límites de cualquier simulador dentro del navegador
Conviene ser realista con lo que muestra cualquier herramienta dentro de Chrome. La ficha de Mobile View Extension indica sus límites con claridad, y son los típicos de la categoría:
- La vista previa funciona en un marco dentro de Chrome de escritorio, no como emulación nativa del dispositivo.
- No se generan eventos táctiles; interactúas con el ratón.
- Las media queries de densidad de píxeles,
pointeryhoverno se emulan del todo. Los breakpoints por ancho siguen al viewport con marco.
DevTools tiene sus propios límites parecidos: no puede mostrar bugs de Safari, la presión real de memoria ni el teclado en pantalla. Para eso, prueba en un iPhone o Android real, o en los emuladores de Xcode y Android Studio que se explican en probar en iPhone y probar en Android.
Qué preguntarte antes de instalar una extensión de simulador móvil
Las extensiones que cambian cómo cargan las páginas necesitan permisos amplios, así que elige con cuidado:
- ¿Qué datos recoge? Lee la política de privacidad. Una herramienta de vista previa móvil no tiene motivo para enviar tu historial a ningún sitio. La política de privacidad de Mobile View Extension indica que no recoge datos personales ni historial de navegación.
- ¿Cambia el user agent o solo el ancho? Las herramientas que solo cambian el ancho equivalen a redimensionar la ventana. Mira por qué redimensionar no muestra la versión móvil.
- ¿Funciona en localhost y en páginas tras un login? Muchos «test responsive online» no llegan a ninguno de los dos.
- ¿Se mantiene? Revisa la fecha de la última actualización en Chrome Web Store.
Un flujo sencillo que usa las dos
Casi todo el que revisa diseños móviles a diario acaba repartiendo el trabajo: una extensión para el primer vistazo a cada página y DevTools para las páginas donde algo falla. Añade un móvil real para la pasada final de los flujos clave, como el pago o el registro. Así cubres apariencia, depuración y táctil sin frenar cada revisión.
Preguntas frecuentes
¿Es seguro usar una extensión de simulador móvil?
Depende de la extensión. Elige una con una política de privacidad clara, sin analítica ni rastreo dentro de la extensión y con actualizaciones recientes. Revisa los permisos que pide en Chrome Web Store.
¿Puede una extensión de Chrome emular un iPhone exactamente?
No. Puede igualar el viewport, el user agent y la densidad de píxeles de un iPhone, pero la página la renderiza el motor de Chrome, no el de Safari. Para comprobaciones específicas de Safari, usa el Simulator de Xcode o un iPhone real.
¿Sigo necesitando DevTools si uso una extensión?
Sí, para depurar. Una extensión te muestra que un diseño se rompe; DevTools te muestra qué regla lo rompe.