Website-Entwicklung

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

Montag den 26.03.2012 um 10:40 Uhr

von David Wolski

Firefox 11 stellt Web-Entwicklern einige leistungsstarke Funktionen zur Verfügung. PC-WELT nahm diese Webmaster-Tools unter die Lupe.
Vergrößern Firefox 11 stellt Web-Entwicklern einige leistungsstarke Funktionen zur Verfügung. PC-WELT nahm diese Webmaster-Tools unter die Lupe.
Firefox 11 bietet für Webdesigner und Webseiten-Programmierer viele neue Funktionen und Tools, die bisher nur in Erweiterungen wie Firebug zu finden waren. Wir stellen diese Webmaster-Tools von Firefox 11 ausführlich vor.
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.
Webseiten untersuchen: Firefox baut die seit Version 10
eingeführten Funktionen für Web-Entwickler in der aktuellen Version
weiter aus.
Vergrößern Webseiten untersuchen: Firefox baut die seit Version 10 eingeführten Funktionen für Web-Entwickler in der aktuellen Version weiter aus.

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.

Dreidimensional: Die neue 3D-Visualisierung von Firefox 11
zeigt die Position von verschachtelten Elementen an. Die Funktion
steht nur bei aktiviertem WebGL zur Verfügung.
Vergrößern Dreidimensional: Die neue 3D-Visualisierung von Firefox 11 zeigt die Position von verschachtelten Elementen an. Die Funktion steht nur bei aktiviertem WebGL zur Verfügung.

Verschachtelte Elemente: 3D sorgt für Übersicht

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.

Ein weiteres Beispiel für die 3D-Visualisierung der
HTML-Struktur mit Hilfe der Webmaster-Tools von Firefox
11
Vergrößern Ein weiteres Beispiel für die 3D-Visualisierung der HTML-Struktur mit Hilfe der Webmaster-Tools von Firefox 11

 

Montag den 26.03.2012 um 10:40 Uhr

von David Wolski

Kommentieren Kommentare zu diesem Artikel (0)
1404448