Polypane - Der Browser für ambitionierte Webentwickler

• Ein Desktop-Browser auf Chromium-Basis mit integrierten Funktionen für Website-Entwicklung, Debugging und Tests wie Responsive Design, Barrierefreiheit und Performance-Tests
• Alle Arbeiten werden in Echtzeit synchronisiert, und Viewports in verschiedenen Größen lassen sich gleichzeitig anzeigen und bedienen
  • Klicks, Eingaben, Scrollen, Hover und alle anderen Aktionen werden sofort auf alle Viewports angewendet
• Verfügbar für Mac, Windows und Linux, mit 14 Tagen kostenloser Testphase

Zusammenfassung der Kernfunktionen

• Responsive Design

  • Alle Viewports vom Mobilgerät bis zum 5K-Monitor auf einen Blick prüfen
  • CSS-Breakpoints testen, ohne die Browsergröße manuell anpassen zu müssen

• Echtzeitanalyse und Synchronisierung

  • Scrollen, Klicken, Eingaben und sogar Hover werden in Echtzeit über alle Viewports hinweg synchronisiert
  • Auch Konsole und Element-Inspektor sind integriert, um wiederholte Arbeit zu reduzieren

• Prüfungen für Barrierefreiheit und Performance

  • Struktur, Metadaten und Barrierefreiheit (A11y) werden in Echtzeit geprüft, inklusive Verbesserungsvorschlägen
  • Mehr als 40 Debugging-Tools ermöglichen Tests auf vielfältige Weise

• Dark Mode und Tests verschiedener Medienbedingungen

  • Dark- und Light-Mode gleichzeitig testen, ohne die Betriebssystemeinstellungen zu ändern
  • Simulation verschiedener Medienbedingungen wie reduzierte Bewegung, Datensparmodus und Druckstile

• Vorschau von Social-Media-Karten

  • Unterstützung für Meta-Card-Vorschauen auf wichtigen Plattformen wie Twitter(X), Facebook, Slack, LinkedIn und Discord
  • Pixelgenaue Vorschauen auch im Light-/Dark-Mode und auf localhost

• Unterstützung für DevTools-Erweiterungen

  • Nutzbar mit verschiedenen DevTools-Erweiterungen wie React, Vue, Angular, Svelte und Redux
  • Da es ein Chromium-basierter Browser ist, bietet er eine vertraute Entwicklungsumgebung

Die besonderen Vorteile von Polypane

• Tests für verschiedene Geräte und Umgebungen mit nur einem einzigen Browser
• Bis zu 5-fach schnellere Entwicklungs- und Design-Workflows
• All-in-One-Paket mit vielseitigen Debugging-Tools, Prüfungen für Barrierefreiheit, Viewport-Synchronisierung, Screenshots, Live-Reloading und mehr
• Wird auf Basis von Nutzerfeedback weiterentwickelt und ist ein zu 100 % nutzerzentriertes, eigenfinanziertes Projekt

Weitere wichtige Funktionen

• Unbegrenzte Anzahl an Viewports
• Synchronisierung von Tastatur, Hover und Scrollen
• Grid-Overlay
• JSON-Viewer und verschiedene Geräte-Presets
• Erkennung von horizontalem Overflow
• Visueller Designvergleich (Diff)
• Simulation von Farbenblindheit
• Überblick über Metadaten
• Web-Vitals-Prüfer
• Touch-Emulation
• Erkennung defekter Links
• Eigene Header konfigurieren
• Workspaces speichern und teilen

Ein Wort vom Entwickler

• Ein Projekt, das der Entwickler Kilian Valkhof gestartet hat, um Probleme zu lösen, auf die er beim Erstellen zahlreicher Websites gestoßen ist
• Im Vergleich zur ausschließlichen Nutzung von Chrome verbesserte sich seine Arbeitsgeschwindigkeit um etwa 60 %, und auch Nutzer berichten von 2- bis 5-fach höherer Produktivität
• Ein Projekt, das ohne Investoren betrieben wird und sich durch Feedback und Abonnements der Nutzer trägt, mit Fokus auf die Entwicklung entwicklerzentrierter Tools

Zusammenfassung der Nutzerbewertungen

