Hilfreiche Tools zur Webentwicklung

[letzte Aktualisierung: 16.05.2011]

Moderne Browser fordern von Entwicklern moderner Webseiten möglichst fehlerfreien, sauber durchdachten Code. Nicht immer ist dies auch möglich, wodurch teilweise recht komplexe HTML- und CSS-Strukturen entstehen können. Um bei diesen nicht den Überblick zu verlieren gibt es zahlreiche Tools die bei der Webentwicklung helfen.

Viele Browser auf einem System

Das Ziel bei der Entwicklung einer Webseite sollte sein, dass diese in möglichst allen aktuell verwendeten und meist verbreitetsten Browsern identisch aussieht - und das ohne eine unprofessionelle Browserempfehlung auszusprechen. Dank Internet Explorer 9, Firefox und Opera ist dies auch durchaus möglich. Da jedoch auch ältere, problematischere Browser leider weiterhin weit verbreitet sind, muss man als Webentwickler auch diese testen und ggfs. nachbessern.

In diesem Zusammenhang ist es durchaus sinnvoll möglichst viele Browser auf seinem Rechner zu installieren. Mozilla Firefox lässt dies von Haus aus zu. Man muss lediglich darauf achten, dass man für jede Browserversion ein eigenes Profil anlegt und Firefox nur über manuell angepasste Links startet. Um z.B. das Profil "Mustermann" zu starten muss man unter Windows folgende Verknüpfung erzeugen:

Analog kann dieser Aufruf auch unter Linux-Systemen verwendet werden. Eine ausführliche Anleitung zur Einrichtung mehrerer Profile und mehrerer Firefox-Versionen finden Sie unter: http://www.firefox-browser.de/wiki/Mehrere_Profile_gleichzeitig_verwenden

Microsofts Internet Explorer kann auch parallel in mehreren Versionen existieren. Allerdings in gewissen Grenzen. Der Hersteller selbst bietet dazu keine Unterstützung. Hilfreich sind Tools, welche die gewünschte Versionen des Browsers nachinstallieren. Der IE Tester ist eines davon. Das Programm erlaubt die Nachinstallation von vielen Versionen des Internet Explorer und funktioniert auch unter Windows 7 läuft. Das früher weit verbreitete Programm Multiple IE, welches das selbe leistete, wird leider nicht mehr weiterentwickelt.

Es ist jedoch umstritten, ob ein nachinstallierter Internet Explorer 6 parallel zu einem Internet Explorer 7, 8 oder 9 auch wirklich wie ein Internet Explorer 6 handelt; das selbe auch beim IE 7. Der sicherste Weg zum Testen von Webseiten in älteren Internet Explorer-Versionen ist also weiterhin jeweils ein eigenes Betriebssystem für jede Version. Dank virtuellen Maschinen (wie das kostenfreie VirtualPC von Microsoft oder der VMPlayer von VMWare) kann dies auch auf einem PC geschehen, erfordert jedoch zusätzliche Betriebssystemlizenzen und -neuinstallationen innerhalb der virtuellen Maschine.

Bei anderen, weniger oft genutzten Browsern empfiehlt es sich der Einfachheit halber immer die aktuellste Version zu installieren. Zu diesen Browsern zählen z.B. Google Chrome, Opera, Safari und Konqueror.

Nützliche Helferlein im Browser

In jedem Browser kann man verschiedenste Erweiterungen oder Addons installieren. Jedes hat seine eigene Funktion und viele helfen durchaus sinnvoll bei der Webentwicklung. Mozilla Firefox eignet sich besonders gut auch ohne diese Erweiterungen, da der Browser HTML- und CSS-Code sehr nah am vom W3C vorgegebenen Standard interpretiert. So kann man sich als Webentwickler relativ sicher sein, dass das was man im Firefox sieht auch in anderen, ähnlich modernen Browsern gleich aussieht. Gleiches gilt inzwischen auch für die aktuellsten Versionen von Opera. Abweichungen in der Darstellung kann man dann wiederum mit den folgenden Tools untersuchen.

Mozilla Firefox

Für Mozilla Firefox stehen eine ganze Reihe nützliche Hilfsmittel zur Verfügung. Die Webdeveloper-Erweiterung (auch "Eierlegende Wollmilchsau die nur noch nicht Kaffee kochen kann" genannt) bietet bereits sehr viele Funktionen an:

• JavaScript und Cache per Klick an und aus schalten
• das Browserfenster auf eine beliebige Größe bringen
• HTML- und CSS-Code mittels externer Analysetools untersuchen
• Grafiken ein- und ausschalten
• einzelne HTML-Elemente hervorheben
• die Ebenen einer Seite anzeigen
• den übergebenen Header der HTML-Seite anzeigen
• uvm.

Firebug ist eine andere Erweiterung mit der man z.B. per Rechtsklick auf ein HTML-Element im Browserfenster dessen Eigenschaften untersuchen und testweise verändern kann. So findet man sehr schnell Probleme bei der Vererbung von CSS-Eigenschaften. Außerdem kann man mittels Firebug die DOM-Eigenschaften der Elemente prüfen. Ein großer Vorteil ist, dass man auch Live an der aktuellen Seite am HTML- und CSS-Code Änderungen vornehmen ohne die Webseite für andere Besucher unansehnlich zu machen.

