26.03.2012, 10:40

David Wolski

Website-Entwicklung

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

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.
 
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.

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.
 
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.
Lesen Sie auf der nächsten Seite:
Vorherige Seite
Seite 1 von 2
Diskutieren Sie mit anderen Lesern über dieses Thema:
PC-WELT Hacks
PC-WELT Hacks Logo
Technik zum Selbermachen

3D-Drucker selbst bauen, nützliche Life-Hacks für den PC-Alltag und exotische Projekte rund um den Raspberry Pi. mehr

- Anzeige -
PC-WELT Specials
Angebote für PC-WELT-Leser
PC-WELT Onlinevideothek

PC-WELT Online-Videothek
Keine Abogebühren oder unnötige Vertragsbindungen. Filme und Games bequem von zu Hause aus leihen.

Tarifrechner
Der PC-WELT Preisvergleich für DSL, Strom und Gas. Hier können Sie Tarife vergleichen und bequem viel Geld sparen.

PC-WELT Sparberater
Das Addon unterstützt Sie beim Geld sparen, indem es die besten Angebote automatisch während des Surfens sucht.

Telekom Browser 7.0

Telekom Browser 7.0
Jetzt die aktuelle Version 7 mit neuem Design und optimierter Benutzerführung herunterladen!

- Anzeige -
Marktplatz
Amazon

Amazon Preishits
jetzt die Schnäpchen bei den Elektronikartikel ansehen! > mehr

UseNext

10 Jahre UseNeXT
Jetzt zur Geburtstagsaktion anmelden und 100 GB abstauben! > mehr

1404448
Content Management by InterRed