23.04.2014, 09:58

Hans-Christian Dirscherl

Firefox-Addons

Webdeveloper, Code-Analyse-Tool und Ladezeiten-Optimierer

Webdeveloper: Schweizer Taschenmesser für jeden Internetnutzer
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.

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.

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 weiter unten erklärten 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.
Download: Firebug

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-/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ü.

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.
Download: Yslow
UnicodetoHTML: Wandelt mit einem Rechtsklick der Maus Unicode-Zeichen in HTML-Code um.
Download: UnicodetoHTML
Weiter geht es mit Erweiterungen zum Abspeichern von Seiten, zum Messen der Surf-Bandbreite, zum Ermitteln von Farbwerten und zum Checken der Links.
Kommentare zu diesem Artikel (7)
PC-WELT Hacks
PC-WELT Hacks Logo
Technik zum Selbermachen

3D-Drucker selbst bauen, nützliche Life-Hacks für den PC-Alltag und exotische Projekte rund um den Raspberry Pi. mehr

Angebote für PC-WELT-Leser
PC-WELT Onlinevideothek

PC-WELT Online-Videothek
Keine Abogebühren oder unnötige Vertragsbindungen. Filme und Games bequem von zu Hause aus leihen.

Tarifrechner
Der PC-WELT Preisvergleich für DSL, Strom und Gas. Hier können Sie Tarife vergleichen und bequem viel Geld sparen.

PC-WELT Sparberater
Das Addon unterstützt Sie beim Geld sparen, indem es die besten Angebote automatisch während des Surfens sucht.

Telekom Browser 7.0

Telekom Browser 7.0
Jetzt die aktuelle Version 7 mit neuem Design und optimierter Benutzerführung herunterladen!

- Anzeige -
Marktplatz
Amazon

Amazon Preishits
jetzt die Schnäpchen bei den Elektronikartikel ansehen! > mehr

UseNext

10 Jahre UseNeXT
Jetzt zur Geburtstagsaktion anmelden und 100 GB abstauben! > mehr

113158
Content Management by InterRed