Firefox Developer Edition: Der Browser für Entwickler

Mittlerweile stellt jeder Browser Entwicklerwerkzeuge zur Verfügung, mit denen du Webprojekte ausgiebig auf Gestaltung und Funktionalität prüfen kannst. Standardmäßig gehören das Debugging von JavaScript und das Inspizieren des Quelltextes dazu. Mozilla hat mit dem Firefox Developer Edition einen eigenen Browser entwickelt, der sich ganz besonders an Webentwickler richtet und ihnen mit speziellen Tools hilft, eine Website ausgiebig zu prüfen. Dazu gehört nun auch das ausgiebige Testen von CSS3-Animationen und -Transitions.

Schlankes Design, schneller Zugriff auf Entwicklerwerkzeuge

Firefox Developer Edition basiert auf dem Aurora-Zweig des beliebten Browsers. Hier sind neue Funktionen, die im normalen Firefox noch nicht zur Verfügung stehen, bereits implementiert und können im Vorfeld getestet werden. Das zunächst auffälligste an der Developer Edition ist das schlanke Design der Benutzeroberfläche. Tab- und Adressleiste benötigen weniger Platz als im normalen Firefox. Außerdem wird der Browser standardmäßig mit einem dunklen Theme ausgeliefert. Wer es grundsätzlich lieber hell mag, stellt das Theme auf die gängige Farbgebung um, wie man sie auch vom normalen Firefox gewohnt ist.

Oberfläche vom Firefox Developer Edition

Da sich Firefox Developer Edition an Entwickler wendet, ist der Zugriff auf die verschiedenen Entwicklerwerkzeuge deutlich prominenter untergebracht. In der Adresszeile findest du einen eigenen Menüpunkt, der dir Zugriff auf alle Tools verschafft.

Entwicklerwerkzeuge unterstützen jetzt Animationen

Dank CSS3 sind Animationen zu einem wichtigen Punkt zeitgemäßer Webentwicklung geworden. Der neue Inspektor der Entwicklerwerkzeuge unterstützt diese nun auch. Dazu wurde ein eigener Reiter eingeführt, der Animationen auf einer Zeitleiste visualisiert. Die einzelnen animierten Elemente werden dabei als Ebenen untereinander dargestellt. Ähnliche Darstellungen kennt man aus Videosschnitt- und Animationsprogrammen.

Animationswerkzeug mit Zeitleiste und Ebenen

Bei jedem Element werden alle CSS-Eigenschaften, die per Animation verändert werden, aufgelistet. Über Keyframes wird auf der Zeitleiste dargestellt, wo Veränderungen stattfinden.

Über Schaltflächen spielst du eine Animation ab oder spulst zurück. Gerade bei schnell ablaufenden Animationen ist es oft wichtig, diese im Detail auf Korrektheit überprüfen zu können. Hier hast du die Möglichkeit, eine Animation in geringerer Geschwindigkeit abspielen zu lassen – halb so schnell, ein Viertel oder ein Zehntel so schnell. Bei besonders langen Animationen ist es oft hilfreich, diese schneller ablaufen zu lassen. Auch das ist möglich – bis zu zehnfacher Geschwindigkeit.

Easingeffekte testen und ändern

Dank der CSS3-Easingeffekte werden Animationen auf Wunsch nicht nur linear, sondern auch mit unterschiedlich definierten Beschleunigungen und Abbremsungen ausgeführt. Innerhalb des neuen Inspektors hast du nun die Möglichkeit, den Easingeffekt einer Animation oder einer Transition direkt zu ändern.

Einfache Auswahl eines Easingeffektes

