Trailerbild

Meine Firefox-Add-ons für Web Developer

Bei meinen TYPO3-Schulungen stelle ich den Schulungsteilnehmern den Firefox-Browser mit einigen installierten Add-ons zur Verfügung. Oft wurde ich gefragt, ob ich die Erweiterungen aufschreiben könnte. Da ich mir dachte, das die eine oder andere Erweiterung auch für andere sinnvoll sein kann, habe ich mich entschlossen, diese Liste für alle auf meiner Webseite zu erstellen.

Die Top-Ten

Platz 1: Web Developer

Web Developer Toolbar
Web Developer Toolbar

Web Developer stellt eine große Anzahl von Tools in einer Toolbar zur Verfügung, mit der das Debuggen von Webseiten zum Kinderspiel wird.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/web-developer/

Webseite:

http://chrispederick.com/work/web-developer/

Platz 2: Firebug

Firebug-Screenshot
Mit Firebug kommen Sie auch den versteckten Fehlern auf die Spur

Das Add-on Firebug ist eine ideale Ergänzung zu dem Add-on Web Developer. Firebug kann durch weitere Add-ons noch um weitere Funktionen ergänzt werden. Ein paar davon kommen befinden sich auch in meiner Top-Ten.

Mit Firebug können Sie die Webseite genau analysieren und auch testweise verändern. Die http-Requests und Ladezeiten können in einem Balkendiagramm dargestellt werden.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/firebug/

Webseite:

http://getfirebug.com/

Platz 3: HTML Validator

Firefox Add-on HTML Validator
Der HTML-Validator macht Fehler sofort sichtbar.

Schon bei der Quelltext-Darstellung mit der Tastenkombination STRG+U wird der Quelltext validiert und Fehler werden sofort ersichtlich. HTML5 wird leider noch nicht unterstützt. Trotzdem installiere ich diese Erweiterung noch immer direkt nach Firebug und „Web Developer“.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/html-validator/

Webseite:

http://users.skynet.be/mgueury/mozilla/

 

Platz 4: ColorfulTabs

Screenshot ColorfulTabs
Hilfreich bei der Arbeit mit Produktiv- und Entwicklungssystem sind unterschiedliche Farben bei den Firefox-Tabs

ColorfulTabs ermöglicht es, die Tabs des Firefox domainabhängig einzufärben. Gleiche Domains werden in gleichen Farben eingefärbt. So können zusammengehörige Webseiten schnell gefunden werden — beispielsweise TYPO3-Backend und zugehöriges Frontend.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/colorfultabs/

Webseite:

https://www.binaryturf.com/free-software/colorfultabs-for-firefox/

Platz 5: YSlow

Screenshot YSlow
Durch den optimierten Seitenaufbau beim Besucher Ihrer Website muss der Webserver weniger Traffic bewältigen.

Die meisten Entwickler schauen zwar, ob der Webserver schnell ist, aber vernachlässigen die Optimierung des Seitenaufbaus bei dem Besucher der Website. Für den schnellen Überblick kann dieses Add-on einige Test machen und zeigt an, wo etwas optimiert werden kann - z.B. Richtige Reihenfolge der CSS- und Javascript-Einbindung, CDN, Anzahl der HTTP-Requests, Expire-Header, ETags, usw.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/yslow/

Webseite:

http://developer.yahoo.com/yslow/

Buch-Empfehlung:

Die Entwickler des Add-ons haben auch ein Buch zum Thema herausgebracht. Die deutsche Übersetzung können Sie hier bestellen:

High Performance Websites

Platz 6: ColorZilla

Screenshot ColorZilla
ColorZilla bietet neben der Pipette auch noch ColorPicker und eine Farbpalettenansicht sowie einen Link zu einem CSS3-Verlaufs-Generator.

Colorpicker und Farbpalette sparen so manchen Screenshot und Import nach Photoshop. Farben können direkt auf der Webseite ausgelesen werden und in verschiedenen Schreibweisen in die Zwischenablage kopiert werden.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/colorzilla/

Webseite:

http://www.colorzilla.com/

Platz 7: ShowIP

Screenshot showIP
Mit ShowIP müssen Sie kein "ping domain.tld" mehr machen, um die IP des Servers herauszubekommen.

ShowIP zeigt in der Statusleiste die IP des Webservers an. Vor allem Entwickler, die sich öfters auch per SSH-Verbindung auf die Server einloggen, werden dieses kleine aber dennoch nützliche Tool oft nutzen.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/showip/

Webseite:

http://code.google.com/p/firefox-showip/

 

Platz 8: Adblock Plus

Screenshot Adblock Plus
Mit Filterlisten werden die Regeln aktualisiert, welche Elemente auf der Seite versteckt werden sollen.

Normalerweise häe dieses Add-on eine bessere Plazierung in meiner Top 10 verdient, aber der Fokus dieser Liste ist die Entwicklung von Webseiten. Da diese relativ verbreitete Erweiterung Webseiten modifiziert und Inhalte löscht, sollte ein Entwickler seine Webseite gegebenenfalls auch mit diversen Filterlisten überprüfen.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/adblock-plus/

Webseite:

http://adblockplus.org/de/

Platz 9: NoScript

Screenshot NoScript
Mehr Sicherheit durch abgeschaltetes Javascript mit dem Add-On NoScript.

NoScript ist die passende Ergänzung zu Adblock Plus. Dieses Add-on verbietet domainabhängig Javascript. Es erhöht natürlich die Sicherheit, aber wenn die eigene Domain geblockt wird, dann könnte die Seite nicht mehr bedienbar sein. Daher sollte ein guter Web Developer auch mit aktiviertem NoScript-Add-on seine Webseiten testen.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/noscript/

Webseite:

http://maone.net/

 

Platz 10: Pinger

Screenshot Pinger
Tip: Speichern Sie die Sitemap ihrer Webseite lokal ab. So können Sie schnell feststellen, ob Backlinks nicht mehr funktionieren.

Benutzer der TYPO3-Extension RealURL kennen vermutlich das Problem: Kaum wird eine Seite umbenannt oder verschoben, können die Seiten nicht mehr aufgerufen werden. Zumindest können Sie mit Pinger ganz einfach herausbekommen, welche Verlinkungen auf Ihrer Seite 404-Fehler erzeugen.

Download-Link:

https://addons.mozilla.org/de/firefox/addon/pinger/

 
Keywords dieser Seite: Firefox,Add-on,Erweiterung,Webseite,Web Developer,Top 10