Platz 5: IE Developer Toolbar

Der Microsoft Internet Explorer ab der Version 8 verfügt über eine eingebaute Hilfe für Entwickler. Gestartet wird der Helfer durch einen Druck auf die Taste F12. Die Toolbar unterstützt den Entwickler durch verschiedene Hilfestellungen, wie:

• Document Object Modell (DOM) der Webseite ausgeben

• Prüfung der Syntax

• gezielte Anpassung von Einstellungen für den IE

• Prüfung von HTML, CSS, WAI und RSS-Links

• Anpassung der Fenstergröße auf bestimmte Werte

• Darstellung von alternativen Texten, Namen und Maßen von eingebetteten Bildern

Fazit: Die eingebaute Hilfestellung ist für Webdesigner, die mit dem Internet Explorer arbeiten, äußerst hilfreich, wenn es um die Suche nach Fehlern oder Interpretationsauffälligkeiten geht. Für ältere Versionen des Internet Explorer wird die Leiste zum Download angeboten. Das integrierte Tool ersetzt viele Anforderungen, die unter Firefox mit dem nachfolgend beschriebenen "HTML Validator" erledigt werden können.

Platz 4: HTML Validator

Der HTML Validator für den Firefox ist ein äußerst beliebtes und verbreitetes Add-on. Die Firefox- und Mozilla-Erweiterung überprüft den Quelltext der besuchten Website auf erkannte syntaktische Fehler. Optional wird die besuchte Website zusätzlich auf barrierefreie Merkmale untersucht - eine interessante Funktion vor allem für Webentwickler, um selbst erstellte Seiten zu überprüfen. Der Validator basiert auf dem Ende der 1990er Jahre entwickelten Programm "HTML Tidy" von Dave Raggett.

Der Validator integriert sich in die Menüleiste des Firefox und prüft auf Mausklick die syntaktischen Regeln für HTML und CSS. Anhand des sich ändernden Icons erkennt der Webdesigner auf einen Blick, ob der erzeugte Code einwandfrei ist, oder ob Fehlermeldungen vorliegen.

Das grüne Häkchen bedeutet, dass die Seite valide ist, somit ist alles in bester Ordnung. Das gelbe Ausrufezeichen symbolisiert lediglich Warnungen, welche die Validität zwar nicht beeinflussen, doch trotzdem beachtet werden sollten. Das rote X bedeutet hingegen, dass die Seite nicht valide ist und der Autor nacharbeiten sollte. Die Bereinigung des Codes bei einfachen Fehlern erledigt das kleine Add-on durch einen Klick auf "Seite bereinigen". Im Test kam es jedoch immer wieder dazu, dass die Seite nicht angezeigt werden konnte.

Fazit: Wer professionelle Web-Seiten erstellt, muss validen HTML/CSS-Code verwenden. Schlecht erstellte Webseiten könnten möglicherweise beim Betrachter fehlerhaft interpretiert werden oder zu einem schlechteren SEO-Ranking führen. Wer nur schnell den Code prüfen lassen möchte, ohne dass Add-on installieren zu wollen, kann dies auch auf validator.w3.org bewerkstelligen. Ansonsten ist der Validator ein Muss für jeden Web-Entwickler.

Platz 3: Autofill Forms

Wer als Web-Entwickler Abfrage- oder Eingabedialoge für Webseiten erstellt, wird sicherlich schon auf die Idee gekommen sein, sich extra Schaltflächen zu programmieren, die Benutzereingaben simulieren. Über ein einfaches Add-on für den Firefox, dem "Autofill Forms" von Sebastian Tschan und Egor Zindy, kann sich der Entwickler diese Mühe sparen.

Die Konfiguration geschieht über eine selbsterklärende bedienende Oberfläche. Das Add-on füllt Webformulare mit einem Mausklick oder einem Tastaturkürzel aus. Das Programm bietet einen komplett anpassbaren Regelsatz, um den Inhalt für jedes Formularelement zu bestimmen. Eine flexible Anpassung mithilfe von JavaScript und regulären Ausdrücken ist ebenfalls für erfahrene Anwender möglich.

Fazit: Anstelle sich die Belegung von Eingabefeldern selbst zu programmieren, lieber Autofill Forms nutzen - das geht deutlich schneller und ist komplett kostenlos.

Platz 2: Firebug

Firebug für den Firefox gehört ohne Frage in den Werkzeugkasten eines jeden Web-Entwicklers. Das mit 4 MB schon recht umfangreiche Add-on enthält verschiedene Hilfsmittel:

• HTML-Syntax-Prüfung

• Bearbeitung von HTML-Code

• Prüfung der CSS-Definitionen

• Darstellung der CSS-Dimensionen für Bilder

• Debugging von JavaScript

• Logging für JavaScript

• Suchfunktionen

Eine Besonderheit von Firebug ist jedoch die Analyse der Webseiten-Zugriffe und die grafische Darstellung in einem Zeitstrom. Wann wurde von der Webseite welches Element angefordert? Von welcher IP-Adresse wurde das Element mit welcher Größe geladen und wie lang hat der gesamte Vorgang gedauert? Mithilfe dieser Auswertung sind Web-Designer in der Lage, Performance-Problemen auf den Grund zu gehen und diese zu beheben.

Fazit: Allein die Netzwerk-Geschwindigkeits-Messung macht Firebug zu einem unverzichtbaren Hilfsmittel für Web-Entwickler. Selbst die Laufzeit einzelner JavaScripts wertet das Programm einzeln aus. Einfach nur gut!

Platz 1: Web Developer

Möglicherweise ist der aus England stammende und nun in Kalifornien lebende Chris Pederick einer der bekanntesten Add-on-Entwickler unserer Tage. Die womöglich beste Erweiterung für die Browser Chrome, Firefox und Opera ist der kostenlose "Web Developer". Eine Toolbar für die Browser mit einer Vielzahl von kleinen Helferlein, wie beispielsweise

• Größe des Ausgabefensters auf definierbare Größen stellen

• Quelltext anzeigen

• Bildabmessungen zeigen

• Deaktivierung von Java Script

• Formularfelder gezielt befüllen.

Fazit: Eigentlich handelt es sich beim Web Developer nicht um ein einziges Tool, sondern um eine Sammlung vieler verschiedener Helferlein. Anstelle viele kleine Add-ons installieren zu müssen, fasst der Web Developer die wichtigsten Programme und Funktionalitäten zusammen. Wir können nur einen einzigen Mangel festhalten - Nutzern des Internet Explorer bleiben außen vor, da die Tool-Sammlung nicht für den Microsoft-Browser angeboten wird.

Tipp: Noch mehr empfehlenswerte Browser-Erweiterungen gefällig? Wenn Sie sicherer surfen möchte, schauen Sie bei unseren "Top 10 Add-ons für Security" vorbei. Mobile Anwender werden bei den "Top 10 Add-ons für Mobility" fündig. Viel Spaß beim Ausprobieren!