Está trabajando en un diseño responsivo, lo revisa en el escritorio y todo se ve perfecto. Lo abre en un smartphone, el diseño se rompe, la fuente se vuelve del tamaño de la cabeza de un fósforo y el botón «Pagar» se desliza fuera del borde de la pantalla.

Los gigantes tecnológicos con presupuesto para laboratorios de QA pueden permitirse comprar una flota de dispositivos reales para cada pantalla. Pero, ¿qué debe hacer un freelancer, una startup de tres personas o un desarrollador independiente? La respuesta es el emulador integrado de DevTools de Chrome. Gratuito, se abre con un solo atajo de teclado y cubre la gran mayoría de las tareas cotidianas de pruebas responsivas. Sin software adicional que instalar, sin máquinas virtuales, sin granjas en la nube.

A continuación, una guía paso a paso del Modo Dispositivo: desde la activación hasta el ajuste fino de la limitación de red y la emulación de sensores. Todo lo que necesita para probar un sitio en smartphones y tabletas sin salir de su portátil de trabajo.

💡 Resumen rápido:

• Abra DevTools (F12 o Ctrl+Shift+I) y active la Barra de Dispositivos (Ctrl+Shift+M); la página cambiará al modo de emulación de viewport móvil.
• Seleccione un modelo específico de la lista desplegable (iPhone, Pixel, Galaxy) o establezca una resolución personalizada en píxeles; Chrome aplicará automáticamente el agente de usuario correspondiente.
• Configure la limitación de red (Slow 3G / Fast 3G) y active la emulación táctil para ver cómo carga el sitio e interactúa con los usuarios en internet móvil real.
• Recuerde las limitaciones: el emulador no reproduce la GPU de hardware de un dispositivo específico, la renderización de fuentes de iOS ni el comportamiento de Safari WebKit; sigue siendo necesario un teléfono real para la prueba final.

Qué es el Modo Dispositivo y cuándo es suficiente

El Modo Dispositivo es un conjunto de herramientas dentro de Chrome DevTools que emula la visualización de una página en un dispositivo móvil. Hace tres cosas simultáneamente:

• Emula el viewport, comprimiendo el área de visualización a las dimensiones físicas de la pantalla del dispositivo seleccionado. Usted ve el sitio como lo vería un usuario de un iPhone 16 Pro Max o un Samsung Galaxy S25.
• Suplanta el agente de usuario, el servidor recibe una cadena típica de un navegador móvil. Es crítico para sitios con servido dinámico que entregan diseños diferentes a escritorio y móvil.
• Habilita la emulación táctil, el cursor del ratón se convierte en una simulación de dedo, con soporte para eventos táctiles, gestos y multitáctil.

Establezcamos de inmediato los límites. El Modo Dispositivo NO emula: el motor de renderizado de Safari (WebKit), la GPU de aceleración por hardware de un modelo específico, el comportamiento de la batería y los procesos en segundo plano del sistema operativo, ni el comportamiento de la red celular de diferentes operadores. Para la prueba de aceptación final antes del lanzamiento, sigue siendo necesario un teléfono físico. Pero para el desarrollo y la depuración diarios, la herramienta cubre las necesidades con creces.

Cómo abrir el Modo Dispositivo: tres métodos

Chrome ofrece varias rutas hacia el panel de emulación. Elija la que sea más rápida en su flujo de trabajo.

Método 1. Atajos de teclado, el más rápido

Estando en Chrome, presione:

• Windows / Linux: Ctrl + Shift + M
• macOS: Cmd + Shift + M

Si DevTools aún no está abierto, se abrirá automáticamente junto con el panel de emulación. Al presionar de nuevo se desactiva el Modo Dispositivo y la página vuelve a la vista normal.

Método 2. Botón en DevTools

Abra DevTools (F12 o Ctrl+Shift+I). En la esquina superior izquierda del panel, junto a la pestaña Elements, hay un icono de teléfono y tableta, Toggle device toolbar. Haga clic en él.

Método 3. A través del menú principal de Chrome

Tres puntos en la esquina superior derecha del navegador → More Tools → Developer Tools. Luego, el botón de la Barra de Dispositivos, como en el método 2. La ruta es más larga, pero le salva si los atajos de teclado se le olvidaron en medio de un despliegue a medianoche.

Selección de dispositivo y ajustes de emulación

Después de habilitar la Barra de Dispositivos, la página se recargará y aparecerá un panel de control sobre ella. Analicemos cada elemento.

Lista desplegable de dispositivos

El elemento central, una lista desplegable con perfiles predefinidos. Chrome incluye unos quince perfiles: desde iPhone SE (para verificar pantallas compactas) hasta iPhone 16 Pro Max, desde Pixel 9 hasta Galaxy S25.

