Firefox 11: Tools für Web-Entwickler im Test

Mit seinen nützlichen Erweiterungen und der soliden HTML-Engine war Firefox immer schon einer der Lieblingsbrowser von Webentwicklern. Erst mit den letzten Chrome-Versionen hat Firefox hier Marktanteile an den Konkurrenten von Google abgeben müssen. In der aktuellen Version 11 schickt sich Firefox an, seine Verbreitung und Beliebtheit in Entwicklerkreisen wieder auszubauen und nimmt neue Funktionen auf, um Entwicklern das Leben leichter zu machen. Einige Funktionen, die bisher über Erweiterungen wie Web Developer und Firebug nachgerüstet wurden, sind direkt in den Browser gewandert. Bereits Firefox 10 schenkte den Bedürfnissen von Entwicklern mehr Aufmerksamkeit und ergänzt jetzt in der aktuellen Version 11 einige neue Funktionen. Der Browser bietet Web-Entwicklern damit auch ohne Erweiterungen eine Werkzeugkiste mit kompetenten Webmaster-Tools, die wir hier vorstellen.
 
Webmaster-Tools für HTML, CSS, Javascript und Web-Apps

HTML-Struktur von Webseiten untersuchen

Alle Funktionen für Web-Entwickler fasst Firefox im Menü „Extras, Web-Entwickler“ zusammen. Das mit Abstand wichtigste Feature ist hier der Punkt „Untersuchen“, der auch über die Tastenkombination Strg-Umschalten-I zur Verfügung steht. Firefox zeigt damit am unteren Rand eine Leiste mit der Position der HTML-Elemente in der Seitenstruktur DOM (Document Object Model) an. Die Auswahl des Elementes folgt hier dem Mauszeiger und die anderen Bereiche der Webseite werden effektvoll abgedunkelt. Ein Klick setzt den Fokus auf das gewünschte Element. Eine weitere Möglichkeit, die Funktion zum Untersuchen aufzurufen, ist das Kontextmenü von Elementen auf Webseiten: Klicken Sie ein beliebiges HTML-Element im Browser-Fenster mit der rechten Maustaste an und wählen Sie dann „Element untersuchen“. Firefox setzt dann den Fokus gleich auf das ausgewählte Element und zeigt dessen Klasse, ID und Position in der DOM-Struktur der Webseite an.
 
Wenn Sie jetzt in der unteren Leiste die Schaltfläche "HTML" anklicken, sehen Sie den ausgewählten Abschnitt im HTML-Quelltext. Der Clou ist aber die Analyse der Stylesheets: Die Schaltfläche "Style" zeigt alle definierten CSS-Stile der Webseite an, die sich auf das gerade ausgewählte Element auswirken. Dazu öffnet der Browser eine Seitenleiste mit den berechneten CSS-Regeln des Elements. Praktischerweise zeigt der Browser hier auch an, welche Stile beispielsweise von einem übergeordneten Element vererbt (inherited) werden. Gerade diese Funktion macht auch Webseiten mit ausufernden Stylesheets wieder übersichtlich und ist eine enorme Hilfe beim Debugging im CSS.

Eine spannende, neue Funktion von Firefox 11 ist die 3D-Visualisierung der HTML-Struktur. Hierzu bietet die Leiste "Untersuchen" neben den Schaltflächen "HTML" und "Style" noch den Button "3D". Ein Klick darauf zeigt eine dreidimensionale Darstellung der Webseite, die exakt das Verhältnis aller Elemente zueinander abbildet und damit die logische Struktur der DOM zeigt. Aktuell handelt es sich hier noch um eine beeindruckende Spielerei ohne riesigen Nutzwert, da die Infos bei umfangreichen Webseiten hier einfach zu dicht und unübersichtlich gepackt sind. Diese Visualisierung zeigt aber bereits, wohin die Reise der Entwickler-Tools von Firefox in Zukunft gehen könnte.

 
Webmaster-Tools für Suchmaschinen-Optimierung und Traffic-Analyse

Zudem funktioniert 3D in Firefox nur, wenn der PC über einen geeigneten Grafikchip verfügt. Und Firefox ist hier recht wählerisch. Während es mit Nvidia-Chips und ATI/AMD wenig Probleme gibt, arbeitet der Browser mit Intel-Chipsätzen nur eingeschränkt zusammen. Auch Optimus-Chipsätze von aktuellen Notebooks finden in Firefox noch keine umfassende Unterstützung. Wer einen Chipsatz dieser Kategorie besitzt, hat Pech und muss auf die 3D-Fähigkeiten von Firefox 11 verzichten. Experimentierfreudige Anwender können allerdings versuchen, WebGL zu erzwingen. Gehen Sie dazu auf die Adresse "about:config" und setzen Sie den Wert des Parameters "webgl.force-enabled" auf "true". Ob die 3D-Unterstützung funktioniert, zeigt sich dann nach einem Neustart des Browsers.