Der Funktionsumfang vom Firefox lässt sich durch Erweiterungen noch weiter vergrößern. Gerade für Webentwickler gibt es einige Erweiterungen mit sehr nützlichen Funktionen. Einige geben einem mehr Kontrolle über das Verhalten des Browsers, andere fügen nützliche Werkzeuge wie Lineale oder Farbpipetten zur Benutzeroberfläche des Browsers hinzu. Andere helfen einem bei der JavaScript- oder PHP-Programmierung, oder sie analysieren die Webseite und machen beispielsweise Vorschläge wie man die Geschwindigkeit der Seite verbessern kann.

Web Developer Toolbar

Die Web Developer Toolbar gibt einem mehr Kontrolle über Cookies, CSS, HTML-Elemente sowie Skripte und deren Ausführung. Über die Toolbar lassen sich außerdem viele hilfreiche Informationen über diverse Elemente, Objekte und Eigenschaften anzeigen. Hilfslinien und Lineale helfen einem beim Anordnen von Elementen.

HTML, CSS, Feeds, Links und andere Teile des Quelltextes einer Webseite können mit ein paar Klicks auf ihre Validität überprüft werden. Das Browserfenster lässt sich bestimmte Größen wie z.B. 800×600 verkleinern/vergrößern um die Webseite auch in anderen gängigen  Auflösungen zu überprüfen. Veraltete Elemente oder fehlerhafte Bilder lassen sich besonders hervorheben.

Zur Erweiterung
Webseite der Web Developer Toolbar

Firebug

Firebug ist wohl die umfangreichste Firefox-Erweiterung für Entwickler. HTML, CSS, JavaScript – für fast alles bringt Firebug die notwendigen Werkzeuge mit. Sogar der Ladevorgang von Webseiten lässt sich mit Firebug analysieren.

Der HTML-Quelltext der Seite wird übersichtlich dargestellt, man kann ihn sogar bearbeiten und sieht die Auswirkungen live im Browserfenster. Man muss auch nicht lange nach Elementen suchen, man rechtsklickt einfach im Browserfenster auf ein Element und wählt Element untersuchen aus, schon springt Firebug zur entsprechenden Stelle im Quelltext.

Selbiges gilt für CSS-Quelltexte, auch diese lassen sich durchsuchen und bearbeiten, die Änderungen kann man dann im Browserfenster sofort sehen. Für Farben und Bilder gibt es im Quelltext-Editor eine integrierte Vorschaufunktion, eine Auto-Vervollständigung erleichtert zusätzlich das Bearbeiten des Quelltextes.

Außerdem hebt Firebug im Browserfenster Außen- und Innenabstände sowie Rahmen farblich hervor, ein Layout-Reiter zeigt einem zusätzlich noch einmal die genauen Werte der Abstände an, auch diese können natürlich live bearbeitet werden.

Die Seite lädt langsam? Firebug verrät einem warum. Im Netzwerk-Reiter der Firebug-Erweiterung wird der gesamte Ladevorgang der Seite dargestellt. Für jede einzelne Datei die geladen wird, wird angezeigt wann der Ladevorgang beginnt, und wie lange es gedauert hat die Datei zu laden. Dabei unterscheidet Firebug auch zwischen Daten die aus dem Zwischenspeicher (Cache) geladen werden, und solchen die vom Webserver abgefragt werden müssen. Auch AJAX-Anfragen werden hier angezeigt.

Auch für JavaScript-Programmierer gibt es einige nützliche Funktionen. So kann man zum Beispiel Stellen im Quelltext festlegen, an der die Ausführung angehalten und die Werte aller Variablen angezeigt werden sollen. Es ist auch möglich den Quelltext Zeile für Zeile auszuführen, wobei man sehr gut beobachten kann wie sich die Werte von Variablen verändern. Es ist sogar möglich zu messen welche Funktionen wie lange ausgeführt werden, das ist sehr hilfreich wenn man seine Skripte optimieren möchte bzw. wenn diese zu langsam sind.

Und das ist noch lange nicht alles was Firebug kann!

Zur Erweiterung
Webseite von Firebug

Dust-Me Selectors

