Firefox Developer Edition

64-Bit Download Ver. 42.0a2 - 64bit - für Windows
Weitere Downloads sind verfügbar:

32-Bit Download Ver. 42.0a2 - 32bit - für Windows

Die Firefox Developer Edition ist ein Spezialbrowser von Mozilla, der den professionellen Anforderungen der Webentwickler Rechnung trägt. Hier finden sie Werkzeuge zur Analyse und Bearbeitung von Internetinhalten.

Die Firefox Developer Edition ist eine offizielle Nebenentwicklung der Mozilla Foundation. Auf den ersten Blick ein ganz normaler Browser, verstecken sich unter der Haube Dutzende ausgeklügelter Werkzeuge. Und wer auf den “aktuellen Firefox” nicht verzichten kann und will, hat auch hier Glück: Man kann die Developer Edition und einen “normalen Firefox” gleichzeitig betreiben!

Firefox Developer Edition: Die Werkzeuge

Auf den ersten Blick unterscheidet sich die Firefox Developer Edition nur wenig von der normalen Benutzerversion. Ein leicht anderes Design und das war’s auch schon. Die richtig interessanten Features warten hinter den Kulissen und wir erreichen Sie zum größten Teil über das Schraubenschlüsselicon neben der Sucheingabe.

Dieses Icon öffnet das Menü, in dem sich die meisten Entwicklerwerkzeuge befinden. Wahlweise – und das ist auch gleich der erste Menüpunkt – können wir diese Werkzeuge als breite Leiste am unteren Rand auch ein- oder ausblenden. Die Tastenkombination dazu lautet Strg + Umschalttaste + I (großes i). Die Einblendung dieser Leiste bezieht sich immer nur auf das jeweilige Fenster und ist keine globale Einstellung.

Stilbearbeitung in der Firefox Developer Edition

Wie sieht meine Webseite aus, wenn ich einen kleinen Parameter meiner Formatierung ändere? Passen die Fenster noch, wenn ich den Rand 5 Pixel schmaler mache? Die Firefox Developer Edition hilft Webentwicklern dabei, eine bestehende Webseite live so zu bearbeiten, dass die Ergebnisse sofort zu sehen sind.

Dabei wird am Quellcode der tatsächlichen Webseite nichts geändert! Die Änderung der Stilbearbeitung beziehen sich in der Firefox Developer Edition lediglich darauf, wie eine geladene Seite im Browserfenster angezeigt wird. Dazu werden alle verwendeten Stile der Seite geladen und können in einem Fenster direkt manipuliert werden. Das Ergebnis ist sofort zu sehen. So kann man “am lebenden Objekt” testen, wie sich eine Änderung der CSS-Formatierung im Browser auswirkt und die Änderungen dann auf die Quelldateien übertragen. Es ist in der Stilbearbeitung auch möglich, eine CSS-Datei zu importieren und darin zu arbeiten.

Firefox Developer Edition mit integrierter Netzwerkanalyse

Welche Darstellungsverzögerungen Bilder oder Multimediainhalte in einer Webseite bringen, kann sich ein Entwickler leicht selbst errechnen. Wo allerdings der Flaschenhals in einem bestehenden Onlineauftritt sind, das zeigt uns die Netzwerkanalyse der Firefox Developer Edition. Diese Funktion finden wir ebenfalls in den Entwicklerwerkzeugen und können sie mit Strg + Umschalttaste +Q aufrufen.

Direkt nach Aufruf der Funktion startet die Analyse und solange nichts gestreamt wird, gibt es auch nicht viel zu sehen. Doch navigiert man auf der Seite, lädt sie neu und testet alle Verbindungen aus, dann summieren sich unten die Millisekunden und Byte zu Sekunden und Megabyte. Wir sehen deutlich, welche Skripte oder Inhalte langsamer geladen werden und dadurch den Seitenaufbau verzögern.

Bildschirmgrößen testen mit der Firefox Developer Edition

Vorbei die Zeiten, als alle mit 1024 mal 768 Pixeln unterwegs waren. Webseiten werden auf Riesenmonitoren, Spielkonsolen, Handys, Tablets und TV-Geräten betrachtet. Also muss man sie so stricken, dass sie auf jedem Display funktionieren. Darum nennt sich die Funktion, mit der man in der Firefox Developer Edition Bildschirmgrößen testen kann auch “Responsive Design View”.

