Nützliche Tools für Webdesigner

Zeit ist Geld. Viele nützliche kleine Helfer machen Webdesignern das Leben leichter: Sie wünschen eine schnelle Voransicht der Änderungen, wollen Ihre frisch programmierte Seite auf Fehler flott überprüfen? Scripten, Dateien und Bilder sollen schnell ausblenden, Sie wollen Platzierungen messen und überprüfen? Für jeden Browser und jedes Betriebssystem stehen Plug-ins, Add-ons und Erweiterungen bereit.

Wofür Sie welche Tools einfach und effizient einsetzen können, stellen wir Ihnen vor.

Tipp 1 - Änderungen simulieren und Fehler suchen

Sie möchten Fehler auf Ihrer Webseite beheben oder Änderungen testen? Und das soll nicht online passieren, wenn jeder dabei zusehen kann. Hilfe bieten hier mehrere Tools und Plug-ins. Firebug, ein Add-on für Firefox, erweitert den Browser um eine sehr nützliche Vorschau- und Anwendungsumgebung. CSS, HTML, DOM und JavaScript können Sie komfortabel im Vorschau-Modus anpassen. Ändern Sie in der CSS-Spalte die Attribute der entsprechenden Klassen, um etwa Schriftart und Farben zu testen - oder um Positionen zu ändern und zu beurteilen. Auch die Suche nach der richtigen Klasse oder ID vorhandener Elemente wird hier ganz einfach.

Mit der Untersuchen-Funktion analysieren Sie die Webseite und erhalten die dazugehörigen CSS-Attribute. Auch Vererbungen werden deutlich. Die Fehlerausgabe ist nicht ganz so detailliert, für die meisten Fälle aber ausreichend. Schön ist die Vielzahl der Fähigkeiten, die dieses kleine Add-on mitbringt.

Auch für andere Browser gibt es ähnliche Tools und Plug-ins: Developer-Tools für Chrome, Dragonfly für Opera und die Developer-Toolbar für den Internet Explorer. Safari enthält von Haus aus eine Reihe leistungsfähiger Tools für Entwickler. Aktivieren Sie in Safari unter Einstellungen/Erweitert den Punkt Menü Entwickler in der Menüleiste anzeigen. Sie finden nun den Punkt in der Menüleiste mit einer Reihe von Möglichkeiten zur Fehlersuche.

Tipp 2 - Cookies verwalten und überprüfen

Sie möchten herausfinden, welche Cookies auf der gerade dargestellten Seite aktiv sind oder Ihr eigenes Frontend benutzerfreundlicher machen.

Hier hilft Ihnen FireCookie - ein Modul, das in der Firebug-Oberfläche integriert wird. Sie erhalten hier in einer Liste Grundinformationen zu allen Cookies, die mit der Seite verbunden sind. Name, Wert, Domain, Pfad, Ablaufdatum und einige weitere Informationen werden übersichtlich zusammengestellt. Auch die Berechtigungen können Sie hier für die eigene Entwicklung überprüfen und abgewiesene Cookies auf Fehler inspizieren.

Tipp 3 - PHP-Scripte debuggen

Ihr PHP-Script erzeugt online Fehlermeldungen und Sie wissen nicht, warum. Hilfe verspricht hier FirePHP. Diese Erweiterung bietet Ihnen speziell für PHP-Scripte ähnliche Funktionalitäten wie Firebug für HTML und CSS. Sie rufen dazu nur eine PHP-Methode auf und analysieren sie. FirePHP ist ideal für die AJAX-Entwicklung und für alle Scripte geeignet, in denen eine saubere JSON oder XML-Syntax erforderlich ist.

Tipp 4 - Messen am Bildschirm

Sie möchten die dargestellte Größe einer Webseite herausfinden oder grafische Elemente abmessen, um etwa die richtigen Abmessungen für einen Werbebanner einzustellen.

Ratgeber: Schnelleres Hosting für Wordpress