Dabei wird neben dem angegebenen Easing-Wert ein kleines Icon angezeigt, über welches du den Easingeffekt einfach änderst. Du erhältst eine Übersicht aller zur Verfügung stehenden Easings samt Diagramm, welches die Animationskurve beschreibt. Eine kleine Beispielanimation zeigt dir zudem das Easing in Aktion. Neben den Standardeffekten wie „ease“, „ease-in“ und „ease-out“ gibt es es einige individuelle Abläufe, die über eigene Bézierkurven definiert sind. Über die Anfasser im Diagramm änderst du die Bézierkurve selbst und erstellst so dein eigenes Easing, welches über „cubic-bezier()“ im CSS-Quelltext ausgezeichnet wird.

Dank dieser neuen Funktion testet du im Handumdrehen unterschiedliche Easings für deine Animationen und Transitions, ohne den Browser dafür verlassen zu müssen.

CSS3-Filter anwenden und testen

Ganz ähnlich wie das Anwenden diverser Easingeffekte, änderst du CSS3-Filter eines Elementes oder fügst neue Filter hinzu. Wird auf einem Element ein Filter angewendet, zeigt dir der Inspektor ein kleines Icon daneben an. Über dieses Icon kannst du den angewendeten Filter ändern oder neue Filter hinzufügen.

Filter ändern und hinzufügen

Alle angewendeten Filter werden dir als Liste mit den definierten Werten angezeigt. Du kannst Werte ändern, Filter löschen oder aus einer Liste der möglichen Filter einen weiteren hinzufügen.

Da gerade Easingeffekte und Filter aufgrund der vielfältigen Möglichkeiten im Browser getestet werden müssen, bietet der Firefox hier eine sehr schöne Möglichkeit, CSS-Regeln für solche Effekte sehr einfach im Browser direkt darstellen zu können. Gerade jene Entwickler, die HTML- und CSS-Quelltext händisch auszeichnen, werden mit diesen Funktionen einiges an Arbeit sparen können.

Farben über Pipette auswählen

Das Editieren der Farbwerte erfolgt über eine spezielle Oberfläche, über die du die Möglichkeit hast, eine neue Farbe direkt aus einer Farbpalette auszuwählen. Willst du eine andere Farbe aus dem Dokument auswählen, nutzt du einfach die Pipette. Dabei wird die mit der Pipette aufgenommene Farbe der ausgewählten CSS-Eigenschaft als neuer Wert zugewiesen.

Farben aus Palette oder per Pipette auswählen

Über einen Schieberegler fügst du einer deckenden Farbe auch schnell einen Alphakanal hinzu. So wird aus einer „rgb()“-Angabe automatisch eine „rgba()“-Angabe mit entsprechendem Alphawert.

CSS-Regeln und HTML im Browser verändern

Was für Animationen, Filter und Farben funktioniert, klappt auch mit allen anderen CSS-Regeln einer Seite. Du kannst jede CSS-Regel direkt im Browser auslesen und verändern. Während dir für Animationen, Transitions, Filter und Farben spezielle grafische Oberflächen zur Verfügung stehen, welche dir beim Anpassen helfen, gibt es für alle anderen Regeln nur die Möglichkeit, diese direkt im Inspektor per Tastatureingabe zu verändern.

Du wählst dazu eine Regel aus und überschreibst sie mit neuen Werten. Außerdem kannst du jede Regel einfach deaktivieren, indem du das Häkchen, das vor jeder Regel angezeigt wird, entfernst.

Auch den HTML-Quelltext bearbeitest du direkt im Browser. Dabei ist es möglich, einzelne Attribute zu bearbeiten oder gleich ein komplettes Element. Alle so getätigten Änderungen sind logischerweise nur für die Dauer einer Sitzung verfügbar. Beim Neuladen einer Seite gehen sie wieder verloren.

Speicherabbild erfassen

Während die bis hier hin genannten Werkzeuge auch im normalen Firefox verfügbar sind, gibt es einiges, was derzeit nur in der Developer Edition bereitgestellt wird. Dazu gehört das neue Speicherwerkzeug, welches über die Einstellungen zunächst einmal aktiviert werden muss. Anschließend kann der Browser für eine Seite ein Speicherabbild erstellen.

Darstellung des Speicherabbildes

