respuesta breve
¿Cuál es la forma más rápida de comparar tres breakpoints a la vez?
Pega tu URL en Responsive Preview para ver móvil (390px), tablet (820px) y escritorio (1280px) en tres iframes en vivo con scroll sincronizado cuando es same-origin. El modo dispositivo de DevTools redimensiona un viewport a la vez — bien para depurar un ancho, más lento para detectar regresiones entre breakpoints.
comparación
Responsive Preview vs modo dispositivo DevTools.
| Opción | Coste | Tres anchos a la vez | Scroll sync | Ideal para |
|---|---|---|---|---|
| Responsive Preview (TDS) | Gratis | Sí — columnas 390 / 820 / 1280px | Sí cuando same-origin | Detectar drift de layout entre breakpoints; compartir enlace de preview |
| Modo dispositivo DevTools del navegador | Gratis (integrado) | No — un ancho a la vez | N/A | Inspección profunda de un viewport, red y DOM |
| Herramientas multi-viewport de pago | Planes de pago | Sí | A menudo sí | Equipos que necesitan previews en la nube y colaboración |
| Comando /responsive-preview Cursor | Gratis | Capturas en los tres anchos | N/A (auditoría en chat) | Informe AI pass/warn/fail dentro de Cursor mientras construyes |
por qué lado a lado
Por qué tres iframes en vivo superan redimensionar uno a uno.
Los bugs responsive suelen aparecer como drift entre breakpoints — nav que se envuelve mal en tablet pero no en móvil, imágenes que desbordan solo a 820px. Cambiar presets de DevTools uno a uno hace fácil perder esa comparación. Iframes en vivo lado a lado permiten hacer scroll del mismo estado de página en los tres anchos y detectar desajustes al instante.
Fix in Cursor copies viewport context from the frame where you spotted the issue, so you can paste it into chat and annotate with Design Mode without re-describing the breakpoint.
cómo probar
Pruébalo en menos de un minuto.
- Abre Responsive Preview.
- Pega tu URL de desarrollo local (por ejemplo
http://localhost:8787/) y haz clic en Preview. - Haz scroll en un frame — los demás siguen cuando el sync está disponible.
- Opcional: descarga el comando /responsive-preview para capturas con IA en Cursor.
Lee el walkthrough completo en la Responsive Preview guide.