Hay una parte del trabajo de diseño web que nadie menciona en los tutoriales: el momento en que tienes que abrir la misma URL en cinco navegadores distintos, uno detrás del otro, para comprobar que nada se ha roto. Cambias un margen, vuelves a abrirlos todos. Ajustas un breakpoint, ídem. Es repetitivo, lento, y al final acabas trabajando solo en Chrome y rezando para que Firefox lo pinte igual.
Llevo tiempo buscando una forma más sensata de gestionar esto. En este post recorro las herramientas que uso o he probado, y cómo acabé construyendo mi propio lanzador con ayuda de la IA — porque hay que ser honesto con estas cosas, y porque creo que saber aprovechar estas herramientas es una ventaja real que no tiene sentido esconder.
El problema real: dos tipos de prueba distintos
Antes de entrar en herramientas, vale la pena separar dos necesidades que a veces se confunden:
Prueba de diseño responsivo — quieres ver cómo queda tu web en distintos tamaños de pantalla: móvil, tablet, escritorio. No importa tanto el motor del navegador como las dimensiones del viewport.
Prueba de compatibilidad cross-browser — quieres asegurarte de que Firefox, Chromium, Brave y Safari renderizan igual. Aquí el viewport es secundario; lo que importa es el motor de renderizado.
La mayoría de herramientas ataca uno de los dos problemas. Muy pocas cubren ambos bien.
El DevTools del navegador — lo que ya tienes
Antes de instalar nada, vale recordar que Chrome, Firefox y Chromium tienen un modo responsivo en sus propias DevTools (F12 → icono de dispositivos, o Ctrl+Shift+M en Chrome). Es limitado, pero para comprobaciones rápidas durante el desarrollo funciona bien y no requiere nada adicional.
ResponsivelyApp — el clásico gratuito
ResponsivelyApp es probablemente la herramienta más conocida para previsualización responsiva. Es gratuita, de código abierto, funciona en Linux como AppImage, y resuelve muy bien el primer problema: ver tu web en varios tamaños de pantalla a la vez.
La idea es simple: abres una URL y la aplicación la muestra simultáneamente en varios viewports predefinidos — iPhone, iPad, escritorio... — que puedes personalizar. Cualquier scroll, clic o navegación que hagas en uno se replica en todos los demás en tiempo real. Muy útil para comprobar de un vistazo que tus breakpoints funcionan como esperas.
Lo que hay que tener en cuenta es que todos los paneles usan el mismo motor (Chromium), así que no te dice nada sobre cómo lo va a pintar Firefox o Safari.
Instalación en Arch:
# Descarga el AppImage desde https://responsively.app/
chmod +x Responsively-App-*.AppImage
./Responsively-App-*.AppImagePolypane — para quien quiera ir más lejos
Polypane es una herramienta que he visto mencionada mucho en comunidades de desarrollo web. No la uso personalmente ni la he probado en profundidad, así que no voy a hacer como que la conozco — pero la idea parece interesante: es un navegador completo basado en Chromium, diseñado exclusivamente para desarrollo, con múltiples viewports sincronizados, herramientas de accesibilidad integradas y emulación avanzada por viewport.
El inconveniente es que es de pago — ronda los 9 $/mes en el plan individual, aunque tiene 14 días de prueba sin tarjeta. Si trabajas mucho con diseño responsivo y accesibilidad, puede que valga la pena echarle un vistazo. Yo de momento sigo con las herramientas gratuitas.
Mi solución: el Browser Launcher
Ninguna de las herramientas anteriores resuelve la prueba cross-browser real: abrir la misma URL en Firefox, Chromium, Brave y lo que tengas instalado, para ver si hay diferencias de renderizado entre motores.
Para eso me monté un pequeño lanzador. Y aquí viene la parte en que tengo que ser transparente: esto lo construí con ayuda de Claude. No es que yo haya escrito el código de memoria — lo hice con IA, y me parece importante decirlo.
Creo que usar la IA bien es una suerte que tenemos que aprovechar. La clave no es pedirle que haga cosas por ti sin entenderlas, sino saber qué estás buscando, saber hacer las preguntas correctas y saber evaluar lo que te devuelve. En este caso, tenía claro que quería un servidor Python minimalista que detectase los navegadores instalados y los lanzase con un clic. La IA me ayudó a construirlo, yo lo depuré, lo instalé, lo ajusté y lo subí a GitHub. El resultado es mío — la herramienta también.
El launcher es un servidor Python que corre en localhost:7700. Al arrancar detecta automáticamente qué navegadores tienes instalados y desactiva los que no están. Con un clic abre la URL en el navegador elegido, o en todos a la vez.
Repositorio: github.com/jferrep/browser-launcher
Instalación
git clone https://github.com/jferrep/browser-launcher.git
cd browser-launcher
mkdir -p ~/.local/share/browser-launcher
cp server.py browser-launcher.sh icon.svg ~/.local/share/browser-launcher/
chmod +x ~/.local/share/browser-launcher/browser-launcher.sh
cp browser-launcher.desktop ~/.local/share/applications/
sed -i "s|%h|$HOME|g" ~/.local/share/applications/browser-launcher.desktopLanzarlo como ventana flotante en KDE
chromium --app=http://localhost:7700 --window-size=440,600 \
--user-data-dir="$HOME/.local/share/browser-launcher/chromium-profile" \
> /dev/null 2>&1 &Búscalo en el menú de KDE como Browser Launcher y anclalo a la barra de tareas.
Nota sobre emojis en Arch
Si los iconos no aparecen, instala la fuente Noto Emoji. En Arch hay un bug conocido donde el paquete no coloca el fichero correctamente:
sudo pacman -S noto-fonts-emoji
sudo curl -L "https://github.com/googlefonts/noto-emoji/raw/main/fonts/NotoColorEmoji.ttf" \
-o /usr/share/fonts/noto/NotoColorEmoji.ttf
sudo fc-cache -fvComparativa rápida
| Herramienta | Gratis | Linux | Responsivo | Cross-browser real |
|---|---|---|---|---|
| Chrome DevTools | ✅ | ✅ | Básico | ❌ |
| ResponsivelyApp | ✅ | ✅ | ✅ | ❌ |
| Polypane | ❌ (9$/mes) | ✅ | ✅✅ | ❌ |
| Browser Launcher | ✅ | ✅ | ❌ | ✅ |
La conclusión es que no hay una sola herramienta que lo cubra todo. Mi flujo combina ResponsivelyApp para el diseño responsivo y el Browser Launcher para validar que los motores reales renderizan igual antes de entregar un proyecto.
Sobre la IA en el flujo de trabajo
Lo menciono aquí porque me parece un tema que vale la pena tratar con honestidad. Cada vez uso más la IA para construir herramientas, automatizar tareas y resolver problemas técnicos — y no me parece algo que haya que ocultar ni que reste mérito al resultado.
La IA no sabe lo que tú necesitas hasta que se lo explicas bien. No sabe cómo funciona tu sistema, tu flujo de trabajo ni tus proyectos. Saber preguntar, saber contextualizar y saber evaluar lo que te devuelve es una habilidad en sí misma. Y el que sepa aprovecharla bien tiene una ventaja real sobre el que no.
Este lanzador es un buen ejemplo: la idea era mía, el problema era mío, y la depuración también. La IA fue el copiloto. Y creo que así es como funciona mejor.
¿Usas alguna otra herramienta para esto? Me interesa especialmente si hay algo que cubra tanto responsivo como cross-browser en un solo sitio sin costar un ojo de la cara.
¿Te ha sido útil?
Ayúdame a mejorar con tu puntuación y comentarios.
Comentarios
Los comentarios están gestionados por GitHub Discussions. Necesitas una cuenta de GitHub para participar. ¡Es gratis y rápido!