Die besten Browser für Webentwicklung und Webdesign

Mit einem Browser konsumieren wir bekanntlich nicht nur Inhalte im Web, sondern können mit passenden Web-Applikationen auch direkt Inhalte generieren. Und in der Web-Entwicklung sind dir die Browser-Devtools bestimmt ein Begriff. Neben den standardmässig in den Browsern eingebauten Werkzeugen gibt es allerdings auch Browser, die speziell auf die Bedürfnisse von Web-Entwickler*innen und -Designer*innen ausgerichtet sind. Wir stellen dir heute ein paar davon genauer vor.

Big Three: Firefox sticht heraus

Jeder der 3 grossen Browser-Hersteller (Chrome, Firefox und Safari) hat eine passende Developer-Edition im Angebot. Diese erweiterten Versionen bieten einige zusätzliche Features, die Web-Entwicklerinnen und -Entwicklern das Leben leichter machen sollen.

Unter den 3 «Grossen» sticht Firefox hervor. Der Browser aus dem Hause Mozilla glänzt in der Developer-Version mit einigen Features, die es bei der Konkurrenz so nicht gibt. Nicht zuletzt die Landing-Page für die «Firefox Browser Developer Edition», macht richtig Lust, Firefox als Entwicklungs-Browser einzusetzen. Da können sich die Kolleginnen und Kollegen von Google und Apple definitiv eine Scheibe abschneiden.

Experimentelle Funktionen, neueste W3C-Standards und häufige Updates bieten alle Developer-Versionen der grossen Drei. Mozilla geht mit Firefox allerdings noch einen Schritt weiter. So bietet die Firefox Developer Edition eine Anzeige von inaktivem CSS. Damit siehst du sofort, ob die ausgewählte CSS-Deklaration auf der ausgewählten Website überhaupt zum Einsatz kommt. Ein JavaScript-Debugger, ein Schriftarten-Panel und ein eigenes Tool für die Entwicklung und Designs mit CSS Grid runden das ansprechende Angebot der Firefox Developer Edition ab.

Das restliche Feld: 4 (Geheim-) Tipps

Wie eingangs erwähnt: Browser sind primär dazu da, um Inhalte im Web zu konsumieren. Und das merkt man den Developer-Editionen von Google und Apple an, wie ich finde. Umso typischer fürs Web sind die kleineren Anbieter, die in die Bresche springen. Diese 4 Browser, die als Zielgruppe eindeutig die Web-Entwicklerinnen und -Entwickler dieser Welt haben, solltest du dir genauer anschauen:

Polypane

Polypane, das Tool des Holländers Kilian Valkhof, strotzt nur so von Funktionen. Jedes einzelne Feature aufzuzählen, würde den Rahmen dieses Beitrags sprengen. Darum hier ein kleiner Abriss über die interessantesten Funktionen von Polypane.

Mit Polypane kannst du alle Viewport-Grössen testen, die du brauchst. Alles in einer App und dazu noch völlig synchron. Ob scrollen, hovern, klicken oder Formulare ausfüllen. Ein richtig praktisches Feature, wie ich finde. Ausserdem bietet dir Polypane eine Reihe an Debuggern und Simulatoren rund um Barrierefreiheit. Live-Reloading oder Auto-Reloading sowie ein Broken-Link-Checker sind ebenfalls inklusive. Und eine Funktion, die mir persönlich besonders gut gefällt: Previews von Meta- und Open-Graph-Tags für die beliebtesten Social-Media-Netzwerke, Google oder auch Slack.

Und eben, das ist längst nicht alles. Auf der Polypane-Website findest du einen Überblick über alle Funktionen. Du kannst Polypane 14 Tage lang kostenlos testen, danach werden CHF 118.- pro Jahr oder CHF 12.- pro Monat fällig.

Blisk

Wie mit Polypane lassen sich auch mit Blisk alle Viewport-Grössen gleichzeitig testen. Blisk setzt den Fokus einen Tick stärker auf Geräte als auf reine Browser-Grössen. Am auffälligsten ist das an den Geräte-Mockups, die Blisk automatisch um die einzelnen Browser-Fenster legt.