Manchmal fügt man neue CSS-Selektoren hinzu, die andere ersetzen, vergisst aber die alten Selektoren zu entfernen, dabei wächst der Quelltext immer weiter, obwohl viele Selektoren gar nicht mehr benötigt werden würden. Diese Erweiterung findet unbenutzte CSS-Selektoren, und hilft einem dabei seine CSS-Dateien klein zu halten.

Artikel über Dust-Me Selectors
Zur Erweiterung
Webseite von Dust-Me Selectors

ColorZilla

Mit ColorZilla lassen sich alle Farben einer Webseite auslesen und in einer Palette darstellen, außerdem bietet die Erweiterung eine Farbpipette wie man sie aus Bildbearbeitungsprogrammen kennt, damit lassen sich die Farben jedes Pixels einer Webseite bestimmen. Hat man eine Farbe ausgewählt, kann man diese auch mit einem Klick gleich in die Zwischenablage kopieren, wobei einem auch noch mehrere Formate (#RRGGBB, rgb(…), etc.) zur Verfügung stehen. Auch eine Zoom-Funktion, mit der man die Webseite um bis zu 1000% vergrößert ansehen kann, bringt die Erweiterung mit.

Zur Erweiterung
Webseite von ColorZilla

Screengrab

Screengrab ist eine Erweiterung die es einem ermöglicht Bilder von einer Webseite zu machen. Dabei kann man entweder den gesamten sichtbaren Bereich, einen ausgewählten Bereich, den gesamten Fensterinhalt oder ein Bild der kompletten Seite erstellen. Grade letztere Funktion ist sehr praktisch, denn normalerweise müsste man ein Bild machen, dann weiter runterscrollen, wieder ein Bild machen, etc. und die Bilder am Ende zusammenfügen. Screengrab erspart einem diese Arbeit.

Zur Erweiterung
Webseite von Screengrab

MeasureIt

MeasureIt erlaubt es einem, überall auf einer Webseite ein Lineal anzuzeigen, mit dem man Abstände und Größen in Pixeln messen kann. Das ist sehr praktisch, wenn man überprüfen möchte, ob ein Element auch die gewünschte Höhe oder Breite einnimmt.

Zur Erweiterung
Webseite von MeasureIt

FirePHP

Mit FirePHP kann man in PHP Fehlermeldungen, Log-Meldungen, Variablen, Ausnahmen etc. ausgeben, und diese werden dann direkt an die Konsole von Firebug gesendet. Das ist gerade bei der Entwicklung von AJAX-Anwendungen sehr praktisch, da man so Informationen über den Programmablauf erhält ohne dabei die AJAX-Antworten mit irgendwelchen var_dump()-Aufrufen o.Ä. zu zerstören. Um FirePHP zu benutzen werden Firebug und eine kleine PHP-Bibliothek benötigt, die die Funktionen und Klassen zur Ausgabe von Meldungen/Informationen enthält.

Zur Erweiterung
Webseite von FirePHP
Anleitung zur Benutzung von FirePHP (Englisch)

YSlow

YSlow ist eine von Yahoo entwickelte Erweiterung, die eine Webseite analysiert, und anschließend Vorschläge macht, wie man die Geschwindigkeit der Webseite optimieren kann. CSS, Bilder, Cookies, die Auslieferung von Inhalten, der Server, JavaScript – alles wird von YSlow analysiert. Zusätzlich zu den Ergebnissen der Analyse werden dann auch noch Hinweise darauf gegeben was man tun muss um die Seite schneller zu machen. Bei der Analyse hat man die Wahl zwischen verschiedenen vorgegebenen Regeln (je nachdem um was für eine Seite es sich handelt) nach denen YSlow die Seite analysiert, wobei man auch eigene Regeln hinzufügen kann. Außerdem ist es möglich zu überprüfen ob Bilder optimiert werden können oder zum Beispiel fehlerhafte JavaScript-Quelltexte eingebunden werden.

Für YSlow wird ebenfalls Firebug vorausgesetzt.

Zur Erweiterung
Webseite von YSlow

• Unbenutzte CSS-Selektoren finden mit Dust-Me Selectors
• Der Alternative PHP Cache