Ab Version 29 bietet der Firefox zahlreiche Neuerungen in den Developer Tools

Firefox Developer Tools mit großem Update
Kommentare

Mit Version 29 des Firefox bietet Mozilla Entwicklern zum Teil spannende Updates in den Developer Tools. Ein Blick lohnt sich!

Seit ein paar Tagen ist Firefox 29 im Aurora Channel verfügbar. Mit an Bord sind natürlich die Developer Tools, die nicht nur mit einem überarbeitetem Look und Feel punkten wollen, sondern auch zahlreiche Verbesserungen in den bekannten Tools mitbringen Außerdem wurde der Support für CSS Source Maps in den Style-Editor integriert.

Rein von der kosmetischen Seite betrachtet hat das Light Theme der Tools eine komplette Generalüberholung spendiert bekommen, aber auch das Dark Theme wirkt nun deutlich konsistenter in Szene gesetzt als in den bisherigen Versionen. Die meisten Änderungen sind allerdings marginal und dürften eher weniger ins Gewicht fallen.

Neues im Editor

Die meisten Änderungen und Bugfixes hat der Editor-Part der Developer Tools spendiert bekommen – 43 Personen haben insgesamt 201 Fehler ausgemerzt. Darüber hinaus gibt es jedoch noch mehr Schmankerl, denen man Beachtung schenken sollte.

So bietet der Editor, der Beispielsweise im Style Editor oder im Scratchpad zum Einsatz kommt, die Möglichkeit des Code Foldings. So lassen sich beispielsweise Funktionen, die man nicht Bearbeiten oder untersuchen möchte, zusammenklappen, damit man sich auf die wichtigen Bereiche konzentrieren kann.

Darüber hinaus bietet der Editor nun Syntax Higlighting für ECMAScript 6, sowie Key Bindings im Stile von VIM oder Emacs. Künftig kann man seine bewährte Arbeitsweise im Developer-Tools-Editor also beibehalten.

Besonders spannend dürfte diese Neuerung sein: Ab Version 29 des Firefox bietet der Style-Editor Support für CSS Source Maps – in Kürze sollen weitere Details dazu veröffentlicht werden. Neu ist auch, dass CSS-Eigenschaften und –Werte automatisch vervollständigt werden.

Neues im Network Monitor

Der Network Monitor zeigt nun an, wie lange der Browser für das Laden der verschiedenen Teile der Seite benötigt. Dabei ist die Ansicht nun zweigeteilt: Einmal zeigt das Diagramm den ersten Aufruf einer Seite, im zweiten wird der Aufruf mit gefülltem Cache dargestellt.

Ein kurzes Video verdeutlicht darüber hinaus die Funktionalität des Performance-Analyse-Tools, das mit einem Click auf die Stoppuhr gestartet wird:

Neues im Debugger

Der Debugger hat ebenfalls ein paar Updates spendiert bekommen. So wurde ein klassischer Call Stack neben der Darstellung des Sourcecodes hinzugefügt.

Neu: Der Call Stack Quelle: https://hacks.mozilla.org/2014/02/css-source-map-support-network-performance-analysis-more-firefox-developer-tools-episode-29/

Weitere Neuerungen sind ein Button, mit dem sich alle Break Points aktivieren bzw. deaktivieren lassen, eine neue Druckfunktion sowie die Möglichkeit, DOM-Nodes aus dem Debugger heraus zu Highlighten und inspizieren.

Neues im Inspector und der Console

Das Verhalten des Inspector-Higlighters wurde überarbeitet, um einen runderen Gesamteindruck zu gewährleisten. Außerdem gibt es eine hübsche Vorschau, wenn ein CSS-Transform in Stylesheet vorhanden ist. Fährt man mit der Maus über einen Transform, erscheint ein Tooltipp, der das Verhalten visualisiert.

Zu guter Letzt gibt es auch in der Console einige Neuerungen. Die Ausgabe für Objekte wurde, Abhängig vom Objektyp, um zusätzliche Informationen erweitert. Außerdem wird der Stack von console.trace nun inline angezeigt und verlinkt direkt auf die entsprechenden Codestellen.

Eine etwas ausführlichere Vorstellung inklusive Bildmaterial findet man im Blogpost Firefox Developer Tools Episode 29. Wer sich jetzt bereits einen Überblick über die neuen Funktionalitäten verschaffen möchte, der sollte sich Firefox Aurora von der offiziellen Website herunterladen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -