Auf der Weltkarte der beliebtesten Internet-Browser ist Mozilla Firefox mit einem Marktanteil von fast 40% der mit Abstand beliebteste Browser in Deutschland und verweist seine Konkurrenten wie den Internet Explorer, Safari oder Chrome auf die Plätze. Der freie WebBrowser ist aber nicht nur bei Endanwendern hoch im Kurs, sondern besitzt auch in der Entwicklergemeinde einen hervorragenden Ruf. Ein entscheidender Faktor dafür ist sicherlich die Tatsache, dass Firefox von Anfang an Schnittstellen für eine Vielzahl von Erweiterungsmöglichkeiten zu bieten hat.
Im Folgenden möchte ich die wichtigsten Add-ons vorstellen, mit denen Webentwickler Mozilla Firefox individuell an ihre Bedürfnisse anpassen können.
Web Developer Toolbar –ein Must-have
Ein Firefox-Add-on, das jeder Webdesigner haben sollte, ist die Web Developer Toolbar. Nach der Installation erscheint eine relativ unscheinbare Symbolleiste, die es in puncto Funktionen allerdings mächtig in sich hat. Hier ein kleiner Überblick über die wichtigsten Funktionen:
Deaktivieren
Besonders lästig bei Website-Überarbeitungen ist das manuelle Leeren des Cache, das häufig dann erforderlich wird, wenn die Änderungen, die man gerade vorgenommen hat, sichtbar werden sollen. Mit der Web Developer Toolbar kann man den Cache sehr komfortabel einfach deaktivieren oder man wählt eine Einstellung, bei der der Browser selbstständig prüft, ob neue Seitenversionen verfügbar sind.
Unter dem Menüpunkt „Deaktivieren“ findet man noch viele weitere nützliche Funktionen, wie zum Beispiel: Java, Java Script, Seitenfarben, Weiterleitungen, Proxies etc, die sich mit diesem Tool je nach Bedarf aktivieren und deaktivieren lassen.
CSS-Stile, Bilder und Formulare
Einfach mal die Webseite mit den Augen von Google sehen: mit der Web Developer Toolbar ist auch das kein Problem. Mit einem Klick lassen sich alle Stile deaktivieren und man erhält eine linearisierte Darstellung der Seite. Natürlich kann man sich auch CSS-Stile anzeigen lassen und direkt bearbeiten oder externe CSS-Stilvorlagen auf die im Browser angezeigte Seite anwenden, um zum Beispiel Designvariationen praktisch zu testen. Genauso einfach ist es, mit der Toolbar detaillierte Informationen zu grafischen Elementen zu bekommen: ob Abmessung, Dateigröße, Pfandangabe, Alt-Tag uvm. Zur besseren Übersicht über den Content lassen sich grafische Elemente auch gesondert markieren oder ganz ausblenden. Mehr Übersichtlichkeit bei Formularfeldern ermöglichen die Formular-Funktionen. Über diese kann man sich praktisch alle wichtigen Angaben zu den Formularfeldern der aktuell aufgerufenen Seite anzeigen lassen. So zum Beispiel auch Formularfelder einer Webseite, die mit einem WebBuilder, wie dem Homepage-Baukasten von Host Europe erstellt wurde.
Cookie-Management
Ein weiterer Vorteil ist das komfortable Cookie-Management der Web Developer Toolbar. Verschiedene Cookie-Typen lassen sich hinzufügen, deaktivieren oder löschen. Zusätzlich kann man sich Informationen zu Cookies anzeigen lassen.
SEO-Optionen und Website-Validierung
Zu den wichtigsten Funktionen des Web Developer Tools gehören sicherlich die Kontrollmöglichkeiten zum Beispiel von Alt-Tags und Meta Descriptions sowie die Werkzeuge zur Website-Validierung, über die sich beispielsweise HTML, CSS, Links aber auch ganze Seiten überprüfen lassen.
Das Web Developer Tool bietet darüber hinaus noch viele weitere äußerst hilfreiche Features. Es lohnt sich, einfach mal selbst zu testen, was dieses Tool leisten kann.
HTML Validator – alle Fehler auf einen Blick
Insbesondere für die browserbasierte Validierung von Websites gibt es eine sehr kleine, aber ungemein praktische Ergänzung zur Web Developer Toolbar: den HTML Validator. HTML Validator ist zum einen ein ausgezeichnetes Instrument zur Quelltextprüfung und gleichzeitig ein vollwertiger Editor, mit dem sich fehlerhafte Passagen im Quelltext direkt korrigieren lassen. HTML Validator ist auch als kostenlose Lite-Version erhältlich.
Performanceanalysen mit FirebugÂ
Auf den ersten Blick bietet das Add-on Firebug eine ganze Reihe von Funktionen zur Fehlersuche und zum Monitoring einer Website, die wir bereits von der Web Developer Toolbar bereits kennen. Warum also noch ein weiteres Tool? Ganz einfach. Die große Stärke von Firebug sind Performanceanalysen für die man allerdings die Erweiterung YSlow benötigt.
Gezielt Schwachstellen aufdecken und optimieren – mit YSlow
Die ganze Leistungsfähigkeit von Firebug entfaltet sich mit dem Add-on YSlow. Der Name sagt es: Dieses Tool setzt in puncto Performance-Analyse noch „einen drauf“. Mit YSlow kann man sich nicht nur einen Performance-Index für die jeweilige Website anzeigen lassen, sondern auch detaillierte Performance-Analysen zu speziellen Bereichen durchführen. So kann man mit YSlow zum Beispiel den Content, die Scripte und sogar Server-Einstellungen getrennt voneinander unter die Lupe nehmen und die Wirkung von Verbesserungsmöglichkeiten direkt testen. Ein unverzichtbares Hilfsmittel, wenn man die Performance von Webseiten optimieren will.
Warum sind Performance-Analysen so wichtig? Ganz einfach: kurze Ladezeiten sind einer der wesentlichen Faktoren für die Zufriedenheit von Website-Usern. Die Rechnung ist ganz einfach: Je länger eine Seite lädt, desto mehr User springen ab.
Fazit
Das sind sie also: die vier wichtigsten Firefox-Add-ons für Webdesigner. Sie bieten jedem Webdesigner ein praktisches Rundum-Paket, um Webseiten komfortabler analysieren und optimieren zu können. Und das Beste: Man kann viel Geld sparen, denn alle diese Tools sind kostenlos bzw. als Lite-Version erhältlich. Ein Grund mehr, um erst einmal diese Firefox-Add-ons zu testen, bevor man sich für kostenpflichtige Softwarelösungen entscheidet.
Ãœber den Autor:
Wolf-Dieter Fiege ist Redakteur und Autor des Blog & SEO-Teams von www.hosteurope.de, ein begeisterter Firefox-Nutzer und leidenschaftlicher Fan von Open Source-Anwendungen.
Bildnachweis: Fotolia, Lizenz: Host Europe