Website-Entwicklung

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

Montag, 26.03.2012 | 10:40 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

 



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.

Montag, 26.03.2012 | 10:40 von David Wolski
Kommentieren Kommentare zu diesem Artikel (0)
1404448