In letzter Zeit habe ich mich eingehend mit der Software Polypane auseinander gesetzt. Obwohl ich schon vor längerer Zeit eine Lizenz erworben habe, bin ich bisher nicht dazu gekommen, mir dieses Hilfsmittel genau anzusehen.
Meine Hoffnung in der Recherche bestand auch darin, dass dieses Produkt ebenfalls für andere Klub-Mitglieder spannend sein könnte. Und zwar nicht nur für die Entwickler*innen unter uns.
Meine Erkenntnisse sind vielfältiger, als mir lieb ist.
Wir sprechen hier von einer Software, die Unmengen an Werkzeugen beinhaltet, die bei der Entwicklung einer Website behilflich sind.
Die Website in Arbeit kann mit der Software aufgerufen, betrachtet und bedient werden, wie mit jedem normalen Browser. Die zusätzlichen Werkzeuge helfen dann beispielsweise beim Umsetzen des Layouts oder bei der Fehlersuche.
An dieser Stelle muss klargestellt werden, dass Standard-Browser (Chrome, Firefox, Safari, Edge, etc.) über sogenannte Developer Tools verfügen, die beim Entwickeln einer Website sehr hilfreich sind oder sogar unverzichtbar.
Ein dedizierter Entwicklungs-Browser vereint aber sämtliche DevTools-Aspekte mit weiteren Hilfsmitteln, um unsereins die Arbeit zu erleichtern.
Das auffallendste Merkmal eines Entwicklungs-Browsers ist sicherlich die gleichzeitige Darstellung von verschiedenen Viewports derselben Website. Diese Ansichten werden bei Polypane “Panes” (übersetzt «Scheibe», «Ausschnitt») genannt. Das hilft beim Layouten und Stylen einer Website enorm. Aber auch für Tester ist genau diese Eigenschaft Gold wert. Sie können sich gleichzeitig auf mehreren “Geräten” durch die Website klicken. Die Interaktionen mit der Website sind innerhalb der Panes synchronisiert, wodurch alle auf Scrollen, Maus-Klicks, Hover-States und Tastatur-Befehle reagieren.
Die Anzahl und Dimension der Panes kann beliebig definiert werden.
Der Umfang der vorhandenen Hilfsmittel ist enorm.
Ich habe ein paar spannende Tools herausgepickt:
Die Software bietet über 40 Debug tools und Simulatoren.
Die Debug Tools sind unterteilt in die Kategorien Layout, Accessability, Content und Disable Features.
Layout Debugging (zeigt die einzelnen HTML-Elemente an)
Reachability (zeigt einen Overlay an, der die Erreichbarkeit der Elemente mit den Fingern hervorhebt)
Contrast Checker (zeigt die jeweiligen Kontraste zwischen Schrift und Hintergrund an und bewertet diese)
Track Focus (hebt die Elemente mit Focus-State hervor)
ARIA Attributes (zeigt die jeweiligen ARIA-Attributes an)
Content Chaos Test (die Inhalte können auf verschiedene Weise automatisch verändert werden. Z.B. mehr oder weniger randomisierter Text)
Disable CSS/JS/Images (schaltet die einzelnen Styling, Scripte und Bilder ein bzw. aus)
Es lassen sich verschiedene Einschränkungen der User oder auch Einstellungen des OS (bzw. des Browsers) simulieren. Beispielsweise:
verschiedene Farbenblindheiten
generelle Sehschwächen
helles Sonnenlicht
Nachtmodus
Entwickler und Tester können von einzelnen Panes Screenshots über die gesamte Länge der Website erstellen. Ebenso ist es möglich, einen Screenshot über alle Panes zu machen. Alle Screenshots können vielseitig bearbeitet und exportiert werden.
Die Emulationen sind in die Kategorien «Media», «Emulation», «Network» und «Session» unterteilt.
prefers-color-scheme (z.B. «light» oder «dark»)
prefers-reduced-motion («no-preference» oder «reduce»)
Page Language (entspricht dem «lang»-Attribut des HTML-Elements)
Throttle network speed (z.B. «fast 3G» oder «offline»)
Sessions (lässt eigene Sessions zu, beispielsweise «Logged In»)
Die Info-Bar unterhalb jedes Panes zeigt folgende Daten an:
Web Vitals (eine Zusammenfassung der wichtigsten Web Vitals)
Console Stats (zeigt die Anzahl der Konsolen-Einträge unterteilt in den Farben «warnings» und «errors» an)
Horizontal Overflow Detection (zeigt an, wenn es mind. einen horizontalen Overflow auf der Page gibt und färbt diesen rot ein)
Man kann sich zwischen den bekannten Chrome DevTools und den Polypane Developer Tools entscheiden. Letztere haben viele kleine Vereinfachungen eingebaut, die den Workflow eines Entwicklers beschleunigen. Beispielsweise sind ein JSON-Viewer und ein Form Autofiller dabei. Ebenfalls sind die Polypane DevTools Pane-übergreifend.
Eine Jahreslizenz für eine einzelne Anwender*in (auf max. 3 Geräten) kostet derzeit CHF 107.–.
Die Teamlizenz für zehn Anwender*innen (auf max. je 3 Geräten) kostet CHF 465.–. Die Investition lohnt sich also ab fünf Anwender*innen.
Das Tool kann vollumfänglich für 14 Tage getestet werden.
Von den grossen Browsern gibt es jeweils Entwickler-Versionen auf dem Markt. Diese verfügen über detailliertere DevTools. Direkte Konkurrenz zu Polypane (im Sinne eines All-in-one Dev-Browsers) gibt es beispielsweise in den Produkten Sizzy und Blisk. Mit keinem der erwähnten Browser habe ich mich intensiv auseinander gesetzt und kann deshalb keine Einschätzung dazu machen.
Polypane ist mehr als ein Browser für Entwickler*innen, sondern auch für Tester*innen und Digital Marketing Spezialist*innen.
Polypane vereint unzählige, tolle Features, die beim Erstellen einer Website hilfreich sind.
Obwohl die Software immer schneller und stabiler wird, ist sie meiner Meinung nach nicht über alle Zweifel erhaben. Immer mal wieder funktioniert das synchronisierte Scrollen oder die DevTools nicht. Ich würde mir natürlich wünschen, dass diese Fehler schnellstmöglich ausgemerzt werden und ich Polypane als einziges Tool für meine Arbeit nutzen könnte.
Ist Polypane also der ultimative Entwicklungs-Browser? Leider nein. Wenn das Ding aber einwandfrei funktionieren würde, könnte ich mir keine bessere Unterstützung für meine tägliche Arbeit vorstellen. So wechsle ich aktuell jeweils zwischen Polypane und den DevTools von Chrome hin und her.
