Rüsten Sie auf

Die 20 besten Profi-Tools für Firefox

03.12.2008 von Hans-Christian Dirscherl
Firefox ist mehr als "nur" Surfen. Der Mozilla-Browser ist Plattform für unzählige Profi-Add-ons, mit denen nicht nur Entwickler arbeiten. Auch Heimanwender können sie sinnvoll einsetzen.

Wer den Quellcode einer Website prüfen möchte, wissen will, wo sich der Server befindet, auf dem man gerade unterwegs ist oder jeden unsichtbaren Datei-Upload im Hintergrund immer im Blick haben möchte, nutzt Firefox mit einer entsprechenden Profi-Erweiterung. Die CW-Schwesterpublikation "PC-Welt" hat die besten 20 getestet und stellt Sie im folgenden ausführlich vor.

Wichtige Vorabinfo: Alle vorgestellten Erweiterungen (mit einer Ausnahme) sind sowohl zu Firefox 2 als auch Firefox 3 kompatibel. Um ein Add-on zu installieren, klicken Sie auf den entsprechenden Download-Link und installieren Sie es dann direkt im Browser. Nach erfolgreicher Einbettung in den Browser muss dieser neu gestartet werden.

Um ein Add-on später wieder zu deaktivieren oder ganz zu entfernen, rufen Sie im Menü "Extras > Add-ons" die jeweilige Erweiterung auf. Für weitere Informationen können Sie auch auf das Tray-Icon klicken, dass fast alle vorgestellten Add-ons in der Firefox-Statusleiste anlegen. Einige der Erweiterungen tragen sich ebenfalls in das Kontextmenü des Browsers ein und sind dann jederzeit per rechter Maustaste innerhalb des Hauptfensters zu erreichen.

Sobald es eine neue Version für eines der Add-ons gibt, werden Sie von Firefox automatisch informiert. Bei einem Browser-Upgrade - beispielsweise von Firefox 2 auf 3 - führt der Browser zudem einen Kompatibilitätstest durch, um zu prüfen, ob alle installierten Erweiterungen auch mit der neuen Version noch funktionieren oder nicht.

Tipp: Um alle Ihre Erweiterungen im Auge behalten zu können, sie zu sichern und zu managen, gibt es den Firefox Extension Backup Extension FEBE. Dieser funktioniert mit allen Firefox-Versionen (1 bis 3.0, bitte bei der Installation die benötigte Version auswählen). FEBE ist in erster Linie eine Backup-Software, die alle möglichen Firefox-Einstellungen automatisch sichern und wiederherstellen kann - von Ihren Favoriten über die Cookies bis hin zu anderen Add-ons.

Wir starten mit einer Bildergalerie für die schnelle Übersicht über alle der hier vorgestellten Extensions. Sie finden unter jedem Bild auch sofort den Download-Link, der Sie direkt zur Installation des Add-ons führt. Wünschen Sie weitere Informationen, blättern Sie einfach unterhalb des Galeriefensters weiter durch unsere Beschreibungstexte. Viel Spaß beim Stöbern!

