Polypane - Un navegador para desarrolladores web ambiciosos

• Navegador de escritorio (basado en Chromium) con funciones integradas para desarrollo, depuración y pruebas de sitios web, como diseño responsivo, accesibilidad y pruebas de rendimiento
• Todo el trabajo se sincroniza en tiempo real, y es posible ver y manipular simultáneamente viewports de distintos tamaños
  • Todas las acciones, como clics, entrada de texto, scroll y hover, se reflejan de inmediato en todos los viewports
• Disponible para Mac, Windows y Linux, con prueba gratuita de 14 días

Resumen de funciones principales

• Diseño responsivo

  • Permite revisar de un vistazo todos los viewports, desde móviles hasta monitores 5K
  • Hace posible probar breakpoints de CSS sin ajustar manualmente el tamaño del navegador

• Análisis y sincronización en tiempo real

  • Todas las acciones, incluido scroll, clics, entrada de texto y hover, se sincronizan en tiempo real en todos los viewports
  • Incluso la consola y el inspector de elementos están integrados para reducir tareas repetitivas

• Revisión de accesibilidad y rendimiento

  • Revisa en tiempo real la estructura, los metadatos y la accesibilidad (A11y), y sugiere mejoras
  • Incluye más de 40 herramientas de depuración para probar de distintas maneras

• Modo oscuro y pruebas de distintos medios

  • Permite probar simultáneamente los modos oscuro y claro sin cambiar la configuración del sistema operativo
  • Simula varias condiciones de medios, como reducción de movimiento, modo de ahorro de datos y estilos de impresión

• Vista previa de tarjetas para redes sociales

  • Soporta vista previa de metatarjetas en plataformas principales como Twitter(X), Facebook, Slack, LinkedIn y Discord
  • Ofrece previews exactos al píxel incluso en modo claro/oscuro y en localhost

• Soporte para extensiones de herramientas de desarrollador

  • Permite usar extensiones de DevTools como React, Vue, Angular, Svelte y Redux
  • Al estar basado en Chromium, ofrece un entorno de desarrollo familiar

Ventajas exclusivas de Polypane

• Permite probar múltiples dispositivos y entornos con un solo navegador
• Mejora la velocidad del flujo de trabajo de desarrollo y diseño hasta 5 veces
• Incluye en un solo lugar herramientas de depuración multifunción, revisión de accesibilidad, sincronización de viewports, capturas de pantalla y recarga en tiempo real
• Evoluciona a partir de la retroalimentación de los usuarios y es un proyecto autofinanciado 100% centrado en los usuarios

Otras funciones destacadas

• Creación ilimitada de viewports
• Sincronización de teclado, hover y scroll
• Superposición de cuadrícula
• Visor JSON y varios presets de dispositivos
• Detección de overflow horizontal
• Comparación visual de diseño (diff)
• Simulación de daltonismo
• Resumen de metadatos
• Inspector de Web Vitals
• Emulación táctil
• Detección de enlaces rotos
• Configuración de headers personalizados
• Función para guardar y compartir workspaces

Un comentario del creador

• Es un proyecto iniciado por el desarrollador Kilian Valkhof para resolver inconvenientes que experimentó al crear numerosos sitios web
• En comparación con usar solo Chrome, la velocidad de trabajo mejoró aproximadamente un 60%, y los usuarios también perciben aumentos de productividad de 2 a 5 veces
• Es un proyecto operado sin inversión, sostenido por la retroalimentación y las suscripciones de los usuarios, enfocado en crear herramientas centradas en desarrolladores

Resumen de reseñas de usuarios

• Vivian Guillen: “Es increíblemente rápido y la sincronización de scroll es fantástica”
• Scott Tolinski: “Permite detectar fácilmente problemas de espaciado entre breakpoints”
• Sara Soueidan: “Las herramientas de depuración son tan buenas que impresionan”
• Kevin Powell: “La revisión de accesibilidad y las funciones de depuración son excelentes”
• Segun Adebayo (desarrollador de Chakra UI): “Es una herramienta indispensable para desarrollar apps y sitios modernos”

[nemorize]

https://responsiveviewer.org/
También hay una opción distribuida como extensión de Chrome. Si renuncias a algunas funciones, también es posible usarlo directamente sin la extensión.

[qyurila]

Está curiosamente difícil encontrar esa mención, pero si vinculas tu cuenta de estudiante de GitHub, puedes usarlo gratis. Gracias a eso, me sirvió muy bien en un proyecto personal anterior.

[luiseok]

Hay un navegador similar, aunque le faltan algunas funciones.
https://responsively.app/
Si dudan en probar Polypane porque es de pago, les recomiendo que prueben este una vez.

[GN⁺]

Opiniones en Hacker News

• Hola, soy Kilian, fundador y único desarrollador de Polypane. Es interesante verlo de nuevo en la página principal
• Hace poco implementé por primera vez diseño web responsivo moderno con CSS, aprendiendo flexbox y grid y usando varios navegadores y emuladores de dispositivos. De haber conocido esta app, me habría ahorrado mucho trabajo
• He usado mucho Polypane. Es un producto excelente y emula muy bien problemas sutiles de dispositivos que la vista de dispositivos de Chrome no maneja bien
• Llevo más de un año usando Polypane, y aunque puede que no sea para todo el mundo, se ajusta bien a mis necesidades
  • La gestión de sesiones mantiene mi flujo de trabajo bien organizado
  • Diseño con prioridad responsiva, con paneles para vistas de escritorio y móvil
  • Función de capturas de pantalla completa, con anotaciones
  • Estas funciones se pueden replicar con otros navegadores o plugins, pero prefiero que todo ya venga configurado de forma predeterminada y no requiera ajustes adicionales
  • El soporte es excelente. Cuando tuve un problema en el que mi IDE no podía ejecutar Polypane correctamente, me ayudaron por Slack y lo resolvimos rápido
  • Si lees las conversaciones en Slack, queda claro que están comprometidos con crear el mejor producto posible para sus usuarios
• Ojalá existiera un navegador que pudiera emular con precisión el navegador de dispositivos móviles. No solo cambiar el tamaño de la pantalla; incluso el simulador de iOS de Apple falla en eso
• Parece emular muchas cosas, pero me pregunto qué es lo que no emula bien
  • Como parece estar construido sobre Chromium, supongo que no podrá mostrar problemas que solo aparecen en Safari o Mozilla
  • Probablemente esté en la documentación
  • Edición: está al final del FAQ. Me pregunto si hay otras limitaciones conocidas aparte del motor de navegador real
• Casi todas las funciones ya están integradas en las herramientas de desarrollo de Firefox. Me pregunto por qué se necesita un navegador nuevo. También parecería posible como extensión
• Me pregunto qué funciones ofrece frente a Browserstack (en relación con pruebas cross-browser)
• Me pregunto si ofrece integración con GenAI (Copilot, Claude, etc.)
  • Me gustaría ayudar a vendérselo a mi gerente
• Ojalá el modelo de precios ofreciera una compra única. Se ve excelente, pero creo que sería difícil justificar un costo mensual/anual
• ¡Está realmente genial! Me pregunto si habría posibilidad de obtener un descuento para estudiantes. Por ahora voy a probar la versión de prueba gratuita