Firefox Add-ons für besseres Webdesign
Kommentare(10) 
Der momentan und völlig zurecht beliebte Browser Firefox kann, wenn man die richtigen Plugins hat, ein sehr hilfreiches Werkzeug in Sachen Webdesign sein. Im weiteren werde ich hier nun einige Add-ons für den Firefox Browser vorstellen, die einem die Arbeit an Webseiten um einiges erleichtern kann.
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.
schrieb am 28. Mai 2009
Quick Java braucht man aber nicht, wenn man die Web Developers Toolbar installiert hat. Dort lässt sich ja unter dem Punkt „Deaktivieren“ auch Java und JS ausschalten. Und in den Browser-Einstellungen sowieso :)
Das fabelhafte Colorzilla funktionierte auf meinem Ubuntu 8.04 leider nicht. Mit welcher Version benutzt du es?
schrieb am 28. Mai 2009
Quickjava ist eben der schnellste Weg. Mit einem Klick kann ich es aktivieren, oder deaktivieren.
Auf Ubuntu 8.04 ging Colorzilla reibungslos. Mittlerweile hab ich 9.04 und es tut seinen Dienst ohne Probleme.
schrieb am 28. Mai 2009
Dann muss ich das noch einmal probieren.
Was ich immer suche ist eine Möglichkeit, per AddOn die Firebug-Änderungen direkt ins CSS zu schreiben und so einen Live-Editor zu haben.
schrieb am 29. Mai 2009
Hmm… also es gibt die böse und unsaubere Variante, den kompletten Firebug CSS-Code zu nehmen. Kann ich aber nicht empfehlen, weil Firebug einiges umschreibt und hinzufügt. Wenn du Live editieren und speichern willst, geht das auch mit der Webdeveloper Toolbar -> edit css. Die Datei kann dann auch gespeichert werden.
schrieb am 1. Juni 2009
Ich finde MeasureIt auch sehr praktisch. Damit kann man im Browserfenster abmessen. Ist manchmal ganz praktisch, wenn man prüfen will, ob die Abstände auch passen…
schrieb am 2. Juni 2009
Zum Abmessen eignet sich auch das Design Bookmarklet hervorragend.
schrieb am 4. Juni 2009
@Mario H. & Moritz: Zum Abmessen gibt es in der Webdeveloper-Toolbar unter „Miscellaneous“ auch den Punkt „Ruler“, womit das selbe Prinzip bedient wird und ihr spart Euch eine Extension, denn leider macht eine umfangreiche Auswahl an Extensions den Browser auch nicht gerade schneller ;o)
schrieb am 4. Juni 2009
Da geb ich dir allerdings recht.Teilweise aktiviere ich manche auch nur wenn ich sie brauche (Dust-me). Den Ruler hatte ich garnicht mehr auf der Rechnung.
schrieb am 4. Juli 2009
Vielen Dank für die Zusammenstellung. Bisher kannte ich nur Firebug. Werde gleich aber mal die anderen ausprobieren. Vor allem die Webdeveloper tönt ganz interessant.
schrieb am 24. November 2014
[…] Firefox Add-ons für besseres Webdesign […]