Profi-Tools für Firefox
Bandwith Tester: So schnell surfen Sie
Dieses Addon schickt einige Testpakete durch die Leitung und testet damit die Schnelligkeit Ihrer Internetverbindung.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/178" target="_blank">Download-Link</a>
Cache Viewer: Zwischen den Daten lesen
Dieses Addon ist ein simples aber wertvolles Tool um den Browser-Cache übersichtlich anzuzeigen.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/2489" target="_blank">Download-Link</a>
Colorzilla: Nichts für graue Mäuse
Das Addon zeigt Ihnen die Farbwerte von der Stelle an, über der sich gerade der Mauszeiger befindet.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/271" target="_blank">Download-Link</a>
DND Domain Name Details / Domain Info: Macht Server und IP-Adresse ausfindig
Klicken Sie mit der rechten Maustaste in die Website und wählen Sie aus dem Kontextmenü "Domain Info" die gewünschte Information.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/2166" target="_blank">Download-Link</a>
DND Domain Name Details / Domain Info: Macht Server und IP-Adresse ausfindig
Klicken Sie mit der rechten Maustaste in die Website und wählen Sie aus dem Kontextmenü "Domain Info" die gewünschte Information.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/2166" target="_blank">Download-Link</a>
DOM Inspector: Alle Bestandteile einer Website anzeigen
Mit dem DOM-Inspector (DOM steht für Document Object Model, das die Struktur einer Website beschreibt) können Sie die Struktur und die Bestandteile einer in Firefox geladenen Webseite mit all ihren HTML-, CSS- und Script-Bestandteilen sowie deren Methoden und Eigenschaften in einem neuen Fenster baumartig anzeigen lassen und damit leichter analysieren.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/1806" target="_blank">Download-Link</a>
DOM Inspector: Alle Bestandteile einer Website anzeigen
Mit dem DOM-Inspector (DOM steht für Document Object Model, das die Struktur einer Website beschreibt) können Sie die Struktur und die Bestandteile einer in Firefox geladenen Webseite mit all ihren HTML-, CSS- und Script-Bestandteilen sowie deren Methoden und Eigenschaften in einem neuen Fenster baumartig anzeigen lassen und damit leichter analysieren.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/1806" target="_blank">Download-Link</a>
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 ihren Seiten auf Fehler zu kontrollieren und diese zu protokollieren und anschließend zu korrigieren.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/1843" target="_blank">Download-Link</a>
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 ihren Seiten auf Fehler zu kontrollieren und diese zu protokollieren und anschließend zu korrigieren.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/1843" target="_blank">Download-Link</a>
Firefox Extension Backup Extension FEBE: Verwalten und Sichern der Add-ons
Hilft Ihnen beim verwalten und sichern Ihrer Erweiterungen.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/2109" target="_blank">Download-Link</a>
HTML Validator: Quelltext auf Fehler überprüfen
Mit dem Firefox-Addon HTML-Validator können Sie Webseiten komfortabel auf HTML-Fehler durchsuchen und sicherstellen, dass sie mit den Vorgaben des W3-Konsortiums übereinstimmen.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/249" target="_blank">Download-Link</a>
HTML Validator: Quelltext auf Fehler überprüfen
Mit dem Firefox-Addon HTML-Validator können Sie Webseiten komfortabel auf HTML-Fehler durchsuchen und sicherstellen, dass sie mit den Vorgaben des W3-Konsortiums übereinstimmen.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/249" target="_blank">Download-Link</a>
HTML Validator: Quelltext auf Fehler überprüfen
Mit dem Firefox-Addon HTML-Validator können Sie Webseiten komfortabel auf HTML-Fehler durchsuchen und sicherstellen, dass sie mit den Vorgaben des W3-Konsortiums übereinstimmen.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/249" target="_blank">Download-Link</a>
Live http Headers: Alle Browser-Bewegungen anzeigen
Mit diesem ausgesprochen einfach zu bedienenden Sniffer können Sie den Datenaustausch zwischen dem Browser Firefox und dem Webserver überwachen.<br /><br /><a href="http://livehttpheaders.mozdev.org/" target="_blank">Download-Link</a>
Live http Headers: Alle Browser-Bewegungen anzeigen
Mit diesem ausgesprochen einfach zu bedienenden Sniffer können Sie den Datenaustausch zwischen dem Browser Firefox und dem Webserver überwachen.<br /><br /><a href="http://livehttpheaders.mozdev.org/" target="_blank">Download-Link</a>
Header Monitor für Live http Headers: Volle Kontrolle
Der Header Monitor zeigt von Ihnen auswählbare Detailinformationen von Live http Headers an.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/575" target="_blank">Download-Link</a>
MeasureIt: Lineal für die Webseite
Dieses Addon gehört zu den kleinen aber feinen Helferlein, die den Alltag ungemein erleichtern. Wenn Sie auf einer Webseite Längen messen wollen, dann ist Measureit Ihr Lineal.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/539" target="_blank">Download-Link</a>
Noscript: Schaltet alle JavaScripts aus
Diese Erweiterung lässt Sie schwarze und weiße Listen für JavaScripts und andere Skripte auf der Site definieren.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/722" target="_blank">Download-Link</a>
Professor: Liest Feeds und Metadaten aus
RSS-Newsfeeds und Meta-Informationen auf Web-Seiten geben oft ungewollt viel Auskunft über diese.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/2823" target="_blank">Download-Link</a>
ScrapBook: Das schnelle Archiv für zwischendurch
Favoriten einmal anders: Das Notizbuch hilft beim Organisieren, Suchen und Finden von Informationen<br /><br /><a href="https://addons.mozilla.org/en-US/firefox/addon/427" target="_blank">Download-Link</a>
Seoquake: Suchmaschinen-Optimierung und Ranking-Check
Fühlen Sie sich als Suchroboter! Wer wissen möchte, wie suchmaschinenoptimiert eine Seite ist, wo sie im Index (von Google, Yahoo und anderer Maschinen) gerankt wird und mit welchen Schlüsselbegriffe sie ausgestattet ist, ist bei Seoquake richtig. Das Add-on lässt sich beliebig anpassen und bietet eine Menge Möglichkeiten zum Herumspielen.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/3036" target="_blank">Download-Link</a>
Seoquake: Suchmaschinen-Optimierung und Ranking-Check
Fühlen Sie sich als Suchroboter! Wer wissen möchte, wie suchmaschinenoptimiert eine Seite ist, wo sie im Index (von Google, Yahoo und anderer Maschinen) gerankt wird und mit welchen Schlüsselbegriffe sie ausgestattet ist, ist bei Seoquake richtig. Das Add-on lässt sich beliebig anpassen und bietet eine Menge Möglichkeiten zum Herumspielen.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/3036" target="_blank">Download-Link</a>
Seoquake: Suchmaschinen-Optimierung und Ranking-Check
Fühlen Sie sich als Suchroboter! Wer wissen möchte, wie suchmaschinenoptimiert eine Seite ist, wo sie im Index (von Google, Yahoo und anderer Maschinen) gerankt wird und mit welchen Schlüsselbegriffe sie ausgestattet ist, ist bei Seoquake richtig. Das Add-on lässt sich beliebig anpassen und bietet eine Menge Möglichkeiten zum Herumspielen.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/3036" target="_blank">Download-Link</a>
Seoquake: Suchmaschinen-Optimierung und Ranking-Check
Fühlen Sie sich als Suchroboter! Wer wissen möchte, wie suchmaschinenoptimiert eine Seite ist, wo sie im Index (von Google, Yahoo und anderer Maschinen) gerankt wird und mit welchen Schlüsselbegriffe sie ausgestattet ist, ist bei Seoquake richtig. Das Add-on lässt sich beliebig anpassen und bietet eine Menge Möglichkeiten zum Herumspielen.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/3036" target="_blank">Download-Link</a>
Serverspy: Zeigt Serverinfos an
Auf welchem System läuft der Server, auf dem ich gerade unterwegs bin? Finden Sie es heraus!<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/2036" target="_blank">Download-Link</a>
Shazou: Liest Geodaten des Servers aus und bereitet sie grafisch auf
Lokalisieren Sie jede Website: Wo genau steht der Server? Grafisch über Google Maps aufbereitet, lässt sich so auch schnell nachvollziehen, welche Regelungen und Gesetze für die Site gerade gelten.<br /><br /><a href="https://addons.mozilla.org/en-US/firefox/addon/2993" target="_blank">Download-Link</a>
Venkman: Javascript Debugger
Untersuchen Sie die eingesetzten JavaScripts auf ihre Funktionalität. Fehleranalyse- und Debugging-Werkzeug deluxe.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/216" target="_blank">Download-Link</a>
Venkman: Javascript Debugger
Untersuchen Sie die eingesetzten JavaScripts auf ihre Funktionalität. Fehleranalyse- und Debugging-Werkzeug deluxe.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/216" target="_blank">Download-Link</a>
Webdeveloper: Quellcode-Tuning leicht gemacht
Mit Menü und Werkzeugleiste gegen das langweilige Zeilengeschiebe im Code.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/60" target="_blank">Download-Link</a>
Webdeveloper: Quellcode-Tuning leicht gemacht
Mit Menü und Werkzeugleiste gegen das langweilige Zeilengeschiebe im Code.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/60" target="_blank">Download-Link</a>
Wireshark: Analysetool für das Internet Protocol
Der Netzwerksniffer wurde nicht speziell für Firefox entwickelt, funktioniert damit aber genau so gut. Der Schäuble für zuhause: abhören, mitschneiden, auswerten.<br /><br /><a href="http://www.wireshark.org/" target="_blank">Link</a>
X-Ray: Dokumentenstruktur anzeigen ohne Quellcode-Chaos
Wer sich nicht durch Hunderte Zeilen Code wühlen will, um eine Übersicht über die Struktur einer Site zu bekommen, nimmt X-Ray zur Hand. Et voilá!<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/1802" target="_blank">Download-Link</a>
Yslow: Website-Tachometer
Yahoo hat Maßstäbe für die Bewertung der Ladegeschwindigkeit von Websites aufgestellt. Der Yslow-Tacho prüft nun, ob sich die Internetangebote auch daran halten.<br /><br /><a href="https://addons.mozilla.org/de/firefox/addon/5369" target="_blank">Download-Link</a>
Installieren von Addons in Firefox
Die Installation aller Add-ons geht bequem vonstatten.
Javascript-Fehlerkonsole
Sollte etwas einmal doch nicht sofort funktionieren, gibt Ihnen die Konsole Auskunft über die Fehler.
Firefox mit allen Erweiterungen
Ein voll mit Erweiterungen ausgestatteter Firefox lässt selbst bei Browser-Profis kaum noch Wünsche offen.

