Sie sind auf Seite 1von 5

Website-Entwicklung - Firefox 11: Tools fr Web-Entwickler im Test - Online-Tool...

Seite 1 von 5

Website-Entwicklung

Firefox 11: Tools fr Web-Entwickler im Test


Autor: David Wolski 26.03.2012, 10:40

Firefox 11 stellt Web-Entwicklern einige leistungsstarke Funktionen zur Verfgung. PC-WELT nahm diese Webmaster-Tools unter die Lupe.

Firefox 11 bietet fr 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 ausfhrlich vor.
Mit seinen ntzlichen Erweiterungen und der soliden HTML-Engine war Firefox [http://www.pcwelt.de/downloads/Firefox-3402037.html] immer schon einer der Lieblingsbrowser von Webentwicklern. Erst mit den letzten Chrome-Versionen [http://www.pcwelt.de/downloads/Google-Chrome-1128993.html] hat Firefox hier Marktanteile an den Konkurrenten von Google abgeben mssen. 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 [http://www.pcwelt.de/ratgeber/Webmaster-Toolsfuer-Webseiten-Erstellung-4710628.html] und Firebug [http://www.pcwelt.de/ratgeber/FirebugWebseiten-untersuchen-mit-Firefox-Addon-46127.html] nachgerstet wurden, sind direkt in den Browser gewandert. Bereits Firefox 10 schenkte den Bedrfnissen von Entwicklern mehr Aufmerksamkeit und ergnzt 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 fr HTML, CSS, Javascript und Web-Apps [http://www.pcwelt.de/ratgeber/Webmaster-Tools-fuer-Webseiten-Erstellung-4710628.html]

http://www.pcwelt.de/ratgeber/Neu-in-Firefox-11-Firefox-11-fuer-Web-Entwickler-5...

26.03.2012

Website-Entwicklung - Firefox 11: Tools fr Web-Entwickler im Test - Online-Tool... Seite 2 von 5

Webseiten untersuchen: Firefox baut die seit Version 10 eingefhrten Funktionen fr Web-Entwickler in der aktuellen Version weiter aus.

HTML-Struktur von Webseiten untersuchen Alle Funktionen fr 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 Verfgung 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 gewnschte Element. Eine weitere Mglichkeit, 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 whlen Sie dann Element untersuchen. Firefox setzt dann den Fokus gleich auf das ausgewhlte Element und zeigt dessen Klasse, ID und Position in der DOMStruktur der Webseite an. Wenn Sie jetzt in der unteren Leiste die Schaltflche "HTML" anklicken, sehen Sie den ausgewhlten Abschnitt im HTML-Quelltext. Der Clou ist aber die Analyse der Stylesheets: Die Schaltflche "Style" zeigt alle definierten CSS-Stile der Webseite an, die sich auf das gerade ausgewhlte 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 Verfgung.

Verschachtelte Elemente: 3D sorgt fr bersicht


Eine spannende, neue Funktion von Firefox 11 ist die 3D-Visualisierung der HTML-Struktur. Hierzu bietet die Leiste "Untersuchen" neben den Schaltflchen "HTML" und "Style" noch den Button "3D". Ein Klick darauf zeigt eine dreidimensionale Darstellung der Webseite, die exakt das

http://www.pcwelt.de/ratgeber/Neu-in-Firefox-11-Firefox-11-fuer-Web-Entwickler-5...

26.03.2012

Website-Entwicklung - Firefox 11: Tools fr Web-Entwickler im Test - Online-Tool... Seite 3 von 5

Verhltnis 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 unbersichtlich gepackt sind. Diese Visualisierung zeigt aber bereits, wohin die Reise der Entwickler-Tools von Firefox in Zukunft gehen knnte. Webmaster-Tools fr Suchmaschinen-Optimierung und Traffic-Analyse [http://www.pcwelt.de/ratgeber/Webmaster-Tools-zur-SEO-Optimierung-und-TrafficAnalyse-4710952.html] Zudem funktioniert 3D in Firefox nur, wenn der PC ber einen geeigneten Grafikchip verfgt. Und Firefox ist hier recht whlerisch. Whrend es mit Nvidia-Chips und ATI/AMD wenig Probleme gibt, arbeitet der Browser mit Intel-Chipstzen nur eingeschrnkt zusammen. Auch Optimus-Chipstze von aktuellen Notebooks finden in Firefox noch keine umfassende Untersttzung. Wer einen Chipsatz dieser Kategorie besitzt, hat Pech und muss auf die 3DFhigkeiten von Firefox 11 verzichten. Experimentierfreudige Anwender knnen 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-Untersttzung funktioniert, zeigt sich dann nach einem Neustart des Browsers.

Web-Konsole zeigt den Ladevorgang


Um zu sehen, wie der Browser eine Webseite ldt und schlielich rendert, bietet der Punkt Extras, Web-Konsole ein Logbuch, das an die Erweiterung Firebug [http://www.pcwelt.de/ratgeber/Firebug-Webseiten-untersuchen-mit-Firefox-Addon-46127.html] erinnert. Die Konsole ffnet eine neue Leiste mit einem Debugger im oberen Bereich des Browser -Fensters. Firebug: Webseiten untersuchen mit Firefox-Addon [http://www.pcwelt.de/ratgeber/Firebug -Webseiten-untersuchen-mit-Firefox-Addon-46127.html] Hier zeigt der Browser beim Laden einer Seite allgemeine Meldungen zu Netzwerk, CSS-Fehler und Javascript-Fehler an. ber die Schaltflchen knnen Sie die gewnschten Infos filtern und Kategorien ausblenden. Die Konsole bietet ein weiteres ntzliches, verstecktes Feature: Wenn die Meldungen der Kategorie Netz aktiviert sind, knnen Sie im Logbuch die ausgefhrten Anfragen des HTTP-Protokolls wie GET und POST anklicken und bekommen eine komplette bersicht der Serverantwort mitsamt den HTTP-Headern. Die Antwortzeiten zeigt Firefox hier in den eckigen Klammern an - ein Hinweis auf die Performance des Webservers und der Ladegeschwindigkeit der Webseite. Auch knnen Sie hier sofort sehen, wenn der Browser Ressourcen wie Bilder oder CSS-Dateien nicht findet.

Variablen aus Javascript anzeigen: ber das Objekt window.console.log(); knnen Sie aus Javascript Variablen an die Web-Konsole schicken.

http://www.pcwelt.de/ratgeber/Neu-in-Firefox-11-Firefox-11-fuer-Web-Entwickler-5...

26.03.2012

Website-Entwicklung - Firefox 11: Tools fr Web-Entwickler im Test - Online-Tool... Seite 4 von 5

Neues fr Javascript-Entwickler Um Javascript direkt an den Browser zu bergeben, bietet Firefox Scratchpad, das in der deutschsprachigen Version von Firefox den etwas unglcklichen Namen Notizblock bekommen hat. Tatschlich eignet sich diese Funktion nicht fr Notizen, sondern stellt einen Editor bereit, um Javascript ohne nderung auf der Webseite im Browser zu testen und um Session-Variablen anzuzeigen. An allgemeine Javascript-Variablen kommen Sie ber den Notizblock zwar nicht heran. Fr diesen Zweck bietet Firefox 11 aber eine praktische Schnittstelle in der WebKonsole. Die Konsole reagiert auf spezielle Log-Variablen, die Sie zum Debuggen im Javascript einer Webseite unterbringen knnen. Dazu ein Beispiel: Um in einem Javascript die Variable myvar im Auge zu behalten und ber die Web-Konsole von Firefox auszugeben, fgen Sie im Script einfach an der gewnschten Stelle das Statement window.console.log(Meine Variable:+myvar); ein. Firefox zeigt dann in der Web-Konsole den Inhalt der Variablen an und erspart damit den mhsamen Weg ber Alert-Meldungen. Dies ist zwar noch kein Ersatz fr einen ausgewachsenen Javascript-Debugger, reicht aber fr viele Aufgaben bereits vollkommen aus.

Stilvolle Analyse: Der Menpunkt Untersuchen zeigt auf Wunsch ber die Schaltflche Styles die berechneten CSS-Eigenschaften des ausgewhlten Elements an.

Neu bei Firefox 11: CSS live bearbeiten


Fr nachtrgliche Anpassungen einer Webseite und der Fehlerbehebung im CSS-Code bietet Firefox 11 einen integrierten CSS-Editor, um die Stylesheets einer Webseite live zu bearbeiten. Die Funktion rufen Sie stattdessen mit der Tastenkombination Umschalt-F7 auf, um ein EditorFenster zu ffnen. Das Fenster zeigt links die geladenen Stylesheets der Webseite und lsst Sie rechts die Stile direkt bearbeiten. Der Browser zeigt die nderungen auf der Seite sofort an, was besonders bei CSS-Experimenten hilfreich ist, um die Auswirkungen geplanter nderungen sofort im Browser zu sehen.

nderungen im CSS sofort sehen: Mit der Stil-Bearbeitung bringt Firefox 11 einen Editor fr Stylesheets mit und zeigt die Auswirkungen der vorgenommenen nderungen sofort im Browser-Fenster an.

http://www.pcwelt.de/ratgeber/Neu-in-Firefox-11-Firefox-11-fuer-Web-Entwickler-5...

26.03.2012

Website-Entwicklung - Firefox 11: Tools fr Web-Entwickler im Test - Online-Tool... Seite 5 von 5

Fazit: Firefox ist auf dem Weg, aber noch nicht angekommen
Aus der Sicht von Web-Entwicklern hat Firefox seit der Version 10 wieder deutlich zur Konkurrenz aufgeholt und bietet nun mit seinen Entwickler-Tools der Version 11 einen hnlichen Funktionsumfang wie Google Chrome. Der integrierte Werkzeugkasten macht aber zustzliche Erweiterungen wie Web Developer [http://www.pcwelt.de/ratgeber/Webmaster-Tools-fuerWebseiten-Erstellung-4710628.html] noch nicht arbeitslos, denn dazu fehlen einfach noch zu viele Funktionen, die Web-Entwickler bei der tglichen Arbeit brauchen. So vermissen wir in der Funktion Untersuchen die Angabe von Position, Dimension, Padding und Margin des ausgewhlten Elements. Um den verbreiteten Erweiterungen mit Kult-Status [http://www.pcwelt.de/ratgeber/Webmaster-Tools-fuer-Webseiten-Erstellung-4710628.html] ernsthaft Konkurrenz zu machen, muss Firefox hier noch nachlegen. So ganz scheint der Browser seinen eigenen Fhigkeiten auch noch nicht zu trauen: So fhrt der Menpunkt Extras, WebEntwickler, Weitere Tools laden ins Erweiterungs-Verzeichnis mit den bekannten Add-Ons.

2012 - IDG Tech Media GmbH - alle Rechte vorbehalten

1404448
Content Management by I n t e r R e d

http://www.pcwelt.de/ratgeber/Neu-in-Firefox-11-Firefox-11-fuer-Web-Entwickler-5...

26.03.2012