Seleccione un dispositivo y Chrome en un solo paso:

• establece el ancho y alto del viewport;
• aplica el agente de usuario correspondiente;
• habilita la emulación táctil (a menos que se desactive manualmente).

Para añadir un dispositivo que no está en la lista, haga clic en Edit... en el mismo menú desplegable y complete el formulario: resolución de pantalla, Device Pixel Ratio, cadena de agente de usuario. El perfil personalizado aparecerá en la lista general.

Resolución manual

¿No quiere atarse a un modelo específico? Ingrese números arbitrarios en los campos de ancho y alto. Escenario típico: «¿cómo se ve el diseño en un smartphone Android estándar de gama media?», ingresa una resolución típica y obtiene la respuesta al instante, sin buscar el modelo correcto en la lista.

Device Pixel Ratio

El DPR determina cuántos píxeles físicos de pantalla corresponden a un píxel CSS. Los buques insignia modernos tienen DPR = 3, las tabletas y los teléfonos económicos tienen 2. En el panel de emulación de Chrome, muestra el valor DPR actual para el dispositivo seleccionado y permite cambiarlo a través de la lista desplegable. Esto afecta directamente la nitidez de las imágenes y los iconos SVG en pantallas retina.

Rotación de pantalla, limitación de red y sensores

Tres ajustes adicionales que convierten el Modo Dispositivo de una simple «lupa» a una herramienta de prueba completa.

Rotación de pantalla

El icono con dos flechas circulares intercambia el ancho y el alto. Siempre alterne entre vertical ↔ horizontal en cada pantalla clave: cabecera del sitio, ficha de producto, formulario de pago. El desplazamiento horizontal en una página de aterrizaje en orientación vertical es un error crítico que el cliente notará más rápido que usted.

Limitación de red

El menú desplegable No throttling permite limitar la velocidad de carga. Perfiles disponibles:

• Slow 3G (400 Kbps), internet móvil deficiente en el metro, fuera de la ciudad o en un sótano;
• Fast 3G (1.6 Mbps), internet móvil típico en la ciudad;
• Slow 4G y Fast 4G (4-25 Mbps), buena conexión.

Después de seleccionar un perfil, actualice la página y observe los tiempos en el panel Network. Si las fuentes o las imágenes principales tardan más de tres segundos en cargar en Fast 3G, un usuario con internet lento ya se habrá ido a la competencia.

Emulación táctil

Se habilita por defecto al seleccionar un dispositivo móvil. El cursor se convierte en un círculo translúcido, simulando la pulsación de un dedo. Verifique tres cosas:

• ¿funcionan los menús desplegables al tocar, no al pasar el cursor?
• ¿es suficiente el tamaño de los elementos interactivos? Según WCAG 2.1, el objetivo táctil mínimo es de 48×48 píxeles CSS;
• ¿no hay activaciones falsas de efectos hover que son físicamente irreproducibles en un teléfono real?

Geolocalización, media queries y sensores

Chrome ha escondido varias herramientas útiles en el menú de «tres puntos» (⋮) dentro del panel DevTools, en la sección More tools.

Geolocalización

La pestaña Sensors (More tools → Sensors) permite establecer coordenadas arbitrarias de latitud y longitud. Un sitio que use la API de Geolocalización recibirá el punto especificado en lugar del real. Es conveniente para verificar precios regionales, detección automática del idioma de la interfaz y promociones locales.

Media queries

El panel Rendering (More tools → Rendering) muestra los puntos de ruptura de las media queries CSS directamente sobre la página. Active la bandera Show media queries; aparecerá una escala de colores con marcas de cambio de estilo sobre la página. Al hacer clic en un punto, el viewport se ajusta instantáneamente al ancho correspondiente. Algo indispensable al depurar puntos de ruptura complejos.

Prefers-color-scheme y prefers-reduced-motion

También en el panel Rendering se encuentran los interruptores:

• prefers-color-scheme, fuerza el tema claro u oscuro independientemente de la configuración del sistema operativo;
• prefers-reduced-motion, emula una solicitud para desactivar la animación, crítico para pruebas de accesibilidad.

Capturas de pantalla y grabación de screencast

El Modo Dispositivo puede tomar capturas de pantalla de la página emulada. Tres puntos en el panel de la Barra de Dispositivos → Capture screenshot, y obtiene un PNG exactamente del tamaño que ve en pantalla. Para una captura de la altura completa de la página, elija Capture full size screenshot, útil para enviar el diseño a un cliente o en un informe de error.

Si las capturas estáticas no son suficientes, Chrome graba un screencast del trabajo con la página emulada. Abra el panel Recorder (More tools → Recorder), cree una nueva grabación y realice acciones; Chrome grabará cada paso con marcas de tiempo. La grabación terminada se puede exportar como un script de Puppeteer y automatizar la repetición de pruebas después de las ediciones.

