Firefox-Addons

Webdeveloper, Code-Analyse-Tool und Ladezeiten-Optimierer

Mittwoch den 23.04.2014 um 09:58 Uhr

von Hans-Christian Dirscherl

Webdeveloper ist für Webseiten-Entwickler ein
unverzichtbares Werkzeug. Aber auch Nicht-Programmierer können aus
dem Addon großen Nutzen ziehen.
Vergrößern Webdeveloper ist für Webseiten-Entwickler ein unverzichtbares Werkzeug. Aber auch Nicht-Programmierer können aus dem Addon großen Nutzen ziehen.

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.

Mit der Webdeveloper Toolbar können Sie unter anderem
ruckzuck Ihre Cookies checken.
Vergrößern Mit der Webdeveloper Toolbar können Sie unter anderem ruckzuck Ihre Cookies checken.

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.

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

DownloadWebdeveloper 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 weiter unten erklärten DOM Inspector können Sie aus dieser Toolbar heraus ebenfalls zugreifen.

Fahren Sie mit dem Mauszeiger über ein Element auf der
Webseite und Firebug zeigt Ihnen den dazu gehörigen Quellcode
an.
Vergrößern Fahren Sie mit dem Mauszeiger über ein Element auf der Webseite und Firebug zeigt Ihnen den dazu gehörigen Quellcode an.

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.

Mittwoch den 23.04.2014 um 09:58 Uhr

von Hans-Christian Dirscherl

Kommentieren Kommentare zu diesem Artikel (7)
  • Thor Branke 09:29 | 24.04.2014
  • mike_kilo 09:11 | 24.04.2014
  • kalweit 09:05 | 24.04.2014

    Zitat: Thor Branke
    Mit dem Classic Theme Restorer 1.1.8 kann man das gut ausbügeln.


    Seit dem HiDPI Update sind die Geckos für mich komplett unbrauchbar. Die Chancen stehen gut, dass mich nach 20 Jahren der IE doch noch kriegt. Gut gemacht Mozilla.

    Antwort schreiben
  • Thor Branke 08:52 | 24.04.2014

    Zitat: deoroller
    24.5 ESR erscheinen. (Geplante Neuerungen: Sicherheitsaktualisierungen der ESR Version 24.)
    24.5.0esr liegt schon seit vorgestern auf Mozillas FTP-Server und ist bereits bei mir installiert. Der 29iger läuft bis jetzt als "Portable" zu Testzwecken wegen des neuen Profils.
    Wo findet man eigentlich die RC-Versionen?

    @ kalweit
    Mit dem Classic Theme Restorer 1.1.8 kann man das gut ausbügeln. Habe mir aus den verschiedenen Welten jetzt die persönlich geeignetsten Einstellungen heraus gesucht. Das ist dann eben doch immer wieder das Schöne am Firefox. Man kann den Designer-Fundamentalismus mit machen, man muss aber nicht.
    Im Gegensatz zur Windows-8-Falle ... :böse:

    Antwort schreiben
  • deoroller 08:43 | 24.04.2014

    Zeitgleich zum Firefox 29 soll 24.5 ESR erscheinen. (Geplante Neuerungen: Sicherheitsaktualisierungen der ESR Version 24.)

    Antwort schreiben
113154