Trotz des Siegeszuges von Googles Chrome Browser ist Firefox für mich noch immer der geeignetste Browser für die Webentwicklung.
Hier stelle ich Euch 10 Erweiterungen bzw. Add-ons für den Firefox vor, mit denen ihr effektiv Webdesign betreiben könnt.
Die Reihenfolge ist rein zufällig gewählt.
Firebug
Eins der wohl wichtigsten Add-ons für Webentwickler ist Firebug. Diese Erweiterung ist so etwas wie ein Schweizer Taschenmesser. Mit Firebug lassen sich fast alle relevanten Inhaltselemente von Webseiten analysieren und teilweise bearbeiten. Webseiten kann man getrennt nach HTML, DOM, CSS und Skripten aufdröseln sowie die Ladeeigenschaften mittels Network visualisieren lassen. So identifiziert man beispielsweise die Traffic-Verursacher oder Ladebremsen auf der zu bearbeitenden Seite.
Firebug selbst ist durch viele Module wie zum Beispiel FirePHP oder FireRainbow erweiterbar.
Die Web Developer Tools von Chris Pederick sind das andere große Taschenmesser im Webworking mit dem Firefox. Allerdings arbeiten die WDT in einigen Bereichen etwas anders als Firebug. Vor allem in der Anzeige / Ausblendung von Seitenelementen spielen die WDT ihre Vorteile aus.
CSS Viewer
Für nur mal schnell ein paar CSS Anweisungen auf einer Webseite nachschauen, sind Firebug und die Web Developer Tools überdimensioniert. Quick & dirty kann man das mit dem CSS Viewer ebenso gut erledigen.
Es ist nervig, wenn nach einem Firefox Update eine Reihe von Plugins seinen Dienst quittiert. Wegen Inkompatibilität. Dabei geht Firefox nur davon aus, dass die Erweiterungen nicht funktionieren.
Mit den Nightly Tester Tools kann man unter anderem die Kompatibilität von Add-ons erzwingen.
Hin und wieder benötigt man einen Screenshot von der Webseite an der man gerade werkelt oder von einer Webseite, von der man sich etwas abschaut. Hier ist Fireshot die Erweiterung der Wahl. FS beherrscht alles was nötig ist: die ganze Webseite abphotographieren, nur den sichtbaren Bereich oder einen Bildschirmbereich aufnehmen. Der Screenshot kann dann in einigen Formaten abgespeichert, in die Zwischenablage kopiert, gemailt, gedruckt oder als PDF versandt werden.
Fireshot ist leider das erste Firefox Add-on, das bei mir unter Ubuntu streikt. Es lässt sich zwar installieren, aber dann findet es die benötigten Bibliotheken nicht.
Bei der Arbeit an Webseiten und auch generell beim Surfen will ich nicht von irgendwelchen Werbeblöcken abgelenkt werden. Die Erweiterung Adblock Plus filtert die Werbung aus den aufgerufenen Webseiten. Natürlich lässt sich auch festlegen, für welche Domain der Blocker gilt.
Mit dem Add-on NoScript im Einsatz merkt man überhaupt erstmal, was in eine heutige Webseite so alles an zusätzlichen Javaskripten und anderen Objekten geladen wird. Viele erfüllen sicher ihren Zweck, aber oftmals verbergen sich dahinter auch Spionagetools, Malware oder anderes, nicht so harmloses Zeug.
Die Erweiterung verbietet bei mir standardmäßig alle Skripte, bis ich sie explizit für die jeweilige Webseite freigebe (was man für jedes von NoScript erkannte Skript einzeln machen kann). NoScript merkt sich die Einstellung, so dass beim nächsten Besuch der Seite dieselbe Einstellung nicht noch einmal gemacht werden muss.
Eine Alternative ist Ghostery.
Pocket/Read it later
Die Erweiterung Pocket (ehemals Read it later) speichert Webseiten (auf denen sie beispielsweise etwas interessantes gefunden haben), um sie später zu lesen. Pocket speichert die Seiten wahlweise als Links ab oder lädt die Seiten komplett zum offline-Durcharbeiten aus dem Netz. Die Listeneinträge kann man mit Firefox-Installationen auf anderen Rechnern abgleichen, indem man sich bei Pocket registriert und somit die Synchro-Funktion nutzen kann.
Xmarks
Ähnlich Pocket/RiL arbeitet Xmarks für Firefox. Die Erweiterung synchronisiert ihre Lesezeichen/Bookmarks über das Netz. Dazu müssen Sie zusätzlich zur Plugininstallation auch einen Account bei xmarks einrichten. Vorteil: der Service ist kostenlos. Nachteil: xmarks kennt somit ihr ungefähres Surfverhalten im Netz, da xmarks nicht mehr nur den Abgleich von Lesezeichen umfasst, sondern auch ihre ganz persönliche Browserhistorie erfasst.
Die eine Hälfte beim Webdesign besteht aus Typographie, die andere Hälfte wird von der Arbeit mit Farbe belegt.
Bei der Arbeit mit Farben setze ich ColorZilla ein. Mit diesem Add-on können sie Farbwerte (in fast allen wichtigen Formaten und Notationen) aus Paletten auswählen oder per Werteingabe festlegen. Den Farbwert eines bestimmten Monitorbereiches können sie mit dem Picker ermitteln. Ganz hervorragend gelöst ist der visuelle Gradient Generator, der auch gleich den CSS Code für alle Rendering-Engines-Prefixes auswirft. Der Webpage DOM Color Analyzer erstellt eine Liste aller auf der Webseite angezeigten Farben und kennzeichnet beim Mousehover alle DOM-Elemente mit dieser Farbe durch eine rote Umrandung.
Rainbow Color Tools
Ein weiteres Werkzeug zur Arbeit mit Farben sind die Rainbow Color Tools (nicht zu verwechseln mit der Rainbow Erweiterung für Audio und Video). Der Unterschied zu ColorZilla liegt in der Verarbeitung von Farbpaletten. RCT ermittelt auf Knopfdruck zu jeder Webseite eine Palette der dort eingesetzten Hauptfarben (worauf diese Ermittlung beruht, ist mir nicht bekannt). Die Paletten lassen sich dann in RCT abspeichern oder als Hexadezimalwerte zwischenspeichern.
Fazit
Wenn Ihr diese Erweiterungen installiert habt, deckt ihr das Standardprogramm für das vernünftige und effektive Arbeiten mit Firefox schon mal ganz gut ab.
Das sind natürlich bei weitem nicht alle Erweiterungen, die für das Arbeiten am und im Web geeignet sind. Viele Entwickler werden alternative Werkzeuge benutzen oder Nischenprodukte, die genau auf ihren Aufgabenbereich zugeschnitten sind (Flasherstellung habe ich hier beispielsweise komplett ausgelassen).
Sollte ich in absehbarer Zeit weitere oder bessere Erweiterungen finden, werden diese hier im Blog vorgestellt.
