Firefox 11 ist mit leichter Verspätung verfügbar geworden. Schon in der Vorabversion Nightly und Aurora waren vielversprechende Web-Entwickler-Tools vorgestellt worden, die nun Einzug in das Stable Release gehalten haben.

Der Style Editor, im deutschen Firefox Stil-Bearbeitung, listet die mit der aktuellen Seite verwendeten CSS-Files auf und ermöglicht es, sie einzeln abzuschalten, live zu manipulieren oder lokal zu speichern. Er wird entweder über das Web-Entwickler-Menü oder über die Tastenkombination Shift + F7 aufgerufen:

Stil-Bearbeitung holt die CSS-Files einer Seite zum Vorschein, die sich in Firefox 11 live manipulieren lassen

Die 3D-Struktur-Ansicht verwandelt die Seite in eine topografische Karte der DOM-Elemente und je tiefer sie im Baum stecken, desto höher ist ihre Lage. Mit WASD oder den Pfeiltasten sowie mit Mausbewegungen wechselt der Entwickler die Perspektive und kann so Scheibe für Scheibe nachvollziehen, auf welcher Nesting-Ebene er sich befindet:

Elemente-Untersuchung in 3D: Firefox 11 zeigt, wie tief verschachtelt Seitenelemente im Code stecken

Wichtig für einige Web-Entwickler wird sein, dass Firefox 11 endlich die outerHTML-Property korrekt unterstützt. Auf diese Art extrahierte Elemente sowie Unter-Elemente werden dadurch sehr sauber im äußeren HTML dargestellt. Selbst div-Tags sind dann nicht mehr für Besucher sichtbar.

sorry, your browser does not support iframes