Nach dem Erstellen des Abbildes wird dir aufgelistet, welche Teile der Seite wie viel Platz belegen. So erkennst du sehr gut, welche Objekte besonders viel Speicher benötigen. Ab Firefox 44 wird das Speicherwerkzeug auch dort zur Verfügung stehen.

Strecken messen

Ebenfalls neu und derzeit ausschließlich in der Developer Edition verfügbar, ist das Messen von Strecken im Browser. Auch diese Funktion muss über die Einstellungen zunächst aktiviert werden. Anschließend steht dir das Messwerkzeug über ein Icon in der Menüleiste der Entwicklerwerkzeuge zur Verfügung.

Messen im Browser

Ist das Messwerkzeug ausgewählt, ziehst du einfach ein beliebiges Rechteck im Browserfenster. Anschließend werden die Breite, Höhe sowie Diagonale des Rechteckes angezeigt. Hilfslinien helfen zudem dabei, die Lage des Rechteckes mit anderen Elementen auf der Horizontalen und Vertikalen zu vergleichen.

Mit Valence auch andere Browser testen

Soll eine Website in möglichst vielen Browsern einwandfrei funktionieren, muss sie dort jeweils geprüft werden. Dank Valence ist es möglich, Seiten in anderen Browsern und auf mobilen Geräten zu testen. Während du eine Seite beispielsweise im mobilen Firefox auf deinem Androidgerät aufrufst, kannst du diese im Firefox Developer Edtion prüfen.

Gerade das Prüfen auf mobilen Geräten stellt immer eine besondere Herausforderung dar, weil es auf diesen Geräten beziehungsweise in den mobilen Browsern keine Entwicklerwerkzeuge gibt. Valence läuft über WebIDE, welches dir in der Developer Edition zur Verfügung steht. WebIDE ist unter anderem eine Entwicklungsumgebung für Firefox-OS-Apps.

WebIDE zum Prüfen von Seiten, die in anderen Browsern geladen sind

Du kannst aber nicht nur dann auf mobilen Geräten testen, wenn dort Firefox läuft. Auch Chrome und Safari werden unterstützt. Auf Androidgeräten muss zum Beispiel das USB-Debugging aktiviert sein, damit der Browser im WebIDE angezeigt wird. Anschließend überträgt WebIDE auf dem Mobilgerät geladene Seiten an den Firefox Developer Edition, sodass dort das ausgiebige Testen erfolgen kann. Dort stehen dir dann beispielsweise Inspektor, Konsole und Debugger zur Verfügung.

DevTools Challenger zum Ausprobieren der neuen Möglichkeiten

Mit dem DevTools Challenger hat Firefox eine eigene Website ins Leben gerufen, mit denen du die neuen Möglichkeiten der Entwicklerwerkzeuge testen kannst. Dazu gibt dir die ansprechend gestaltete Seite in kurzen Abschnitten einen Einblick über die neuen Funktionen. Kleine Videos erklären, wie du welches Werkzeug aufrufst und verwendest.

Website: DevTools Challenger

So lernst du spielerisch, wie du Animationen steuerst, Filter veränderst und hinzufügst, sowie beliebige CSS-Regeln mit neuen Werten überschreibst.

Fazit

Die neuen Entwicklerwerkzeuge im Firefox Developer Edition stellen für Webentwickler eine große Arbeitserleichterung dar. Gerade beim Ausprobieren komplexer Animationen und Effekte ersparst du dir den ständigen Wechsel zwischen Browser und HTML-Editor, da du alles direkt im Browser ausprobieren und ändern kannst.

Außerdem stehen dir in der Developer Edition viele neue Funktionen zur Verfügung, die im „normalen“ Firefox noch nicht bereitstehen. So erfährst du bereits im Vorfeld, was zukünftig im Firefox möglich sein wird und hinkst der Entwicklung nicht hinterher. Wie bei Firefox üblich, ist auch die Developer Edition kostenfrei.

(dpe)