Werkzeuge für die Entwicklung von Webseiten

Tools für den Praxiseinsatz

Eine Liste von sinnvollen Werkzeugen, die zwar keinen Anspruch auf Vollständigkeit erhebt, sich aber bei unserer täglichen Arbeit aber als sehr gut geeignet erwiesen hat. Sobald sich neue Tools bewährt haben, ergänzen wir diese Liste.

Standardkonformer Browser

Es dürfte sich herumgesprochen haben, dass zur Entwicklung von Webseiten ein möglichst standardkonformer Browser verwendet werden sollte: Get Firefox. Die folgenden Erweiterungen setzen diesen Browser voraus.

FireBug

Mit Firebug können Sie auch den letzten Winkel des DOM untersuchen. Alle Werkzeuge, die Sie zur Entwicklung von JavaScript, CSS, HTML oder Ajax sind in diesem Tool vereint. Die Dokumentation, Screenshots sowie ein Forum finden Sie auf der Website des Autors von Firebug.

Kurze Übersicht über die Features:

• JavaScript Debugger
• Ein Icon zeigt ob Fehler auf der Seite vorhanden sind.
• Eine Konsole zeigt JavaScript- und CSS-Fehler.
• HTML-Inspektor

View Formatted Source

View Formatted Source setzt den DOM Inspector voraus. Ein wirklich geniales Tool, das es erlaubt, durch einfaches Zeigen mit der Maus auf einen HTML-Tag, zu sehen, welche CSS-Attribute dort wirksam sind und in welcher Reihenfolge. Die CSS Regeln werden mit Dateinamen und Zeilennummer angezeigt. Zeigt man auf das Ende eines HTML-Tags, wird der gesamte Tag grau hinterlegt. Man hat also einen hundertprozentigen Überblick und muß nicht lange im Quellcode suchen.

Copy Plain Text

Copy Plain Text ist ein hilfreiches Tool für Leute, die viel Text von vorhandenen Webseiten kopieren und in den RTE einfügen müssen. Jegliche Formatierung wird entfernt und nur der reine, unformatierte Text bleibt übrig.

Web Developer

Mit der Beschreibung von Web Developer könnte man viele Seiten füllen. Sie blendet eine zusätzliche Werkeugleiste im Firefox ein, die zahllose nützliche Helfer zur Verfügung stellt. Einige Highlights: Java und JavaScript ein- und ausschalten, Cookies löschen, CSS Media Types ändern um die Auswirkung am Bildschirm beurteilen zu können, Hervorheben von bestimmten Elementen, Größenänderung des Viewports, Code validieren (auch von lokalen Files), Java und JavaScript Konsole, Anzeige von Klassennamen und IDs und vieles, vieles mehr.

Launchy

Wer Webseiten entwickelt, muß kontrollieren können ob die Darstellung in anderen Browsern ebenfalls korrekt ist. Also URL kopieren, anderen Browser starten, URL wieder einfügen. Launchy nimmt einem diese nervige Prozedur ab: Einfach auf das Launchy-Icon klicken und den gewünschten Browser wählen, die aktuelle Seite wird im anderen Browser geöffnet. Die im System vorhandenen Browser findet Launchy automatisch. Der Source-Code kann in frei definierbaren Editoren geöffnet und auch Email-Links an unterschiedliche Programme gesendet werden. Spart Tage an kostbarer Zeit im Leben eines geplagten Webentwicklers.

X-Ray

X-Ray ist ein ebenso einfaches wie hilfreiches Tool wenn es darum geht, zu analysieren wie eine Seite aufgebaut und aus welchen HTML-Tags sie zusammengebaut ist.