Firefox Extensions für Web-Entwickler

Letzte Aktualisierung: 11. Februar 2010

Unter den vielen Extensions für Firefox gibt es einige, die beim Erstellen und Prüfen von eigenen Webseiten schlicht unverzichtbar sind:

• ColorZilla – Erlaubt es, rasch einen Farbwert in Hex oder RGB abzulesen. Bietet zudem ein Zoom, mit dem sich Websseiten bis auf 20% verkleinern bzw. 1000% vergrössern lassen.
• MeasureIt – Zum Abmessen beliebiger Elemente auf einer Webpage. Genau so einfach und praktisch wie ColorZilla – und integriert sich genau so dezent in den Statusbar.
• FireBug – Zeigt JavaScript-, CSS- und XML-Fehler im Code einer Webpage. Sehr schön auch der Inspector, der es erlaubt, sehr rasch zur entscheidenden Stelle im Code vorzudringen.
• Web Developer – Ein Toolbar mit allem was es braucht, um Webseiten zu analysieren und zu testen. Das Schweizer Taschenmesser für Web-Entwickler.
• HTML Validator – Zeigt Fehler im HTML-Code an und gibt Hinweise für die Optimierung der Accessibility (barrierefreie Websites).
• LinkChecker – Prüft eine Seite auf tote Links. Sehr anschauliche Anzeige mit Ampelfarben. Auch sehr hilfreich um zu sehen, wo überhaupt Links vorhanden sind. (Alternative: Link Evaluator)
• View Dependencies – Erweitert den Dialog “Seiteninformationen” um ein Register, dass alle eingebundenen Dateien (Bilder, Hintergrundbilder, CSS Stylesheets, JavaScript-Dateien) auflistet.

Je nach Situation ebenfalls sehr wertvoll sind:

• Pencil – Wireframe-Tool (Details hier)
• X-Ray – Blendet den HTML-Code direkt in der Seite ein. Für schnelle Checks um zu sehen, wie eine Seite aufgebaut ist.
• View Source Chart – Eine Alternative zur normalen Sourcecode-Ansicht: Statt einem Syntax-Highlighting bietet diese Extension eine Darstellung mit farbig codierten Blöcken.
• CSSViewer – Einfache, sehr anschauliche Anzeige der CSS-Eigenschaften des Objekts, dass sich unter dem Mauszeiger befindet.
• Character Identifier – Zeigt die Unicode-Informationen eines Zeichens an.
• Quick Locale Switcher – Zum schnellen Umschalten zwischen unterschiedlichen Sprachen/Länder-Einstellungen. Ideal zum Testen von mehrsprachigen Websites.
• Flash Switcher – Zum schnellen Umschalten zwischen unterschiedlichen Versionen des Flash-Plugins.
• TAW3 with a click und ocawatoolbar – Für einen schnellen Accessibility-Test.
• Window Resizer – Setzt das Browser-Fenster schnell auf bestimmte Standardgrössen. Ideal um zu testen, wie eine Seite auf kleineren Bildschirmen wirkt. (Eine solche Funktion ist allerdings auch im Web Developer Toolbar enthalten – siehe oben.)
• JSView – Erlaubt es, alle eingebundenen CSS- und JavaScript-Dateien der aktuellen Seite direkt in einem Editor anzuzeigen.
• Codetech – Ein kompletter Web-Editor in Form einer Extension. Weckt Erinnerungen an den Netscape Composer. Nicht das ultimative Tool für Professionals, aber eine prüfenswerte Alternative für einfachere Aufgaben – insbesondere so lange es mit der Weiterentwicklung von Nvu nicht vorwärts geht.
• Netcraft Toolbar – Dieser Toolbar ist primär dazu gedacht, um Phishing-Websites zu erkennen. Als Nebeneffekt liefert er aber auch die wichtigsten Angaben über den Server einer Website.
• SearchStatus – Toolbar für die Suchmaschinen-Optimierung (SEO). Zeigt die Ratings von Google, Alexa und Compete in der Statusleiste an und bietet vereinfachten Zugriff auf weitere Funktionen dieser Dienste.
• Extended Statusbar – Inspiriert von Opera zeigt diese Extension in der Statusleiste Informationen zum Ladevorgang der aktuellen Seite (z.B. Seitengewicht, Ladezeit).
• Cache Status – Browser Cache überwachen und schnell leeren (Details hier)