• Vivian Guillen: „Extrem schnell, und die Scroll-Synchronisierung ist fantastisch“
• Scott Tolinski: „Probleme mit Abständen zwischen Breakpoints lassen sich leicht entdecken“
• Sara Soueidan: „Die Debugging-Tools sind so großartig, dass sie mich begeistern“
• Kevin Powell: „Die Prüfungen für Barrierefreiheit und die Debugging-Funktionen sind hervorragend“
• Segun Adebayo (Chakra-UI-Entwickler): „Ein unverzichtbares Tool für die Entwicklung moderner Apps und Websites“

[nemorize]

https://responsiveviewer.org/
Es gibt auch eine Version, die als Chrome-Erweiterung verteilt wird. Wenn man auf einige Funktionen verzichtet, kann man sie auch direkt ohne Erweiterung nutzen.

[qyurila]

Es ist etwas schwer, dazu einen Hinweis zu finden, aber wenn man ein GitHub-Studentenkonto verknüpft, kann man es kostenlos nutzen. Dadurch konnte ich es für mein letztes privates Projekt gut verwenden.

[luiseok]

Es gibt einen ähnlichen Browser, dem allerdings ein paar Funktionen fehlen.
https://responsively.app/
Falls ihr zögert, weil Polypane kostenpflichtig ist, empfehle ich, das einmal auszuprobieren.

[GN⁺]

Hacker-News-Kommentare

• Hallo, ich bin Kilian, der Gründer und alleinige Entwickler von Polypane. Spannend, es wieder auf der Startseite zu sehen
• Ich habe vor Kurzem zum ersten Mal modernes responsives Webdesign mit CSS umgesetzt, dabei Flexbox und Grid gelernt und verschiedene Browser- und Geräte-Emulatoren verwendet. Hätte ich diese App gekannt, hätte ich mir wohl viel Mühe sparen können
• Ich habe Polypane oft benutzt. Es ist ein großartiges Produkt und emuliert subtile Geräteprobleme gut, mit denen die Geräteansicht von Chrome nicht gut zurechtkommt
• Ich nutze Polypane seit über einem Jahr. Es ist vielleicht nicht für jeden etwas, aber für meine Anforderungen passt es gut
  • Das Session-Management hält meinen Workflow gut organisiert
  • Responsive-first-Design mit Panels für Desktop- und Mobile-Ansichten
  • Umfassende Screenshot-Funktion inklusive Anmerkungen
  • Man könnte diese Funktionen auch mit anderen Browsern oder Plugins nachbauen, aber ich mag es, dass hier alles von Haus aus eingerichtet ist und keine zusätzliche Konfiguration nötig ist
  • Der Support ist hervorragend. Als ich ein Problem hatte, bei dem meine IDE Polypane nicht korrekt starten konnte, bekam ich Hilfe über Slack und konnte es schnell lösen
  • Wenn man die Slack-Unterhaltungen liest, wird klar, dass man sich mit großem Einsatz darum bemüht, das bestmögliche Produkt für die Nutzer zu bauen
• Ich wünschte, es gäbe einen Browser, der Browser auf Mobilgeräten präzise emulieren kann. Nicht nur die Bildschirmgröße zu ändern — selbst Apples iOS-Simulator scheitert daran
• Es scheint vieles zu emulieren, aber ich frage mich, was es nicht gut emuliert
  • Da es offenbar auf Chromium basiert, kann es Probleme, die nur in Safari oder Mozilla auftreten, vermutlich nicht anzeigen
  • Wahrscheinlich steht das in der Dokumentation
  • Korrektur: Es steht unten in den FAQ. Ich frage mich, ob es außer den eigentlichen Browser-Engines noch andere bekannte Einschränkungen gibt
• Fast alle Funktionen sind bereits in die Firefox-Entwicklertools eingebaut. Ich frage mich, warum man dafür einen neuen Browser braucht. Das müsste doch auch als Erweiterung möglich sein
• Ich frage mich, welche Funktionen es im Vergleich zu Browserstack zusätzlich bietet (im Hinblick auf Cross-Browser-Testing)
• Ich frage mich, ob es GenAI-Integrationen bietet (Copilot, Claude usw.)
  • Ich würde das Produkt gern besser an meinen Manager verkaufen können
• Ich wünschte, das Preismodell würde einen Einmalkauf anbieten. Es sieht großartig aus, aber die monatlichen/jährlichen Kosten dürften schwer zu rechtfertigen sein
• Wirklich cool! Ich frage mich, ob es eine Möglichkeit für einen Studierendenrabatt gibt. Ich werde erst einmal die kostenlose Testversion ausprobieren