Viele weitere Funktionen von Polypane findest du auch in Blisk. So gehören Screenshots der ganzen Seite und allen Devices genauso zum Lieferumfang wie eine Auto-Refresh-Funktion. Mit Blisk kannst ausserdem deinen ganzen Bildschirm aufnehmen und dank dem Cloud-Speicher, der ab dem kostenpflichtigen Angebot mitgeliefert wird, direkt mit deinem Team teilen.

Blisk kann grundsätzlich kostenlos genutzt werden. Gewisse Funktionen stehen dir dabei allerdings lediglich 10 Minuten pro Tag zur Verfügung. Für kurze Tests dürfte das reichen, für den professionelleren Einsatz ist aber der Kauf der kostenpflichtigen Lizenz nicht verkehrt. Für knapp USD 100.- pro Jahr oder USD 10.- pro Monat bist du dabei.

Sizzy

Sizzy ist vermutlich der bekannteste Developer-Browser in der Szene und wird, gemäss eigenen Angaben, in Unternehmen wie Basecamp, Duck Duck Go oder Zapier genutzt. Das Herz bildet auch bei Sizzy die zentrale Übersicht über alle gewählten Browser-Grössen bzw. Geräte.

Standardmässig startest du mit einer responsiven Ansicht, kannst die Geräte aber auch für ein Bildschirmfoto schön arrangieren lassen, den Fokus auf ein einzelnes Gerät setzen oder sogar übereinander stapeln. Sizzy simuliert nicht nur die Gerätehülle sondern auch die UI des entsprechendes Browsers und des Betriebssystems. Praktischerweise kannst du diese Einstellungen auch komplett selbst verwalten und den Geräten beispielsweise eine eigene Farbe verpassen. Wie auch bei der Konkurrenz lassen sich mit Sizzy verschiedene Netzwerkbedingungen simulieren und du siehst, wie gut dein Projekt beispielsweise mit einer 3G-Leitung funktioniert.

Mit der Butler-Funktion bedienst du sämtliche Funktionen auch per Tastaturbefehle und der Session-Manager erspart dir ständiges Ein- und Ausloggen, um unterschiedliche Benutzer*innentypen zu simulieren. Wie auch bei Polypane kannst du eine Sprache für die einzelnen Geräte setzen und dir eine Social-Media-Preview anzeigen lassen.

Sizzy bietet einen 14 Tage langen, kostenlosen Test, allerdings ist dafür bereits die Angabe von Kreditkarten-Daten nötig. Nach dem Test werden für die Nutzung von Sizzy USD 60.- pro Jahr oder USD 7.- pro Monat fällig.

Responsively

Etwas jünger als die Konkurrenz ist Responsively. Im Gegensatz zu Polypane, Blisk und Sizzy ist Responsively quelloffen und kostenlos.

Das Open-Source-Tool bietet ebenfalls gespiegelte Aktionen, womit alle simulierten Browserfenster mitscrollen und auf deine Aktionen reagieren. Du kannst mit Responsively die Anordnung der Browserfenster nach deinem Gusto konfigurieren und aus über 30 Geräte-Presets wählen. Eine Screenshot-Funktion, mit der du alle Fenster gleichzeitig und in der ganzen Grösse ablichten kannst ist ebenso an Bord wie eine Hot-Reload-Funktion. In Sachen Dokumentation steckt Responsively noch in den Kinderschuhen, ausführliche Anleitungen zu den Funktionen suchst du aktuell vergeblich. Das Beisteuern von Anleitungen wäre also ein guter Startpunkt um das Open-Source-Projekt zu unterstützen.

Fazit

Wenn du die zusätzlichen Funktionen von Polypane, Blisk, Sizzy oder Responsively nicht benötigst, bist du mit der Firefox Developer Edition gut bedient. Der Feuerfuchs bietet den umfangreichsten Funktionsumfang der grossen Browser-Hersteller. Darf es gerne ein bisschen mehr sein, solltest du dir Polypane oder Sizzy genauer anschauen. Die eingebauten Funktionen sind so zahlreich, da ist bestimmt auch etwas für dich dabei. Und falls du gerne Open-Source-Projekte unterstützt, schau unbedingt bei Responsively und dem GitHub-Account des Projekts vorbei.

Nutzt du schon einen der genannten Developer-Browser? Oder vielleicht einen, den wir hier nicht erwähnt haben? Dann lasse gerne einen Kommentar da.