Originalartikel vom 24. März 2008, Update am 28. Mai 2009

Webdeveloper Toolbar

Die Webdeveloper Toolbar ist die Allzweckwaffe unter den Firefox Add-ons. Die Toolbar nistet sich unterhalb der Lesezeichen-Symbolleiste ein und kann mittels Symbol in der Navigationsleiste ein- und ausgeblendet werden. Mit ihrer Hilfe kann man beispielsweise bestimmte Elemente der Webseite ausblenden, sie umranden lassen, sich den Quelltext anzeigen lassen, oder sich Informationen zu einzelnen Seitenelementen anzeigen lassen. Die Möglichkeiten der Toolbar sind so weitreichend, dass alle hier aufzuzählen den Rahmen sprengen würde.

Html Validator

Der Html Validator ist ein Tool, dass in der Statusleiste ganz unten rechts die Fehler und Warnungen zum Quelltext der Seite anzeigt. Klickt man doppelt auf die Anzeige öffnet sich ein neues Fenster in dem der Quelltext und eventuelle Fehler in der Validierung angezeigt werden. Mit einem Klick auf den jeweiligen Fehler gelangt man im Quelltext direkt zur fehlerhaften Stelle und es wird eine Erklärung des Fehlers angezeigt.
Funktioniert leider nicht unter Ubuntu 8 Bereinigte Ubuntu Version von Html Validator

Colorzilla

Colorzilla ist ein kleines Add-on welches einem, von der Statusleiste ausgewählt, die Möglichkeit gibt von jedem beliebigen Element der gerade besuchten Website die Farbe zu bestimmen und den zugehörigen Farbcode als Hexadezimal- oder RGB-Code anzeigen zu lassen.

Dust-me selectors

Dust-me selectors hilft einem dabei nicht mehr verwendete CSS-Klassen und ids zu finden um sie aus dem CSS-Code entfernen zu können. Das Tool setzt sich in der Statusleiste fest, von wo aus man es starten kann um durch die Webseiten zu navigieren, die durchsucht werden sollen. Die ungenutzten CSS Bestandteile werden abschließend in einem extra Fenster angezeigt.

Quick Java

Das Add-on Quick Java lässt einen auf Mausklick Java und Javascript ein und ausschalten. Das ist sehr praktisch, wenn man die Funktionalität einer Seite ohne Javascript, oder Java testen möchte um keine Nutzer auszuschließen, die es deaktiviert haben.

Firebug

Das mächtigste der hier vorgestellten Tools ist Firebug. Nach der Installation nistet es sich in der Statusleiste, in Form eines kleinen Käfers, ein und kann auf Klick aktiviert werden. Mit Firebug ist es unter anderem möglich, einzelne HTML Elemente und die darauf wirkenden CSS Regeln zu erkennen, zu ändern und JavaScript zu debuggen. Die Möglichkeiten sind hierbei so zahlreich, dass sie hier den Rahmen sprengen würden. Die große Besonderheit von Firebug ist, dass es selbst auch noch erweiterbar ist.

Pixel perfect

Eine der Erweiterungen für Firebug ist Pixel perfect. Das Add-on macht es möglich, den grafischen Entwurf einer Website halbtransparent über den Viewport des Browserfensters zu legen. An diesem Overlay können anschließend die Elemente der Website pixelgenau nach Vorlage ausgerichtet werden.

YSlow

YSlow, ebenfalls eine Erweiterung für Firebug, analysiert die Performance von Websites und deckt eventuelle Bremsen auf. Es zählt HTTP-Requests, analysiert Dateigrößen und benotet anschließend die Performance der Seite. Seit der neuesten Version ist auch das Bildoptimierungstool Smush.it enthalten, das die Dateigröße von Bildern unter Umständen drastisch verringern kann.

Firediff

Firediff merkt sich Änderungen, die mit Firebug am Code vorgenommen wurden und zeigt diese auf Wunsch an. Das ist vor allem dann praktisch, wenn man Firebug nicht nur zur Überprüfung des Codes, sondern auch zur Entwicklung einsetzt und die Änderungen in den Originalcode übernehmen will.

Das unvermeidliche Fazit

Wie eingangs erwähnt kann Firefox zum mächtigen Entwicklertool werden. Man muss allerdings aufpassen es nicht zu überladen, da mit jedem Add-on die Performance des Browsers beeinträchtigt wird.

• Webdesign mit Linux – Software für Webworker (7)
• Wordpress Plugin Tweetbacks 1.4.4 verursacht Performance Probleme (1)
• Wollt ihr ein Redesign im Entstehen beobachten? (10)
• Webseiten in allen Browsern testen (4)

Ein Bookmarklet ist ein kleines in JavaScript geschriebenes Makro, das als Bookmark abgespeichert wird und dadurch die Funktionen des Browsers erweitert.

^Wikipedia

• Firefox Add-ons für besseres Webdesign (9)
• Rückblick: Designcamp Köln 2009 (1)
• Designcamp in Köln (24. – 25.01.2009) (1)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)

• MySpace – Forum (1)
• Firefox Add-ons für besseres Webdesign (9)
• Das MySpace Profil 2.0 (2)
• Hilfe beim positionieren von Website Elementen (0)