Mehr empfehlenswerte Firefox-Erweiterungen gibts bei den 33 Tipps für Firefox 3, den 37 "Fashion your Firefox"-Add-ons und den 20 Tipps der CW-Redaktion.

Browser-Traffic mitschneiden und Server- und Domaindaten anzeigen

Live http Headers: Alle Browser-Bewegungen anzeigen

Mit diesem ausgesprochen einfach zu bedienenden Sniffer können Sie den Datenaustausch zwischen dem Browser Firefox und dem Webserver überwachen. Er zeichnet also nur den Traffic an Port 80 und anders als andere Sniffer nicht den gesamten Netzwerktraffic auf - das bringt ja auch der Name des Addons schon zum Ausdruck: http-Header sind die Köpfe der Clientanfragen und Serverantworten beim http-Protokoll. Mit dem praktischen Addon kommen Sie auch URL-Weiterleitungen auf die Schliche und sehen, wo Cookies gesetzt werden. Aus den Mitschnitten sehen Sie, was für ein Server zum Einsatz kommt und welche MIME-Typen übermittelt werden. Gegebenenfalls sehen Sie auch den Fehlercode, den der Server sendet, wenn Probleme auftraten. Viele dieser Informationen liefert übrigens auch die weiter unten vorgestellte Webdeveloper Toolbar.