Der Weg über einen Screenshot oder das Herunterladen der Bilder ist aber recht umständlich und zeitaufwändig. Viel einfacher ist es, die Maße direkt am Bildschirm abzumessen. Dafür gibt es Hilfsmittel. MeasureIt oder Omeasure bieten die Möglichkeit, Lineale auf den Bildschirm zu zeichnen, die abhängig von der jeweiligen Auflösung Größen oder Abstände anzeigen. Der gezeichnete Messbereich lässt sich per Maus oder Pfeiltasten verschieben.

Dieses kleine Tool erstellt ein Lineal mit Pixel-Einteilung auf jeder beliebigen Webseite - die einfachste Methode um Größen, Abstände und die Ausrichtung der Elemente und Container auf einer Seite zu überprüfen und in der Vorschau anzupassen.

Tipp 5 - JQuery-Funktionen testen und entwickeln

Eine JQuery-Bibliothek und deren Funktion und Auswirkungen zu testen, kann beim Entwickeln sehr hilfreich sein.

Mit einem kleinen Plug-in ist das nun sogar offline möglich. Die Option JQuerify kann entsprechende Bibliotheken dynamisch einbetten. Sie können nun JQuery-Befehle ausführen und testen. Nach einem Funktionsaufruf werden alle Elemente in der Konsole angezeigt, die von dem Befehl betroffen waren. Im Dom-Inspektor erkennen Sie sofort die Zusammenhänge und Abhängigkeiten und können die JQuery-Ausdrücke auf Vollständigkeit und Richtigkeit testen.

Tipp 6 - Flash debuggen

Flash-Dateien online überprüfen - geht das überhaupt? Mit Flash-Firebug haben Sie die Möglichkeit, SWF-Dateien bezüglich Ressourcen, verwendete Objekte, Layer und Bibliotheken zu überprüfen. In der Vorschau können Sie sogar Änderungen an der Zeitleiste und einzelnen Ebenen vornehmen, Änderungen der Ausgabeparameter simulieren und Transformationen steuern. Auch ein umfangreiches Logging bietet dieses kleine, sehr nützliche Tool für Flash-Entwickler.

Tipp 7 - ActiveX-Anwendungen testen

Ihre Webseite enthält ActiveX-Elemente, JavaScripte oder Webanwendungen. Die üblichen Debugging-Umgebungen bieten nicht die Analyse, die Sie möchten, um Ihren Quellcode effizient zu testen.

Der Microsoft Script Debugger bietet eine Debugging-Umgebung speziell für ActiveX-Anwendungen. Auch andere Script-Sprachen wie Visual Basic lassen sich mit diesem Tool komfortabel analysieren. Ein weiterer Vorteil dieser Debugging-Konsole ist die Möglichkeit, Host-Informationen zum ISS-Server auszulesen - ein großer Vorteil für interaktive Anwendungen, die serverseitig ausgeführt werden.

Tipp 8 - CSS abschalten

Sie möchten die Grundstruktur Ihrer Webseite überprüfen.Viele der vorgestellten Plug-ins bieten die Möglichkeit, CSS-Ansicht und Bilder auszublenden. Dadurch werden Fehler im Seitenaufbau dann besonders schnell deutlich. Besonders gut geeignet ist dafür Pendule, ein Entwickler-Tool für Chrome. Viele aus Firebug bekannten und beliebten Funktionen sind ebenfalls in diesem Add-on integriert.

Tipp 9 - Geschwindigkeit und Performance testen

Die Ladezeit einer Webseite ist nach wie vor ein wichtiges Kriterium für die Zufriedenheit der Benutzer. Doch wie schnell ist Ihre Seite im Vergleich und was bremst möglicherweise die Performance? Um das herauszufinden, gibt es die Erweiterung YSlow. Texte, Bilder, CSS und Scripte können die Geschwindigkeit verlangsamen. YSlow erstellt Statistiken und zeigt, welche Inhalte und Elemente die Seite bremsen. Anschließend wird die Webseite benotet. Sehr schön an diesem Tool: Am Ende bietet die Erweiterung Verbesserungsvorschläge an.