Früher brauchte ein Entwickler spezielle AddOns, wenn er die Bildschirmgrößen seiner zukünftigen Besucher im Browser testen wollte. Und die haben dann in der Regel auch nur die Größe des Browserfensters angepasst. Die Funktion Bildschirmgrößen testen in den Entwicklerwerkzeugen der Firefox Developer Edition erledigt das, ohne dass der Browser selbst verändert wird. Mit Strg + Umschalttaste + M rufen wir die Funktion auf, woraufhin sich im Inneren des Fensters ein entsprechend großes Darstellungsfenster öffnet. Man kann von dieser Darstellung dann zu jeder Zeit auch Screenshots anfertigen, um sie z.B. einem Kunden zu präsentieren: “Sehen Sie? Ihr gewünschtes Design wird so auf einem iPhone nicht funktionieren...”

Firefox OS Apps entwickeln mit der Firefox Developer Edition

Mozilla versucht sein Firefox OS als Betriebssystem für Handys und Tablets zu etablieren. Da werden natürlich auch Apps benötigt. Was liegt da näher, als eine Entwicklerumgebung für diese Programme in die Firefox Developer Edition zu packen?

Mit der WebIDE ist es nun möglich, die eigenen App-Entwicklungen im Browser zu installieren, sie zu debuggen und gleich zu bearbeiten. Die Funktion ersetzt den App-Manager und kann in Kombination mit dem Web-Audio-Editor genutzt werden, um echte Firefox OS Apps zu entwickeln, die sich hinter den Apps anderer Systeme nicht verstecken müssen. Das Werkzeug Valence ist ebenfalls in dem Browser enthalten. Damit können Apps sogar systemübergreifen entwickelt und auf verschiedenen Zielbrowsern getestet werden, ohne dass diese installiert sein müssen.

Firefox Developer Edition: Datenübermittlung

Gleich beim Start der Firefox Developer Edition werden wir darauf aufmerksam gemacht, dass der Browser “nach Hause telefoniert”. Soll heißen, er sendet automatisch zu jeder Zeit anonyme Daten über die Nutzung und Performance des Browsers an den Hersteller.

Nun kann man sich denken, dass an anonymen Statistiken nicht schlimmes ist und man damit ja auch bei der Weiterentwicklung dieses prächtigen Browsers hilft, aber ein komisches Gefühl kommt vielleicht doch auf. Zum Glück kann jeder selbst entscheiden, ob er das will. In den Einstellungen finden wir unter Erweitert -> Datenübermittlung die entsprechenden Punkte und können sie einfach abwählen. Dort finden wir auch Links, hinter denen sich genauere Informationen über die gesendeten Daten befinden.

Fazit

Die Firefox Developer Edition ist ein gewohnt guter Browser, der zusätzliche Fähigkeiten mitbringt, um ihn zum führenden Werkzeug für Webentwickler zu machen. Anders als bei der normalen Version gibt es den Browser auch als 64-Bit-Ausgabe. Dass man ihn neben einer Standardinstallation von Firefox nutzen kann, die ein komplett getrenntes Browserprofil nutzt, ist nur folgerichtig. Das kann man übrigens auch in den Einstellungen unter Allgemein festlegen.

Dieser Browser ist nicht nur für Profis hilfreich, die ihn sicher zu schätzen wissen, sondern durchaus auch für Anfänger. Sie können durch die Analyse- und Entwicklungswerkzeuge mehr über die Zusammenhänge der Webentwicklung lernen. Und vielleicht sorgt die Firefox Developer Edition ja auch dafür, dass so manche Webseite schneller lädt und besser funktioniert. Das allein würde schon die Existenz dieses Zusatzbrowsers rechtfertigen. Und so ganz nebenbei kann an ihn j auch nutzen, ohne selbst Entwickler zu sein. Immerhin bekommt man eine hochaktuelle Version sogar in 64-Bit!

zum Hersteller

von

Weitere Themen: Mozilla Firefox, Mozilla Foundation