Live http Headers lässt sich so konfigurieren, dass der Sniffer in einem neuen Tab oder in der Sidebar angezeigt wird. Die URLs lassen sich mit Regular Expressions filtern. Die Mitschnitte können bei Bedarf gespeichert werden.

Live http Headers eignet sich nicht dafür Programme zu überwachen, die über einen anderen als Port 80 heimlich eine Verbindung zum Internet aufbauen. Trojaner können damit also nicht aufgespürt werden. Dafür benötigen Sie einen Sniffer, der den gesamten Traffic zwischen Client und Internet überwacht und an allen Ports lauscht. Das ginge beispielsweise mit dem kostenlosen Tool Wireshark. Wireshark (u.a. für Windows, Linux und MacOS) lässt sich detailliert konfigurieren und besitzt viele Filter, übertrifft also leistungsmäßig Live http Headers deutlich.

Doch diese Einschränkung macht Live http Headers keineswegs weniger wertvoll, ganz im Gegenteil. Durch die Beschränkung auf den http-Header-Verkehr ist das Addon übersichtlich und leicht zu bedienen. Dank Live http Headers können Sie unkompliziert Internetaktionen verfolgen, die Sie sonst im Browser nicht bemerken - Stichwort Ajax. Bei Ajax werden Informationen am Browser vorbei zwischen Client und Server ausgetauscht. Jede solche Ajax-Anfrage und Antwort wird im Live http Headers aufgelistet. Probieren Sie das einfach mal aus. Beispielsweise mit einem der typischen Referenzprojekte für Ajax: Mit Google Suggest. Oder noch einfacher: Mit der Bildergalerie auf der letzten Seite dieses Artikels. Jedes Mal wenn Sie auf der Bildergalerie weiterklicken, geht eine Anfrage an den Webserver der PC-WELT. Der Server wiederum schickt dann die nächste Seite der Bildergalerie als Antwort an Ihren Browser. Das können Sie mit Live http Headers genau verfolgen.