Ohne validen HTML-Code bringen diese beiden Erweiterungen jedoch auch nur bedingt Hilfe. Ob der Quellcode einer Seite valide ist oder nicht kann man sich mit einer weiteren Erweiterung anzeigen lassen: HTML Validator. Diese prüft die aktuell im Browser angezeigte Webseite und gibt entweder eine gut sichtbare Warnung aus oder sagt mit einem grünen Häkchen, dass alles ok ist.

Mit der Erweiterung Live HTTP Headers kann man sich bei sehr komplexen Programmierungen den HTTP Header jeder einzelnen Datei anzeigen lassen. So findet man z.B. schnell heraus, weshalb ein Bild nicht als Bild sondern als Text angezeigt wird oder Stylesheet-Angaben aus einer CSS-Datei gar nicht beachtet wird.

Die Erweiterung lori ermöglicht es zu prüfen wie schnell eine Seite geladen wird. Dabei wird unterschieden zwischen Beginn eines Request und Erhalt der Antwort sowie der Dauer bis zur Darstellung der Seite im Browserfenster.

Mit Autofill Forms kann man seine gerade entwickelten Formulare prüfen. Die Erweiterung schreibt mit einem Klick auf das Icon in jedes Feld auf einer Seite Inhalte die man dann sofort abschicken kann. Dies erleichtert das Entwickeln von Formularen, da man nicht bei jedem Test die Einträge neu eingeben muss.

Opera

Opera liefert seit Version 9.5 Entwicklertools im Browser mit. Diese funktionieren in den aktuellsten Versionen ähnlich wie das o.g. Firebug-Addon. Während man im linken Teil den Quellcode der gewählten Datei sieht kann man rechts die dazugehörige Analyse sehen. An der Error Console sieht man auch sofort, wenn es einen Fehler in der Seite gibt.

Internet Explorer

Auch Microsoft bietet für den Internet Explorer 7 eine Webdeveloper-Toolbar an. Diese muss man jedoch erst nachträglich installieren. Seit Internet Explorer 8 ist diese Toolbar in einer weiterentwickelten Form bereits enthalten. Die Toolbar findet man dort unter dem Menü "Ansicht" > "Explorer-Leiste". Die Funktionen sind bei der Version für den Internet Explorer 7 ähnlich wie bei Webdeveloper und Firebug im Firefox, jedoch nicht so ausgeprägt und einfach zu bedienen. Seit dem Internet Explorer 8 besitzt die Toolbar nahezu keine Unterschiede zum Firebug des Firefox-Browsers und unterstützt im Internet Explorer 9 auch weitere CSS-Eigenschaften.

Hä? Was will das Tool von mir?

Fehlermeldungen die in den jeweiligen Tools angezeigt werden beruhen meist auf Abweichungen zu den Vorgaben des W3C oder von standardisierten Technologie. Diese Hinweistexte können durchaus kryptisch und auf den ersten Blick abschreckend wirken. In vielen Fällen ist es sinnvoll nach genau diesen Fehlermeldungen im Internet zu suchen.

Viele Meldungen von HTML- oder CSS-Validatoren sind auch nur Folgefehler. Oft lohnt es sich die Liste der angezeigten Fehler von oben nach unten abzuarbeiten statt mitten drinne zu beginnen.

Tools für den Computer

HTML- wie auch CSS-Code für eine Webseite muss erstmal geschrieben werden. Es gibt zahllose Texteditoren die hier bei der Eingabe helfen.

Ein besonders großes Tool mit dem man nahezu alle Anforderungen erschlagen kann ist das Eclipe-Framework. Es ist jedoch auch wegen seiner Größe etwas schwierig in der Handhabung, bietet aber nicht nur für HTML und CSS Unterstützung sondern auch für Programmiersprachen wie C++, Java oder PHP.

Andere Editoren wie RapidPHP ermöglichen es auch per Klick Updates aus Dateien direkt auf den Server zu spielen. Sie bieten auch Syntaxhighlighting und Autovervollständigung an und sind auch für andere Systeme als Windows verfügbar.

Tools im Internet

Im Internet findet man vor allem Validatoren für HTML, CSS und auch verschiedene Feed-Formate. Der Bekannteste ist sicherlich der Validator des W3C selbst den man unter http://validator.w3.org finden kann. Dieser kann auch RSS und CSS analysieren. Wer nicht mit englischen Meldungen arbeiten will kann auch auf den deutschen Validator Validome zurückgreifen. Dieser untersucht den Quellcode jedoch etwas strenger und liefert ggfs. mehr Meldungen.

Im Internet ist es auch möglich eine Webseite auf ihre Suchmaschinenoptimierung hin zu untersuchen. Hierfür gibt es Tools wie www.seitwert.de, www.doodox.com oder Linklisten wie www.uitest.com/de/analysis/. Mit dem SEO-Browser sieht man wie eine Webseite aus Sicht einer Suchmaschine aussehen könnte.

Übersicht

Browser

Virtuelle Umgebungen

Sonstiges

Weiterführende Links:

• Firefox Add-ons
• Eclipse
• RapidPHP
• Validator vom W3C
• Validome
• SEO-Browser