Bei der Entwicklung von Webseiten stellt sich immer wieder die Frage, wie man diese möglichste effektiv Entwickelt und gleichzeitig eine hohe Qualität des Codes sicherstellt. Dabei kommt es sicherlich täglich zu der Situation, dass man auch Fehler entdeckt, welche auf den ersten und auch zweiten Blick in den Code nicht immer leicht nachvollziehbar sind.
Mit der Komplexität und Größe einer Webseite werden sich die Probleme in der Regel erhöhen, insbesondere wenn große Mengen an historischem Code vorhanden sind. Mangelhafte strukturelle Konzeption in der Vergangenheit und unterschiedlicher Programmierstil tun ein weiteres dazu die möglichen Probleme zu steigern. Da stellen sich dann schnell die Fragen, warum eine Schrift plötzlich so oder so aussieht und eine vorgesehen CSS Klasse nicht wirkt, wie sie soll.
Da man auch mit YAML vor Problemen und Darstellungsfehlern nicht gefeit ist, und manche dieser Probleme nur schwer ohne Relaunch der Website in den Griff zu bekommen sind, möchte ich hier eine Liste der Tools veröffentlichen, welche helfen können Lösungen zu finden bzw. alten und neuen Code zu verstehen.
Standardkonformer Browser
Die Basis jedes realistischen Webseitentest stellt sicherlich der verwendete Browser dar. Damit ein Test auch wirklich aussagekräftige Ergebnisse liefert, muss man an dieser Stelle besonders sorgsam eine Auswahl treffen. Browser gibt es mitlerweile wie Sand am Meer aber die Ergebnisse in der Darstellung unterscheiden sich teils deutlich. Deshalb hier die Empfehlung für diesen Zweck den Mozilla Firefox zu verwenden. Alternativ ist Opera mitlerweile auch recht brauchbar, allerdings sind die nachfolgend aufgelisteten Erweiterungen nur im Mozilla Firefox nutzbar. Opera bietet derzeit nicht die vielen hilfreichen und erforderlichen Tools um Effizient zu entwickeln. Der Microsoft Internet Explorer ist als Testkandidat für Standardkonformität absolut ungeeignet, da hier in der Regel richtiger HTML/CSS Code falsch dargestellt wird und dann spezielle Browserweichen erforderlich werden um die Darstellung zu korrigieren!
Firefox Erweiterung - Firebug
Firebug ist eine Erweiterung, welche einem Entwickler eine Vielzahl an Möglichkeiten bietet. Damit lässt sich CSS, HTML und Javascript während des Besuchs einer Webseite - direkt - bearbeiten, prüfen und überwachen. Für weitere Details der vielen technischen Möglichkeiten sei an dieser Stelle auf die Firebug Homepage verwiesen.
Firefox Erweiterung - Webdeveloper
Es gibt wohl kaum ein Tool welches einen höheren Nutzwert hat, wie die Web Developer Erweiterung. Deshalb hier die uneingeschränkte Empfehlung - MUST HAVE - es gibt einfach nichts gleichwertiges - und ohne - geht es gar nicht!
Firefox Erweiterung - HTML Validator
Die Ausgabe von Validem und richtigem HTML und CSS Code ist wohl das A und O jeder hochwertigen Webentwicklung. Auch wenn es für viele Diskussionen sorgt, ob etwas wirklich notwendig ist oder nicht - man sollte es einfach machen. Auch wenn es viele Entwickler anfänglich von morgens bis abends frustriert und sie nun endlich lernen müssen wie HTML richtig programmiert wird - dieser Lerneffekt macht sich auf Dauer einfach bezahlt. Die vielen inkompatiblen Webseiten mit schlechtem HTML und CSS Code sollten aus dieser Welt schnellstmöglich verschwinden! Die sich deutlich reduzierenden Testzeiten werden ihre Vorteile ausspielen, das Webseiten-Test-Team wird es danken und das Magengeschwür des zuständigen Entwicklers wird gar nicht erst entstehen.
Damit man beim Überprüfen der Webseiten nicht auf den teils langsamen W3C Server angewiesen ist gibt es den HTML Validator, welcher lokal ausgeführt wird und dadurch wesentlich komfortabler und schneller ist.
Firefox Erweiterung - ColorZilla
Diese Erweiterung ist eine sehr nützliche Ergänzung zu den anderen Tools. Es enthält einen Color Picker und vieles mehr um die Farben von CSS und Grafiken herauszufinden. Die detaillierte Funktionsliste kann man sich auf der ColorZilla Features Seite durchlesen. Installation von ColorZilla.
Firefox Erweiterung - MessureIt
Möchte man einmal Positionen, Abstände oder ähnliches ausmessen, sollte man die MessureIt Erweiterung installiert haben. Alternativ bietet die Erweiterung Webdeveloper unter Verschiedenes > Messen die gleiche Funktionalität und bietet dabei noch weitere Information, wie bspw. die Position.