Kompatibel zu: Firefox 0.8 bis 3.0

Download: http://livehttpheaders.mozdev.org/

Tipp: Wenn Sie nur einige wenige Teilinformationen von Live http Headers platzsparend in der Statuszeile von Firefox anzeigen lassen wollen, können Sie zusätzlich nach der Installation von Live http Headers noch das Addon Header Monitor aufspielen (unterstützt derzeit nicht Firefox 3x). Es zeigt von Ihnen auswählbare Detailinformationen von Live http Headers an. Unter „Extras, Header Monitor“ können Sie das Addon konfigurieren. Das Addon Server Spy (für Firefox 2 und 3) wiederum liefert ebenfalls in der Statuszeile den Namen und die Versionsnummer des Webservers sowie gegebenenfalls das zu Grunde liegende Betriebssystem. Weitere Informationen liefert Server Spy aber im Unterschied zu Header Monitor nicht, es setzt allerdings auch nicht Live http Headers voraus.

DND Domain Details/Domain Info: Macht Server und IP-Adresse ausfindig

Klicken Sie mit der rechten Maustaste in die Website und wählen Sie aus dem Kontextmenü "Domain Info" die gewünschte Information. Zur Auswahl stehen unter anderem whois-Abfrage, Website-Details, IP-Adress-Details und Server Map. Die Abfrage öffnet dann die Seite http://dndetails.com/ in einem neuen Browser-Tab, in dem die gewünschten Informationen bereit gestellt werden. Wenn Sie also mal schnell wissen wollen, welche IP-Adresse hinter einem www-Namen steht oder wo sich konkret der Server befindet, auf dem eine Website gehostet wird, dann hilft Ihnen DND weiter. Für die Server Map, also die Anzeige des Serverstandorts auf einer Karte, greift DND auf Google Maps zurück. Sie können DND auch durch einen Klick auf das i-Icon in der Statuszeile starten.

Kompatibel zu: Firefox: 2.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/2166

Shazou: Server-Standort anzeigen

Dieses Addon macht genau eine Sache: Es zeigt den Standort des Webservers der Seite, die Sie gerade im Firefox geöffnet haben, auf Google Maps an. Klicken Sie dazu mit der linken Maustaste auf das Shazou-Icon rechts unten in der Statuszeile (weißes S auf hellblaumen Grund), schon erscheint ein eigenes Fenster mit Google Maps und dem Browserstandort. Diese Funktion stellt auch das oben vorgestellte DND bereit.

Kompatibel zu: Firefox: 1.5 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/2993

Flagfox 3.3.4: Server- und Domaindaten anzeigen

Zeigt über eine Landesflagge (wahlweise in der Adress- oder in der Statuszeile eingeblendet) den Standort des Servers der aktuellen Website an. Wenn Sie auf die Flagge klicken, startet eine whois-Abfrage, die detaillierte Informationen zum Webserver und dessen Standort liefert.

Kompatibel: Firefox: 2.0 – 3.1b2pre

Download: https://addons.mozilla.org/de/firefox/addon/5791

Als nächstes Stellen wir eine Allzweck-Waffe für Webmaster und -Designer vor. Außerdem gibt es unter anderem ein Code-Analyse-Tool und einen Ladezeiten-Optimierer.

Allzweck-Waffe, 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. Er installiert aber auch eine eigene Toolbar.

Webdeveloper verfügt über dermaßen viele Funktionen, dass wir nur einige erwähnen können: Sie können sich beispielweise 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 "Tools" 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, um eine lokal auf dem PC gespeicherte 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.

