Frontend-Entwickler, die für mehrere Viewport-Größen designen, sind meist mehr damit beschäftigt, das Browserfenster zu ändern, als damit, sich um den Code des UI zu kümmern. Zum Glück gibt Tools, die euch diese Aufgabe abnehmen. Das Prinzip ist folgendes: Scrollt, klickt oder tippt ihr in einer der Ansichten, wird dieses Verhalten in allen anderen Fenstern repliziert.

Responsively ist ein Open-Source-Tool, das auf Linux, Mac und Windows gleichermaßen funktioniert. Es zeigt euch die User-Interaktionen auf einer Reihe gängiger Bildschirmgrößen simultan an und bietet zudem ein Vorschau-Layout, das ihr beliebig anpassen könnt. Über das Elements-Inspektor-Feature habt ihr die Möglichkeit, einzelne Elemente zu inspizieren – simultan auf allen Devices in der Vorschau. Wem die über 30 bereits vorhandenen Device-Größen nicht reichen, kann zusätzlich eigene Gerätemaße hinzufügen. Responsively bietet eine One-Click-Screenshot-Funktion und unterstützt Hot Reloading – also das Updaten nur der Komponente, die bearbeitet wurde, anstelle eines kompletten Refreshs der gesamten Applikation. Als besonderes Goodie gibt es in Responsively einen Darkmode-Toggle. Schön ist auch die „Disable SSL Validation“-Option.

Mac-User können die App über Homebrew installieren: brew cask install responsively

Windows-User respektive über choco install responsively

Das zugehörige Repository zum Open-Source-Projekt findet ihr auf GitHub.

Sizzy gibt es ebenfalls für Windows, Mac und Linux, anders als Responsively ist Sizzy allerdings kostenpflichtig. Für eine Einzellizenz zahlt ihr fünf US-Dollar im Monat, Lizenzen für Teams sind entsprechend teurer. Wie die offen lizensierte Konkurrenz bietet die App verschiedene Viewport-Größen, ein Universal-Inspect-Element-Feature und mehrere nützliche Screenshot-Möglichkeiten. Zudem gibt es Goodies wie die Möglichkeit, einen Port über die Eingabe der Port-Number zu killen, JavaScript zu deaktivieren, offline zu gehen oder Fonts mit verschiedenen Google Fonts zu überschreiben. Mit einem Klick könnt ihr in Sizzy in den Design-Modus wechseln, wo ihr eure Elemente direkt in der Vorschau editieren könnt – möglich wird das über das contenteditable-Attribut. Sizzy bietet verschiedene Toggles, über die ihr zum Beispiel Bilder oder auch das komplette Styling eurer App verbergen und wieder sichtbar machen könnt.

Auch Polypane ist für Windows-, Mac- und Linuxnutzer gleichermaßen verfügbar. Ihr könnt das Tool 14 Tage lang kostenlos ausprobieren, danach werden 8,25 Euro für eine Einzellizenz respektive 39 Euro für eine Business-Lizenz fällig. Wie die anderen vorgestellten Tools bietet auch Polypane verschiedene Viewport-Größen und einen Universal-Inspect-Mode. Außerdem bietet das Tool die Möglichkeit, Viewports auf Basis der Breakpoints in eurem CSS anzuzeigen. Über eine Option namens Live CSS lässt sich das CSS für alle offenen Bildschirmgrößen simultan temporär ändern. Polypane bietet an die Chrome-Devtools angelehnte Debugging-Werkzeuge und unterstützt Devtool-Extensions für React, Angular, Vue und Svelte. Schön sind auch die Accessibility-Testing-Features des Responsive Browsers.

Blisk gibt es als einziges der vier vorgestellten Tools nur für Windows und Mac. Blisk ist in der Basisversion kostenlos zu haben, für die Premiumversion sind 9,99 Dollar pro Monat fällig. Wer sich für ein Jahresabo entscheidet, kann diesen Betrag auf 8,99 Dollar pro Monat drücken. Die Premiumversion beinhaltet Features wie erweitertes synchronisiertes Scrollen und Auto Refreshing – nützlich für Entwickler, die in Umgebungen ohne Style Injection und Hot Module Reloading arbeiten. Blisk bietet ein Inspection-Feature, über das ihr euch die Box-Model-Dimensionen eurer Elemente anzeigen lassen könnt. Einen universellen DevTools-Inspektor bietet das Tool hingegen nicht. Blisk verfügt über einen eigenen Screen für die Ausgabe von Fehlermeldungen und die Möglichkeit, von der Multi-Device-Ansicht zu einer „normalen“ Browseransicht zu toggeln.

Sizzy und Polypane verfügen beide über ein relativ ähnliches Feature-Set, das Interface von Polypane wirkt dabei übersichtlicher als jenes von Sizzy. Sizzy punktet dafür mit einem etwas günstigeren Preis. Übersichtlichkeit ist auch ein Selling Point von Blisk: Anstelle von zig Viewportgrößen mit geringfügig unterschiedlichen Maßen zeigt euch das Tool eine einzelne mobile Ansicht – der restliche Screen wird einfach mit einer größeren „Desktop“-View ausgefüllt. Großer Nachteil des Tools: Linux-Nutzer gehen leer aus.

Für Responsively spricht, dass das Tool Open Source und damit kostenlos ist. Das bringt auch den Vorteil, dass ihr euch an der Weiterentwicklung beteiligen und über Issues und Pull-Requests aktiv Einfluss auf die weitere Entwicklung nehmen könnt. Ein eindeutiger Sieger lässt sich hier schwer bestimmen, am Ende ist die Entscheidung für einen der Responsive Browser wohl vor allem eine Geschmacksfrage.