Vergleich von Browsern für responsives Design

Es gibt eine Reihe von Desktop-Anwendungen, deren Ziel es ist, Ihre Website gleichzeitig in verschiedenen Dimensionen anzuzeigen. So können Sie zum Beispiel CSS schreiben und auf einen Blick sicherstellen, dass es über alle Viewports hinweg funktioniert.

Sie sind sich alle sehr ähnlich. Zum Beispiel führen sie „Event Mirroring“ durch, was bedeutet, dass, wenn Sie in einem Fenster oder auf einem Gerät scrollen, alle anderen dies ebenfalls tun, zusammen mit Klicks, Tippen usw. Sie können auch hinein- und herauszoomen, um viele Geräte gleichzeitig zu sehen, nur verkleinert. Mal sehen, ob wir Unterschiede aufdecken können.

Sizzy

• Windows, Mac und Linux
• Der „Solo“-Tarif beginnt bei 5 $/Monat und es gibt höhere Tarife

Es gibt viele kleine coole entwicklerorientierte Funktionen wie

• Einen Port töten, indem man einfach die Portnummer eingibt
• Es gibt einen universellen Inspektionsmodus, aber obwohl Sie keine Änderung in den Entwicklertools vornehmen können, die alle Fenster und Geräte gleichzeitig beeinflusst, können Sie sie zumindest bei allen inspizieren, und wenn Sie klicken, wird die entsprechende DevTools-Sitzung aktiviert.
• Drosseln oder offline gehen mit einem Klick
• JavaScript mit einem Klick deaktivieren
• Designmodus mit einem Klick aktivieren (z. B. jedes Element hat contenteditable).
• Schalter zum Ausblenden von Bildern, Deaktivieren aller Stile, Umranden aller Elemente usw.
• Schriftarten mit Google Font-Auswahl überschreiben

Responsively App

• Windows, Mac und Linx
• Open Source (Kostenlos)

• Universeller Inspektionsmodus, der den richtigen DevTools-Kontext auswählt
• Die Option „SSL-Validierung deaktivieren“ ist clever, falls bei lokalem HTTPS Probleme auftreten.
• Ein-Klick-Umschaltung des Dark Modes

Blisk

• Windows und Mac
• Kostenlos, mit Premium-Upgrades (10 $/Monat). Einige der Funktionen wie Scroll-Synchronisierung und automatisches Neuladen werden als Premium-Funktionen aufgeführt, was mich vermuten lässt, dass die kostenlose Version diese in irgendeiner Weise einschränkt.

• Automatisches Neuladen ist eine clevere Idee. Sie richten einen „Watcher“ für bestimmte Dateitypen in bestimmten Ordnern ein, und wenn sich diese ändern, wird die Seite neu geladen. Ich stelle mir vor, dass die meisten Entwicklungsumgebungen eine Art Style-Injection oder Hot Module Reloading haben, aber es ist trotzdem nützlich, wenn es für diejenigen verfügbar ist, die es nicht haben.
• Es gibt keinen universellen DevTools-Inspektor, aber Sie können die DevTools einzeln öffnen und sie verfügen über ein benutzerdefiniertes universelles Inspektionstool zur Anzeige der Box-Model-Dimensionen von Elementen.
• Es gibt einen benutzerdefinierten Fehlerberichtsbildschirm.
• Sie können den „Browsing Mode“ aktivieren, um all die schicken Gerätefunktionen auszuschalten und ihn als semi-regulären Browser zu verwenden.

Polypane

• Windows, Mac und Linux
• Kostenlos, mit Premium-Tarifen ab 10 $/Monat. Die Anmeldung führt zu einer Handvoll Onboarding-E-Mails über eine Woche (mit der Option, sich abzumelden).

• Es verfügt über Browsererweiterungen für andere Browser, um Ihren aktuellen Tab in Polypane zu öffnen.
• Der universelle Inspektionsmodus erscheint mir der nahtloseste von allen, aber er reicht nicht aus, um Änderungen über Fenster und Geräte hinweg zu propagieren. Jemand muss das tun! Es hat eine „Live CSS“-Pane, die zusätzlichen CSS für alle offenen Geräte injiziert, was cool ist.
• Es kann Geräte basierend auf Breakpoints in Ihrem eigenen CSS öffnen – und es funktioniert tatsächlich!

Duo

• Es ist im Mac App Store für 5 $ erhältlich, aber seine Website ist offline, was es ziemlich tot erscheinen lässt.
• Es hat null Schnickschnack-Funktionen. Wie der Name schon sagt, zeigt es einfach dieselbe Website nebeneinander in zwei Spalten an, die in der Größe verändert werden können.

Re:view

• Es ist keine separate Browser-App, sondern eine Browsererweiterung. Das gefällt mir irgendwie, da ich in einem kanonischen Browser bleiben kann, mit dem ich bereits vertraut bin und der regelmäßige Updates erhält.
• Die „Breakpoints“-Ansicht ist eine clevere Idee. Ich glaube, sie sollte Ihre Website bei den Breakpoints in Ihrem CSS anzeigen, aber sie scheint für mich kaputt zu sein. Ich bin mir nicht sicher, ob dies ein aktiv entwickeltes Projekt ist. (Meine Vermutung ist, dass es das nicht ist.)

Also?

Was, Sie wollen, dass ich einen Gewinner auswähle?

Obwohl mich Polypanes Sprünge und das Onboarding ein wenig abgeschreckt haben, denke ich, dass es das durchdachteste Funktionsset hat. Sizzy ist nah dran, aber die Benutzeroberfläche ist unübersichtlicher auf eine Art und Weise, die nicht notwendig erscheint. Ich gebe zu, ich mag, wie Blisk sich wirklich darauf konzentriert, „einfach die mobile Ansicht ansehen und dann den Rest des Platzes mit einer größeren Ansicht füllen“, denn das kommt meinem Arbeitsstil näher. (Ich muss selten eine „Geräte-Wand“ von trivial unterschiedlichen mobilen Bildschirmen sehen.)

Die Tatsache, dass Responsively kostenlos und Open Source ist, ist sehr cool, aber ist das nachhaltig? Ich fühle mich sicherer, wenn ich mich mit Apps beschäftige, die als Unternehmen geführt werden. Die Tatsache, dass ich mit Re:View in meinem normalen Browser bleibe, bedeutet, dass ich die höchste Chance habe, es tatsächlich zu nutzen, aber es fühlt sich derzeit wie ein totes Projekt an, also werde ich es wahrscheinlich nicht tun. Also, vorerst muss ich wohl Polypane krönen.