Responsively App
Para revisar y depurar un diseño responsive en muchos tamaños de pantalla al mismo tiempo.
Navegador de escritorio que muestra varios viewports a la vez para probar diseño responsive.
Notas y contexto
Qué es
Responsively App es un navegador de escritorio open source pensado para el desarrollo web responsive. Construido con Electron, React y Redux, muestra simultáneamente la misma página en múltiples viewports de distintos dispositivos. Está mantenido por la comunidad de responsively-org bajo licencia AGPL-3.0 y se distribuye para macOS, Windows y Linux.
Para qué sirve
- Ver una web a la vez en varios dispositivos (móvil, tablet, escritorio) sin redimensionar la ventana a mano.
- Reproducir clics, scroll y navegación de forma sincronizada en todos los viewports.
- Inspeccionar elementos de todos los dispositivos a la vez con un inspector unificado.
- Capturar pantallazos de página completa de todos los dispositivos en una sola acción.
Cuándo usarlo
Es ideal cuando trabajas en maquetación responsive y necesitas comprobar de un vistazo cómo se ve y se comporta una interfaz en muchos tamaños. Funciona con hot reloading, por lo que encaja durante el desarrollo en local. Frente a las DevTools del navegador, que muestran un dispositivo cada vez, aquí ves todos en paralelo; como alternativas comerciales están BrowserStack o Sizzy.
Ejemplo
Flujo de uso típico:
- Instala la app desde responsively.app o por gestor de paquetes (Homebrew, Chocolatey, WinGet).
- Arranca tu proyecto en local y abre su URL (por ejemplo http://localhost:3000) en Responsively.
- Elige los dispositivos a mostrar o crea un “Preview Suite” con tu combinación favorita.
- Interactúa en un viewport y observa cómo se replica la acción en el resto.
- Pulsa Cmd/Ctrl + I para inspeccionar elementos en todos los dispositivos y captura una screenshot completa cuando lo necesites.
Puntos clave
- Interacciones espejadas en tiempo real entre todos los dispositivos mostrados.
- Más de 30 perfiles de dispositivo integrados y soporte para dispositivos personalizados.
- Inspector unificado y capturas de pantalla completas multidispositivo de un clic.
- Extensión de navegador para Chrome, Firefox y Edge que envía URLs a la app.
Ten en cuenta
Es una aplicación de escritorio basada en Electron, así que consume más recursos que una pestaña normal del navegador. Está licenciada como AGPL-3.0: tenlo en cuenta si quieres reutilizar su código. Para probar en navegadores reales o dispositivos físicos remotos seguirás necesitando servicios como BrowserStack.