Firefox Add-ons für besseres Webdesign

Firefox Plugins
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.

« Fucamp – ein Barcamp im Schwarzwald     WordPress und das PHP Memory Limit »

10 Kommentare

  1. Gravatar von Paul   Paul
      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?

  2. Gravatar von Moritz Gießmann   Moritz Gießmann
      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.

  3. Gravatar von Paul   Paul
      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.

  4. Gravatar von Moritz Gießmann   Moritz Gießmann
      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.

  5. Gravatar von Mario H.   Mario H.
      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…

  6. Gravatar von Moritz Gießmann   Moritz Gießmann
      schrieb am 2. Juni 2009

    Zum Abmessen eignet sich auch das Design Bookmarklet hervorragend.

  7. Gravatar von Webstandard-Team (Heiko)   Webstandard-Team (Heiko)
      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)

  8. Gravatar von Moritz Gießmann   Moritz Gießmann
      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.

  9. Gravatar von Max   Max
      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.

  10. […] Firefox Add-ons für besseres Webdesign […]

Some rights reserved 2005-2017  Moritz Gießmann
Die Inhalte (Texte / Fotos) des Weblogs werden, sofern nicht anders angegeben, unter der Creative Commons Lizenz veröffentlicht.
http://www.dead-pixel.de läuft mit WordPress