Webdeveloper, Code-Analyse-Tool und Ladezeiten-Optimierer
Webdeveloper: Schweizer Taschenmesser für jeden Internetnutzer
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 Browser-Fensters.
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.
Quellcode überprüfen
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.
Download : Webdeveloper Toolbar
XML Developer 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 in diesem Beitrag auch vorgestellten DOM-Inspector können Sie aus dieser Toolbar heraus ebenfalls zugreifen.
Firebug: HTML, CSS und JS auf den Zahn fühlen und manipulieren
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.
Noscript: Skripte kontrollieren
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-/Javascript-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ü.
Yslow: Webseiten für bessere Ladezeiten optimieren
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.
UnicodetoHTML: Wandelt mit einem Rechtsklick der Maus Unicode-Zeichen in HTML-Code um.
Weiter geht es mit Erweiterungen zum Abspeichern von Seiten, zum Messen der Surf-Bandbreite, zum Ermitteln von Farbwerten und zum Checken der Links.