Kompatibel zu: Firefox: 1.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/60

Die XML Developer Toolbar ist eine ähnliche 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 ihren Seiten 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 das Menü „Inspect“ 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 unten in der Statuszeile ein- und ausschalten.

Kompatibel zu: Firefox: 2.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/1843

Wenn Sie übrigens Javascripts, Java-Applets und Flashanimationen in einer Website schnell und einfach kontrollieren wollen, bietet sich das Addon NoScript an (kompatibel: Firefox: 1.5 bis 3.1b2pre). Es bietet schneller 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. Im Yahoo Developer-Network erschienen deshalb 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-Add-on für Firefox veröffentlicht, das eine Website auf die Einhaltung der Yahoo-Tipps prü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.

Kompatibel zu: Firefox: 1.5 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/5369

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

Kompatibel: Firefox: 1.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/1313

Weiter geht es mit Erweiterungen zum Abspeichern von Seiten, zum Messen der Surf-Bandbreite, zum Ermitteln von Farbwerten und zum Checken der Links.

Seiten abspeichern, Surf-Bandbreite messen, Farbwerte ermitteln und Links checken

ScrapBook 1.3.3.2: Seiten abspeichern

Wer oft HTML-Seiten auf den eigenen Rechner herunterlädt, für den ist die Firefox-Erweiterung ScrapBook einen Blick wert. Das Addon speichert ganze Websites und macht sie offline verfügbar. Die gespeicherten Seiten können Sie komfortabel verwalten, farblich markieren und mit Notizen versehen.

Kompatibel zu: Firefox: 2.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/427

Bandwidth Tester: So schnell surfen Sie

Dieses Addon schickt einige Testpakete durch die Leitung und testet damit die Schnelligkeit Ihrer Internetverbindung. Bevor Sie das Tool starten, sollten Sie einstellen, welche Bandbreite Ihnen zur Verfügung steht.

Hinweis: Um Bandwidth Tester installieren zu können, müssen Sie sich kostenlos mit einer gültigen Mailadresse registrieren. Denn bei diesem Add-on handelt es sich um eine experimentelle Erweiterung.

Kompatibel zu: Firefox: 0.7 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/178

ColorZilla: Nichts für graue Mäuse

Das Addon zeigt Ihnen die Farbwerte von der Stelle an, über der sich gerade der Mauszeiger befindet. Die Farbwerte lassen sich kopieren und einfügen. Es stellt zudem eine Farbtabelle zur Verfügung.

Kompatibel zu: Firefox: 1.5 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/271

MeasureIt: Lineal für die Webseite

Dieses Addon gehört zu den kleinen aber feinen Helferlein, die den Alltag ungemein erleichtern. Wenn Sie auf einer Webseite Längen messen wollen, dann ist Measureit Ihr Lineal. Aktivieren Sie das Addon mit einem Klick auf das Lineal-Icon links unten: Die Seite wird daraufhin ausgegraut und Sie können mit der gedrückten linken Maustaste ein Viereck aufziehen, zu dem exakt die horizontalen und vertikalen Längenangaben in Pixel angezeigt werden. Dadurch wissen Sie auf einen Blick, wie breit und hoch beispielsweise ein Absatz auf der Website und müssen dafür nicht erst mühsam im Quelltext der Seite nach den Angaben suchen.

Kompatibel zu: Firefox: 1.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/539

LinkChecker 0.6.3: Weblinks überprüfen

Überprüft bei einem Klick auf "Links der Seite prüfen" im Extras-Menü, ob die Links auf der geöffneten Website funktionieren. Funktionierende Links werden grün dargestellt.

Kompatibel: Firefox: 1.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/532

Auf der nächsten Seite gibt es zum Beispiel Add-ons, mit denen sich die Seitenbestandteile anzeigen lassen. Außerdem stellen wir Hilfsmittel vor, mit Sie Code-Fehler aufspüren.

Seitenbestandteile anzeigen und Code-Fehler mit Debugger aufspüren

DOM-Inspector: Alle Bestandteile einer Website anzeigen

