Firefox Developer Edition – Der Browser für Web-Entwicklerinnen

Firefox Developer Edition

Mozilla hat anlässlich des 10. Geburtstages des Firefox Browsers eine neue Version, speziell für Web-EntwicklerInnen, herausgebracht. Neben dem normalen Firefox, der Beta und Nightly-Version, gibt es jetzt auch Firefox Developer Edition.

Laut ihrer Website bringt der Firefox Developer Edition grundlegende Werkzeuge zusammen mit einigen neuen, welche Ihre Möglichkeiten zum plattformübergreifenden Arbeiten von einem Gerät aus erleichtern.

Was genau das bedeutet und welche Werkzeuge integriert sind, habe ich mir angesehen.

Grundlegende Features

Neben den bekannten Features, wie "Seiten-Inspektor", "Web-Konsole", "JavaScript-Debugger" und "Netzwerkanalyse", gibt es unter anderem folgende neue Werkzeuge:

WebIDE

Im Browser ist ein IDE (Integrierte Entwicklungsumgebung) vorhanden, das es möglich macht Apps für Firefox OS zu entwickeln, zu installieren und zu debuggen.

Auf Youtube gibt es ein Demo-Video dazu.

Valence

Valence gehört mit Sicherheit zu einem der interessantesten Features des FFDE. Denn es ermöglicht es, Browser- und geräteübergreifend zu entwickeln und zu debuggen. Vorerst kann man (nur) die Chrome und iOS-Emulatoren mit dem WebIDE verbinden und die Firefox Konsole verwenden, um in den jeweiligen mobilen Browsern (Chrome und Safari) zu debuggen.

Man hat auch die Möglichkeit sein Smartphone mit dem Browser zu verbinden. Vom System her erinnert es sehr stark an Adobe Edge Inspect, wobei Valence aber deutlich performanter und nicht so buggy ist. Neben Änderungen am DOM und CSS, kann man auch Javascript über die Konsole ausführen.

Android 4.4.4 Developer options und USB-Debugging aktivieren

Um auf einem echten Android Smartphone testen zu können, muss man USB-Debugging aktivieren. Auf Android 4.4.4 funktioniert das folgendermaßen:

  1. Man geht in die Einstellungen ("Settings") und wählt ganz unten "About Phone" aus.
  2. Dort sucht man "Build number" und tapt so lange darauf (ca. 7 Mal) bis eine Nachricht kommt, dass man nun den Developer-Modus aktiviert hat.
  3. Wenn man wieder in die Einstellungen geht, hat man jetzt über "About Phone" einen neuen Menüpunkt "Developer options".
  4. In den "Developer options" muss man dann "USB-Debugging" aktivieren. FFDE erkennt das Gerät dann automatisch.

Andere Geräte habe ich nicht getestet aber es gibt weitere Beschreibungen.

Firefox Developer Edition - Valence

Valence hat in meinem kurzen Test sehr gut funktioniert und wird sicher zu einem Werkzeug, das ich verwenden werde. Auf der MDN-Website gibt es aber einen wichtigen Hinweis zu Valence:

Valence is still in its early stages, and is available only as a preview. We do not yet recommend using it for day-to-day work.

Style Editor (Stilbearbeitung)

Der Style Editor macht es möglich, Stylesheets direkt und live im Browser zu bearbeiten und zu speichern.

Ich habe ein schnelles Screencapture – Achtung eine Premiere! – aufgenommen, um zu zeigen, dass sich bestehende Dateien überschreiben und neue erstellen lassen.

Responsive Design View

Mit dem Responsive Design View kann eine Website in verschiedenen Auflösungen, ähnlich wie bei http://responsivetest.net, angezeigt werden. Es gibt Presets, wobei man aber auch eigene Auflösungen eingeben oder die Größe des Anzeigebereichs durch Drag & Drop verändern kann.

Wie man in dem Video sehen kann, gibt es zwei sehr nette Details. Man kann Screenshots erstellen und man sieht im Style Editor welche Media Queries gerade greifen.

Fazit

Die letzten Jahre habe ich eigentlich nur in Chrome entwickelt. Zwischendurch habe ich versucht mit Firefox zu arbeiten, aber der Workflow war meines Erachtens nicht so flüssig wie in Chrome. Davon habe ich bei meinen Tests in Firefox Developer Edition nichts bemerkt. Ich werde den Firefox DE die nächsten Tage als primären Entwicklungsbrowser verwenden und weiter testen. Ich bin von dem bestehenden Set an Werkzeugen überzeugt und auf weitere Entwicklungen gespannt.

Manuel Matuzovic

Frontend Developer aus Wien.

4 Kommentare zu “Firefox Developer Edition – Der Browser für Web-Entwicklerinnen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *