Webdeveloper, Code-Analyse-Tool und Ladezeiten-Optimierer

Lassen Sie sich vom Namen nicht täuschen: Webdeveloper ist keinesfalls nur für Webseiten-Entwickler wertvoll, nein, jeder Internetnutzer kann dieses Addon nutzbringend einsetzen. Denn Webdeveloper gehört zu den mächtigsten Firefox-Addons überhaupt. Seine Funktionen sind über das Menü „Extras“ erreichbar. Es installiert aber auch eine eigene Toolbar am oberen Rand des Browserfensters.

Webdeveloper verfügt über dermaßen viele Funktionen, dass wir nur einige erwähnen können: Sie können sich beispielsweise bequem alle Cookie-Inhalte anzeigen lassen. Wenn Sie also wissen wollen, wer alles welche Informationen auf Ihrem Rechner abgelegt hat, ist der Menü-Punkt Cookies erste Wahl. Hier lassen sich die Cookies auch abschalten. Ebenso lässt sich Javascript abschalten oder der Cache deaktivieren. Webformulare lassen sich mit allen dazugehörigen Daten einblenden.

Wenn es Sie interessiert, wie die Seite ohne Bilder aussieht, dann blenden Sie diese einfach aus. Ebenso einfach lassen sich alle Informationen zu den Bildern anzeigen, also beispielsweise deren Größe und der Alternativ-Text. Vertrauliche Daten wie History und Cache-Inhalt können bequem gelöscht werden. Die Seitengröße lässt sich verändern und es gibt eine Zoom-Funktion.

Eine Validierung des Seitencodes und eine Überprüfung der CSS-Daten ist ebenso einfach möglich. Unter dem Menü-Punkt "Extras" findet man mehrere Abschnitte zur Überprüfung von Webseiten-Code. Der obere Abschnitt prüft CSS, HTML & Co. von online verfügbaren Seiten, ganz unten findet man dagegen die Möglichkeit, HTML und CSS in einer lokal auf dem PC gespeicherten Datei validieren zu lassen. Der Seitenquellcode kann natürlich ebenfalls komplett angezeigt werden.

Sie können mit einem Mausklick alle Styles ausblenden und die Seite nackt betrachten oder sich die CSS-Definitionen übersichtlich anzeigen lassen und sie zu Testzwecken bearbeiten.

Lese-Tipp: Wir stellen die Webdeveloper Toolbar hier ausführlich vor

Download: Webdeveloper Toolbar

Die XML Developer Toolbar ist eine ähnliche Toolbar wie die Webdeveloper Toolbar, die allerdings auf XML spezialisiert ist. Sie prüft somit unter anderem die Wohlgeformtheit von XML-Dateien, validiert diese und generiert Schemata sowie DTDs. Auf den weiter unten erklärten DOM Inspector können Sie aus dieser Toolbar heraus ebenfalls zugreifen.

Das Addon Firebug bietet Web-Entwicklern umfangreiche Funktionen um CSS, HTML und JavaScript auf Fehler zu kontrollieren und diese zu protokollieren und anschließend zu korrigieren. Außerdem können Sie mit Firebug beispielsweise CSS-Layouts überprüfen, DOM-Objekte anzeigen und editieren oder genaue Analysen über die Ladezeiten der einzelnen Seitenelemente anstellen.

Pfiffig: Wenn Sie in Firebug links in der Menüleiste das Pfeil-Icon rechts vom Wanzensymbol anklicken und damit das „Inspect“-Menü wählen, werden alle Abschnitte auf der Website, über die Sie den Mauszeiger bewegen, im Quelltext der Seite farblich hervorgehoben. Den Seitenquelltext können Sie nach Belieben editieren und damit beispielsweise CSS-Effekte ausprobieren und die Webseite in einer neuen Optik erscheinen lassen.

Wenn Sie das unten beschriebene separate Yahoo!-Addon Yslow installiert haben (das sich in Firebug integriert), können Sie die geladene Webseite auf ihre Performance überprüfen lassen und Flaschenhälse erkennen, die den Download der Seite bremsen. Unter „Components“ werden alle Seitenbestandteile aufgelistet, „Stats“ zeigt die Cache-Belegung an.

Firebug lässt sich bequem über ein Icon mit dem Käfersymbol rechts oben in der Statuszeile ein- und ausschalten.

Lese-Tipp: Dieser Artikel stellt die Verwendung von Firebug Schritt für Schritt vor

Download: Firebug

Wenn Sie übrigens Javascripts, Java-Applets und Flashanimationen in einer Website schnell und einfach kontrollieren wollen, bietet sich das Addon NoScript an. Es bietet schnelleren Zugriff und mehr Möglichkeiten als die standardmäßig in Firefox integrierte Java-/Javscript-Kontrolle im Menü „Extras, Einstellungen, Inhalt“. NoScript steuern Sie mit einem Linksklick mit der Maus auf das Icon in der Statuszeile von Firefox rechts unten oder mit der rechten Maustaste und dem Kontextmenü.

Nichts ist so lästig wie eine Website, die langsam lädt. Yahoo veröffentlichte im Yahoo Developer-Network zahlreiche Tipps dazu, wie man der Website Beine macht und die Ladezeiten verkürzt. Die Ratschläge betreffen die Servereinstellungen ebenso wie die Aufbereitung des Webseiten-Contents, die Javascript-Programmierung und die Bilddarstellung. So wird beispielsweise die GET-Methode für Ajax-Anfragen und eine möglichst geringe Zahl von iFrames empfohlen. Cookie-Dateien sollten möglichst klein sein.

Yahoo! hat praktischerweise mit Yslow ein Gratis-Addon für Firefox veröffentlicht, das eine Website auf die Einhaltung dieser Yahoo-Tipps überprüft. Das kostenlose Tool stellt zudem alle Komponenten einer Website übersichtlich dar. Damit Sie Yslow nutzen können, müssen Sie aber zuvor das ebenfalls kostenlose Add-on Firebug herunterladen und im Firefox installieren.

Download: Yslow

UnicodetoHTML: Wandelt mit einem Rechtsklick der Maus Unicode-Zeichen in HTML-Code um.

Download: UnicodetoHTML