Ein wichtiges Tool liefert Firefox bei der Installation gleich mit, Sie müssen es nur bei der Installation explizit auswählen, indem Sie es als Option unter „Installationsart benutzerdefiniert“ mitinstallieren. Die Rede ist vom DOM-Inspector. Falls Sie Firefox standardmäßig ohne DOM-Inspector auf Ihren Rechner aufgespielt haben, können Sie das problemlos nachholen, indem Sie Firefox noch einmal drüber installieren – nur diesmal eben benutzerdefiniert.

Mit dem DOM-Inspector (DOM steht für Document Object Model, das die Struktur einer Website beschreibt) können Sie die Struktur und die Bestandteile einer in Firefox geladenen Webseite mit all ihren HTML-, CSS- und Script-Bestandteilen sowie deren Methoden und Eigenschaften in einem neuen Fenster baumartig anzeigen lassen und damit leichter analysieren. Im Rahmen des DOM-Modells kann man beispielsweise mit Javascript auf die Bestandteile einer Website zugreifen. Links in der Baumansicht suchen Sie das Sie interessierende Element (den so genannten Knoten) aus, rechts werden dann dessen Daten angezeigt. In der Browser-Ansicht können Sie die einzelnen Bestandteile einer Website hervorheben um sie leichter aufspüren zu können. Leere Textknoten („#text") lassen sich ausblenden um die Darstellung übersichtlicher zu machen: Nehmen Sie dazu im DOM-Menü „Ansicht, Leere Textknoten anzeigen“ das Häkchen weg. Alle mit einem „+“ gekennzeichneten Knoten lassen sich per Mausklick öffnen und anzeigen. Praktisch ist die Suchfunktion, mit der Sie gezielt nach bestimmten Knoten suchen können.

Für den DOM-Inspector hält Mozilla übrigens noch eine Reihe ergänzender Addons bereit. Eine solche Ergänzung ist beispielsweise Event Spy für Javascripts (Firefox: 1.0 – 3.1b2pre).

Debugger Venkman: Programmierfehler im Code aufspüren

Javascriptfehler zeigt zwar auch die Javascript-/Fehler-Konsole im Menü „Extras“ des Browser an (alternativ können Sie bei Firefox auch „javascript:“ in die Adresszeile eingeben). Doch besonders leistungsfähig ist diese Konsole nicht. Ein richtiger Debugger für Javascript ist dagegen Venkman. Er wird unter „Extras, Add-ons“ mit der Bezeichnung „Javascript-Debugger“ aufgeführt.

Zuerst laden Sie die Seite mit dem zu prüfenden Javascriptcode in Firefox, dann starten Sie Venkman. In der Regel sollte das reibungslos klappen, gelegentlich kann es zu Abstürzen kommen, manchmal ließ sich Venkman mit einer bestimmten Seite nicht sofort starten. In diesem Fall müssen Sie Firefox beenden - gegebenenfalls sogar über den Taskmanager von Windows. Danach starten Sie Firefox wieder, öffnen die betreffende Webseite und starten dann Venkman.

Links in Venkman werden die Seitenbestandteile angezeigt, mit einem Doppelklick auf eine dieser Dateien wird deren Code rechts angezeigt. Links neben der Zeilenanzeige im Codefenster können Sie Haltepunkte setzen um Fehler aufzuspüren. Über den „Step over“-Befehl in der Menüleiste können Sie sich dazu von Haltepunkt zu Haltepunkt hangeln. Über die Registerkarte "Watches" können Sie beispielsweise Variablen festlegen, deren Wert während des Debuggens überwacht werden soll.

Kompatibel zu: Firefox: 0.9 bis 3.1b1pre

Download: http://www.mozilla.org/projects/venkmanHTML

Validator/HTMLTidy:Quelltextauf Fehler überprüfen

Mit dem Firefox-Addon HTML-Validator können Sie Webseiten komfortabel auf HTML-Fehler durchsuchen und sicherstellen, dass sie mit den Vorgaben des W3-Konsortiums übereinstimmen. Vor der Benutzung können Sie zwischen unterschiedlichen Test-Verfahren wählen (Hinweis: einen umfassenden Überblick über Validierungs-Tools für HTML, CSS und Co finden Sie hier).
Mit einem doppelten Mausklick auf das Icon lässt sich der Seitenquelltext samt den Fehlermeldungen anzeigen. Wenn Sie auf die Fehlermeldungen klicken, wird die betreffende Stelle im Quelltext angesprungen.

Kompatibel zu: Firefox: 1.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/249

X-Ray: HTML-Tags einblenden

Die Firefox-Erweiterung X-Ray ("Röntgenstrahl") erlaubt es, den Quelltext einer Webseite mit zu sehen. Im Unterschied zu der in Firefox schon integrierten Funktion, zeigt X-Ray den Quelltext nicht in einem extra Fenster an, sondern direkt in der Webseite. Die Tags werden also in der Website-Ansicht im Browser angezeigt. Auf diese Weise lässt sich schnell nachvollziehen, wie ein Dokument aufgebaut ist, ohne lange im Quelltext suchen zu müssen. Die Ansicht selbst ist allerdings etwas verwirrend und erfordert ein geübtes Auge.

Kompatibel zu: Firefox: 1.5 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/1802

Professor X: Header-Informationen anzeigen

Das Addon zeigt die Header-Informationen einer Website inklusive der darin befindlichen Skripte und CSS-Informationen an.

Kompatibel zu: Firefox: 1.5 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/2823

Zu guter Letzt gibt es noch Erweiterungen zum Anzeigen des Browser-Caches und zur Analyse des Suchmaschinen-Rankings. Außerdem fasst unsere Bildergalerie die hier vorgestellten Add-ons noch einmal zusammen. Wer noch nicht genug Add-ons für seinen Firefox besitzt, kann zudem in einigen weiteren Artikeln und Download-Specials zu Firefox stöbern.

Browser-Cache anzeigen und Suchmaschinen-Ranking darstellen

Cache Viewer: Was hat Firefox alles abgelegt?

Dieses Addon ist ein simples aber wertvolles Tool um den Browser-Cache übersichtlich anzuzeigen. Das Addon liefert also genau die gleichen Informationen, die man bekommt, wenn man in die URL-Zeile von Firefox about:cache eingibt. Jedes markierte Element wird in einer Vorschau angezeigt, per Mausklick lässt es sich auch in Originalgröße im Browser darstellen. Über die Suchfunktion können Sie bestimmte Seitenbestandteile gezielt aufspüren. Zu jedem Element im Cache gibt es Informationen wie Uhrzeit und Dateigröße. Der Cacheinhalt lässt sich nach verschiedenen Kritierien wie Größe, zuletzt abgerufen oder MIME-Type sortieren.

Kompatibel zu: Firefox: 2.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/2489

SeoQuake: Suchmaschinen-Allrounder

Das Firefox-Addon SeoQuake unterstützt Sie bei der Suchmaschinenoptimierung (Search Engine Optimization – daher der Name Seo) Ihrer Webseite.
SeoQuake bietet unter anderem die SeoBar, die auf Wunsch zu jeder Seite Informationen wie den Google PageRank, Google Index und ähnliche Parameter anzeigt. Eine weitere Option untersucht für Sie die Keyword-Dichte auf einer Webseite und liefert Title, Meta-Keywords und Meta-Description.
Zusätzlich lässt sich SeoQuake in die Ergebnisseiten von Suchanfragen integrieren, etwa bei Google oder Yahoo. Die angezeigten Parameter können jeweils den eigenen Wünschen angepasst werden. Eine whois-Abfrage ist ebenso möglich wie eine Anzeige des Seitenquelltexts. Alternativ lässt sich auch eine eigene SeoQuake-Toolbar einblenden.

Kompatibel zu: Firefox: 2.0 bis 3.0

Download: https://addons.mozilla.org/de/firefox/addon/3036

Alle kostenlosen Erweiterungen für Firefox stehen auf https://addons.mozilla.org/firefox bereit. Sie können dort in das Suchfenster den Namen der gewünschten Erweiterung eingeben und dann die xpi-Datei direkt aus Firefox heraus herunterladen und im Browser installieren.

Dieser Artikel basiert auf einem Beitrag der PC-Welt.