Limitaciones: cuándo no se puede prescindir de un dispositivo real

La emulación de Chrome es una herramienta poderosa, pero no es una solución mágica. Esto es lo que fundamentalmente no cubre:

• Renderizado en iOS. Según las reglas de la App Store de Apple, todos los navegadores en iPhone y iPad deben usar el motor WebKit; incluso Chrome y Firefox son técnicamente envoltorios sobre Safari WebView. DevTools muestra el renderizado del motor Chromium (Blink), y las diferencias en la visualización de fuentes, redondeos, sombras y filtros entre Blink y WebKit pueden ser significativas.
• Sensores de hardware. Giroscopio, barómetro, NFC, aceleración de video por hardware; nada de esto existe en el emulador, y las APIs correspondientes devolverán null o un error.
• Comportamiento con batería baja. iOS y Android descargan agresivamente las pestañas en segundo plano cuando el nivel de batería es crítico. El emulador no reproduce esto.
• Rendimiento real de JavaScript. Un procesador móvil es muchas veces más lento que uno de escritorio; las animaciones que «vuelan» en un portátil de trabajo pueden congelarse en un teléfono de gama media. Para la medición, use Lighthouse con limitación de CPU.

La regla es simple: realice todo el ciclo de desarrollo y maquetación en el Modo Dispositivo, y ejecute la verificación final de cada lanzamiento en al menos un dispositivo Android físico y un iPhone.

Un video corto pero sustancioso del equipo de Chrome Developers: Jecelyn Yeen muestra cinco formas de emular el viewport móvil, desde el cambio básico hasta perfiles de dispositivo personalizados y pruebas táctiles.

⁉️🤔 Preguntas frecuentes

¿Por qué el sitio se ve diferente en Chrome DevTools y en un iPhone real?

Chrome en todas las plataformas excepto iOS usa el motor Blink. Un iPhone real funciona con WebKit; estos son dos motores de renderizado diferentes con distinto manejo de fuentes, suavizado, filtros CSS y sombras. Por eso la prueba final para iPhone requiere un dispositivo físico; el emulador mostrará la imagen «como en Chrome en Mac», no «como en Safari en iPhone».

¿Cuál es la diferencia entre emulación y simulación en el contexto de DevTools?

La emulación reproduce el comportamiento del sistema a nivel de API y protocolo: suplanta el agente de usuario, emula eventos táctiles, limita el ancho de banda de la red a nivel del navegador. La simulación es una imitación más superficial que no afecta los mecanismos de bajo nivel. El Modo Dispositivo en Chrome es precisamente emulación, no simulación.

¿Se puede emular una versión específica de iOS o Android?

No. El Modo Dispositivo emula el viewport, el agente de usuario y la entrada táctil, pero no el sistema operativo ni la versión del motor del navegador. El agente de usuario se puede suplantar manualmente a través de Network conditions → User agent, pero el renderizado seguirá estando basado en Blink. Para probar bajo una versión específica de Safari/iOS, necesita un dispositivo físico o un servicio en la nube como BrowserStack.

¿Cómo probar una PWA o un Service Worker en el emulador?

Abra el panel Application en DevTools. En la sección Service Workers, marque la bandera Update on reload y active Bypass for network si es necesario. El emulador soporta el modo sin conexión; habilítelo con la casilla Offline en la pestaña Network o en el panel Service Workers. El manifiesto de la PWA se verifica en la pestaña Manifest, también en el panel Application.

¿Qué hacer si la Barra de Dispositivos no está activa, el icono está gris?

La razón más común es que se encuentra en una página de servicio de Chrome (chrome://extensions, chrome://settings, pestaña nueva de DevTools). El Modo Dispositivo solo funciona en páginas web regulares. Abra cualquier página http/https e intente de nuevo.

Qué hacer cuando el emulador no es suficiente

El Modo Dispositivo en Chrome DevTools cubre la mayor parte de las tareas de maquetación responsiva: cambio de viewport, limitación de red, entrada táctil, geolocalización, media queries, capturas de pantalla. Para el trabajo diario de un freelancer o un equipo pequeño, este conjunto es más que suficiente.

Pero recuerde los límites. El renderizado en iOS, los sensores de hardware, el rendimiento real de JS en hardware móvil débil, todo esto queda fuera de la emulación. El estándar de oro: escriba y depure el diseño en el Modo Dispositivo y, antes de cada lanzamiento, pase por puntos de control en un iPhone y un smartphone Android físicos. Dos dispositivos, quince minutos y la confianza de que el usuario verá el sitio tal como usted lo concibió.