Zehn Mal besser surfen für Entwickler

Wer erinnert sich noch an den "Browserkrieg" zwischen Microsoft und Netscape in den späten 1990er Jahren? Als Folge dessen sind Browser heutzutage ein kostenloses Produkt. Netscape und Microsoft hatten ihren Programmen in immer kürzeren Zyklen immer mehr Funktionalitäten einverleibt, bis am Ende das eine Schwergewicht von Microsoft als Sieger überlebte.

Der Mozilla Firefox startete im Gegensatz dazu als Leichtgewicht, ohne den Ballast von tausenden Funktionen, und zeigte mit der gezielten Erweiterbarkeit über so genannte Add-ons dass sich Menschen ihren individuellen Browser selbst zusammenstellen können und auch möchten.

Heute bieten auch Google Chrome, der Internet Explorer und der Opera-Browser ein ähnliches Konzept hinsichtlich der Erweiterbarkeit. Auch Web-Designer profitieren von dieser Entwicklung und können sich mithilfe von Add-ons ihre Browser so anpassen, wie sie es benötigen. Wir stellen Ihnen die wichtigsten Erweiterungen hier kurz vor.

Platz 10: ColorZilla

Viele Anwender kennen die praktischen Funktionen von Bildbearbeitungsprogrammen wie Photoshop oder Paintshop Pro, wenn es um die exakte Ermittlung eines Farbwerts geht. Innerhalb von Microsoft Office steht die Pipette zur Feststellung des Farbwerts ebenfalls zur Verfügung. ColorZilla erfasst, wie die bereits genannten Programme, den Farbwert eines jeden Pixels auf einer Webseite im Firefox beziehungsweise Google Chrome. Zieht der Webentwickler die Pipette auf die gewünschte Fläche, so wird der verwendete Farbcode in den gebräuchlichen Paletten wie RGB oder HSV ausgegeben.

Weitere Funktionen, wie beispielsweise die integrierte Lupe, Color-Picker und der Palette Viewer werten dieses kostenlose Add-on noch einmal auf.

Fazit: ColorZilla für Firefox und Chrome ist ein unerlässliches Hilfsmittel bei der Prüfung und Festlegung von Farbtönen bei der Website-Gestaltung.

Platz 9: ColorPick Eyedropper

Etwas weniger verbreitet, aber von der Funktionalität ähnlich dem ColorZilla ist der ColorPick Eyedropper für den Chrome-Browser. Dieses Add-on ermittelt ebenfalls den Farbwert für einen gewählten Pixel. Je nach Einstellungen des Webdesigners in den Optionen findet das kleine Programm ebenfalls die HSL-Werte heraus und überträgt die Ergebnisse automatisch in die Zwischenablage.

Fazit: Der ColorPick Eyedropper ermittelt die Farbwerte - nicht mehr und nicht weniger. Somit erledigt das nicht einmal 900 KByte kleine Add-on exakt das, was es tun soll.

Platz 8: Window Resizer für Chrome

Entwicklungen wie HTML5 oder zuvor CSS sorgen letztendlich dafür, dass sich Entwickler immer weniger Gedanken darum machen müssen, wie eine Website auf verschiedenen Geräten wohl aussehen mag. Browser passen die Optik auf Tablets, Smartphones oder klassischen Displays automatisch an ("Responsive Design"). Dennoch möchten Web-Designer die Auswirkungen ihres Designs auf möglicherweise kleineren Anzeigen einmal selbst in Augenschein nehmen. Der Window Resizer von Ionut Botzian für Chrome erweitert den Google Browser um eine Schaltfläche, die den schnellen Wechsel erlaubt, ohne selbst das Fenster in den Dimensionen anpassen zu müssen.

Alle klassischen Größen wie 320x480, 480x800, 640x960, 768x1280, 1024x768, 1366x768,1280x800, 1366x768, 1280x1024 und 1680x1050 liefert das kostenlose Add-on von Haus aus mit. Eigene Dimensionseinstellungen mit verschiedenen Piktogrammen, Ausrichtungen auf dem Bildschirm, unterschiedliche Hotkeys und Im- und Export der Einstellungen bietet das kleine Programm ebenfalls.

Fazit: Einfacher geht es wirklich nicht. Ein Mausklick und das Chrome-Fenster wird in der gewünschten Auflösung dargestellt.

Platz 7: Screen Ruler für Chrome

Wie groß ist ein Element auf dem Bildschirm? Um diese Frage auch ohne mit dem Zentimetermaß am Monitor zu hantieren, beantworten zu können, hat Chris Thelwell ein kleines Add-on für Chrome entwickelt. "Ruul" bietet verschiedene virtuelle Zollstöcke in Pixel, Inch und Zentimeter und erlaubt deren freie Positionierung auf dem Bildschirm. Die ermittelten Dimensionswerte kann der Webentwickler auch manuell eintippen und sieht die entsprechende Veränderung auf dem Monitor.

Fazit: Ein äußerst praktischer kleiner Helfer. Das Add-on macht nicht viel Aufsehen, sondern erledigt ganz schlicht die gestellte Aufgabe.

Platz 6: FireShot

Zumindest die jüngeren Versionen von Microsoft Windows verfügen über eine anständige Möglichkeit mit dem Snipping Tool Bildschirmausschnitte als Screenshot auszuschneiden. Andere Betriebssysteme bieten ähnliche Fähigkeiten.

Wer ganze Web-Seiten speichern möchte oder auch nur Ausschnitte und diese direkt in Dateien verwandeln und mit Kommentaren versehen möchte, braucht ein besseres Tool. FireShot Webpage Screenshots ist eine kostenpflichtige Lösung für den Internet Explorer, Chrome, Opera und den Firefox. Mit dem "Webpage Screenshot in Firefox" haben Entwickler eine schnelle und unkomplizierte Lösung um Screenshots

• hochzuladen,

• als PDF, PNG, GIF, JPEG, BMP zu speichern,

• zu drucken,

• in der Zwischenablage zu speichern und

• per E-Mail zu verschicken.

Fazit: Webpage Screenshot ist äußerst leistungsfähig und sehr einfach in der Bedienung. Im Gegensatz zu vielen anderen Add-Ons ist das Programm auch in einer kostenpflichtigen Pro-Version erhältlich. In der 30-tägigen Trial-Phase können Entwickler viele Features der Lösung ohne Einschränkungen testen.

Die Pro-Version erlaubt noch einige weitere Gimmicks, wie beispielsweise die Microsoft OneNote-Unterstützung oder die Erstellung von mehrseitigen PDF-Dokumenten. Wer Ideen für eigene Konzepte sammeln und archivieren möchte, für den ist Webpage Screenshot die passende Software.

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!